Checklist: What to Do When an External API Breaks Your React App

Checklist: What to Do When an External API Breaks Your React App

When an external API breaks your React app, panic wastes time. Follow this checklist to diagnose and fix the problem fast.

Step 1: Open the Network Tab

Reproduce the issue and look at the failing request in the Network tab. The status code, headers, and response body tell you most of what you need.

Step 2: Check the Status Code

404 means a wrong or changed URL. 401 or 403 means an auth or permission issue. 429 means rate limiting. 5xx means a server error on their end.

Step 3: Read the Response Body

The body often has a specific error message. Read it instead of guessing.

Step 4: Check for CORS

If the console shows a CORS error, the API is not allowing your origin. Use a proxy in development or route through your backend in production.

Step 5: Verify the Response Shape

If the request succeeds but your UI breaks, the response shape may have changed. Log the full response and update your parsing.

Step 6: Check Your Dependency Array

If requests fire too often or infinitely, your useEffect dependency array is wrong. Fix it so the fetch only runs when intended.

Step 7: Add a Fallback

If the API is down, fall back to cached or mock data so your app does not break entirely. Show a clear message and a retry option.

The Takeaway

When an external API breaks your app, follow the checklist: Network tab, status code, response body, CORS, response shape, dependency array, and fallback. This turns chaos into a routine fix.