Fix guides / "TypeError: Failed to fetch" in the browser

What "TypeError: Failed to fetch" means and how to fix it

A button does nothing and the console says TypeError: Failed to fetch (Chrome), NetworkError when attempting to fetch resource (Firefox), or Load failed (Safari). Unlike a 404 or 500, the request never got a usable response. Work through these causes in order.

Start in the Network tab

Open developer tools, then Network, and repeat the action. Click the failed request. The URL and the status column tell you which cause below applies.

1. The URL is wrong or undefined

If the request goes to something like undefined/rest/v1/... or https://yourapp.com/undefined/api, an environment variable is missing in production. Set it on your host with the right prefix (VITE_ or NEXT_PUBLIC_) and redeploy. See our environment variables guide.

2. Mixed content (http from https)

A page on https:// cannot call an http:// API; the browser blocks it. The console usually also mentions "Mixed Content". Use the https URL of your API. A common case: the code still calls http://localhost:3001, which only exists on your laptop.

3. CORS

If the console also says "blocked by CORS policy", the server must allow your site's origin. See our CORS guide.

4. The backend is down or paused

• Supabase free projects pause after a period of inactivity. Open the Supabase dashboard; if the project is paused, restore it.
• Your API server crashed or is asleep. Free tiers on some hosts sleep after inactivity; the first request may time out. Check the host's logs.
• A serverless function timed out. Long requests (for example to an AI API) can exceed the platform's time limit. Check function logs for timeouts.

5. Something on the user's side

Ad blockers and privacy extensions block some requests, especially to analytics or URLs containing words like "track". Test in a private window with extensions off. If it works there, rename the endpoint or tell users.

Handle it gracefully

try {
  const res = await fetch(url);
  if (!res.ok) throw new Error(`Server returned ${res.status}`);
  return await res.json();
} catch (err) {
  setError('Could not reach the server. Check your connection and try again.');
}

Users should see a message instead of a button that silently does nothing.

Last updated 2026-10-19.