Error Handling and Retries

🚨 Why Error Handling Matters in React

Whether you're fetching data from an API or interacting with third-party services, errors are inevitable. Good error handling improves UX, avoids crashes, and gives users clear feedback. 🧯🧠

🧪 Common Error Scenarios

• ❌ Network request fails (timeout, no internet)
• 🔑 Unauthorized access (401)
• 🔍 Resource not found (404)
• 💥 Server error (500+)

📦 Basic Error Handling with Fetch

useEffect(() => {
  fetch("https://api.example.com/data")
    .then(response => {
      if (!response.ok) {
        throw new Error(`HTTP Error: ${response.status}`);
      }
      return response.json();
    })
    .then(data => setData(data))
    .catch(error => {
      setError(error.message);
    });
}, []);

📋 Showing Fallback UI

Let users know something went wrong:

{error ? <p className="text-red-500">Failed to load data: {error}</p> : null}

🔁 Adding Retry Logic Manually

Retrying failed requests a few times before giving up improves robustness:

const fetchWithRetry = async (url, retries = 3, delay = 1000) => {
  try {
    const response = await fetch(url);
    if (!response.ok) throw new Error("Request failed");
    return await response.json();
  } catch (err) {
    if (retries > 0) {
      await new Promise(res => setTimeout(res, delay));
      return fetchWithRetry(url, retries - 1, delay);
    } else {
      throw err;
    }
  }
};

📌 Usage in useEffect

useEffect(() => {
  fetchWithRetry("https://api.example.com/data")
    .then(data => setData(data))
    .catch(err => setError(err.message));
}, []);

⚙️ Using Axios with Retry Support

If you use axios, integrate retry logic with the axios-retry package.

npm install axios axios-retry

import axios from 'axios';
import axiosRetry from 'axios-retry';

axiosRetry(axios, { retries: 3, retryDelay: () => 1000 });

axios.get("https://api.example.com/data")
  .then(res => setData(res.data))
  .catch(err => setError(err.message));

🛑 Graceful Degradation

Even if all retries fail, make sure your app handles it without crashing:

• 🧊 Show a helpful error message
• 🔁 Give user an option to retry manually
• 📝 Log errors to analytics tools (e.g., Sentry)

💬 Custom Retry Button

<button onClick={refetchData} className="bg-blue-500 text-white p-2 rounded">
  Retry
</button>

🧠 Retry Best Practices

• 🔁 Retry only for retryable errors (like 5xx, not 401 or 404)
• ⏱ Add a delay between retries to avoid hammering servers
• 🎯 Limit number of retries (3–5 max)
• 📦 Use exponential backoff for better performance

📋 Summary

• ✅ Always handle errors in network calls
• ✅ Provide a user-friendly fallback or retry option
• ✅ Use retry logic for flaky or transient issues
• ✅ Integrate tools like axios-retry for better DX

🚀 Final Thoughts

Robust error handling and smart retries make your React apps more stable, professional, and user-friendly. Don't treat API errors as edge cases — expect them, and design for them. 🧠💥