📦 react-toastify-error-handler

🧠 A simple utility to handle Axios/Express errors with beautiful toast notifications using react-toastify.

✨ Features

• ✅ Plug & play error handler for Axios or any API call
• 🚫 Handles all common error types (response, request, generic)
• 🎨 Uses react-toastify for colorful, user-friendly notifications
• ⚛️ Works in React apps (with TypeScript or JavaScript)

📦 Installation

npm install react-toastify-error-handler react-toastify

react-toastify is a required peer dependency.

⚙️ Basic Setup

1. Wrap your app with ToastContainer

// App.tsx or App.jsx
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

function App() {
  return (
    <>
      <ToastContainer />
      {/* your app code */}
    </>
  );
}

2. Use handleCustomError in your API calls

import { handleCustomError } from 'react-toastify-error-handler';

const getData = async () => {
  try {
    await axios.get("/api/some-endpoint");
  } catch (error) {
    handleCustomError(error); // 🔥 shows a toast
  }
};

📋 Error Types Handled

// 1. Server responded with an error
throw { response: { data: { message: "Unauthorized" } } };

// 2. No response received
throw { request: {} };

// 3. Request setup error
throw new Error("Something went wrong");

🧪 Example Button

<button onClick={() => {
  try {
    // fake error
    throw { response: { data: { message: "Something broke!" } } };
  } catch (error) {
    handleCustomError(error);
  }
}}>
  Trigger Error
</button>

🧰 Requirements

• React 17 or higher
• react-toastify version 9+

📜 License

MIT

👨‍💻 Author

Kirubel Jalleta

GitHub: kirubeljalleta

LinkedIn: kirubeljalleta