API Error Handling in React.js – বিস্তারিত বাংলা গাইড

React অ্যাপে API থেকে ডাটা লোড করার সময় অনেক সমস্যা (Error) হতে পারে যেমন:

ইন্টারনেট সমস্যা
API সার্ভার ডাউন
Wrong API URL
Unauthorized Request (401)
Server Error (500)
Timeout

এই সমস্যাগুলো সঠিকভাবে Handle না করলে অ্যাপ ক্র্যাশ করবে এবং User খারাপ অভিজ্ঞতা পাবে। তাই React-এ Proper API Error Handling খুবই গুরুত্বপূর্ণ।

📌 কেন Error Handling গুরুত্বপূর্ণ?

User Friendly Message প্রদর্শন করা যায়
App ক্র্যাশ হওয়া থেকে রক্ষা করা যায়
Debug করা সহজ হয়
Production অ্যাপে প্রয়োজনীয়

📌 API Error Handling এর Basic Flow

Loading state → data fetch শুরু হলে
Try block → API call
CATCH block → Error ধরবে
Error message UI তে দেখাবে
Finally → Loading বন্ধ করবে

📌 Fetch API দিয়ে Error Handling

✔ Example: Basic Fetch Error Handling


import { useEffect, useState } from "react";

function Users() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users123") // Wrong URL
      .then(res => {
        if (!res.ok) throw new Error("Server Error: " + res.status);
        return res.json();
      })
      .then(data => setUsers(data))
      .catch(err => setError(err.message))
      .finally(() => setLoading(false));
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <div>
      {users.map(u => (
        <p key={u.id}>{u.name}</p>
      ))}
    </div>
  );
}

export default Users;

✔ ব্যাখ্যা

!res.ok = অর্থ API response ঠিক নেই।
throw new Error() → Error ধরার জন্য পাঠানো হয়
.catch() → Error ধরবে
.finally() → Loading false করবে

📌 try…catch + async/await দিয়ে Error Handling

এটি সবচেয়ে clean এবং modern পদ্ধতি।


async function loadUsers() {
  try {
    setLoading(true);
    setError(null);

    const res = await fetch("https://jsonplaceholder.typicode.com/users");

    if (!res.ok) {
      throw new Error("Failed to fetch: " + res.status);
    }

    const data = await res.json();
    setUsers(data);

  } catch (err) {
    setError(err.message);

  } finally {
    setLoading(false);
  }
}

useEffect(() => {
  loadUsers();
}, []);

✔ সুবিধা

Code clean এবং readable
Error handle সহজ
Multiple API call manage সহজ

📌 Axios দিয়ে Error Handling

Axios এর error handling Fetch API এর থেকে বেশি সহজ এবং powerful।


import axios from "axios";

async function loadUsers() {
  try {
    setLoading(true);

    const res = await axios.get("https://jsonplaceholder.typicode.com/users");

    setUsers(res.data);

  } catch (error) {
    if (error.response) {
      // Server responded with status code
      setError("Server Error: " + error.response.status);
    } else if (error.request) {
      setError("Network Error. Try again.");
    } else {
      setError("Unexpected Error.");
    }
    
  } finally {
    setLoading(false);
  }
}

✔ Axios error types:

error.response → Server থেকে status code সহ error
error.request → Request গেছে কিন্তু Response আসেনি
error.message → অন্যান্য error

📌 Custom Error Message UI


{error && (
  <div style={{ color: "red", padding: "10px" }}>
    ❌ {error}
  </div>
)}

এতে করে user বুঝতে পারে কী সমস্যা হয়েছে।

📌 API Error Handling Best Practices

Always show loading & error state
Use try...catch for API calls
Use finally to stop loading
Invalid URL বা Server Down condition handle করুন
Better experience এর জন্য custom error message ব্যবহার করুন
Production অ্যাপে Toast Notifications ব্যবহার করা ভালো

📌 Real Project এ কোথায় Error Handling লাগে?

Login / Authentication
Payment Gateway
Data Dashboard
Ecommerce Product Load
Blog/Posts API

📌 Summary

React অ্যাপে API error handling খুব জরুরি
Fetch API → manually error catch করতে হয়
Axios → built-in error system থাকে
try…catch + useEffect → best practice
User-friendly message দেখালে UX ভালো হয়

API Error Handling