Fix: Supabase 'Failed to fetch' Error

The Problem

If your app throws TypeError: Failed to fetch (or a plain 'Failed to fetch' error) when calling Supabase, the request is failing before it ever reaches Supabase's servers. This is a browser-level network error, not an error returned by Supabase itself, so the fix almost always lives in your environment, not your query logic.

Why It Happens

The 'Failed to fetch' error in Supabase shows up for a handful of predictable reasons:

• Wrong or missing Supabase URL - a typo, trailing slash, or unset NEXT_PUBLIC_SUPABASE_URL environment variable.
• Missing https:// - the fetch API silently fails on malformed URLs.
• Project is paused - free-tier Supabase projects auto-pause after a period of inactivity.
• Network or DNS issues - a flaky connection, VPN, or corporate firewall blocking the Supabase domain.
• CORS misconfiguration - especially common if you're calling Supabase from a custom domain.
• Ad blockers or browser extensions - some ad blockers flag supabase.co requests as trackers.

The Fix

1. Verify your Supabase URL and anon key

Open your Supabase dashboard, go to Project Settings > API, and copy the exact Project URL and anon key. Compare them character-for-character against your environment variables.

// .env.local
NEXT_PUBLIC_SUPABASE_URL=https://your-project-ref.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

Then confirm the client is reading them correctly:

import { createClient } from '@supabase/supabase-js';
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
if (!supabaseUrl || !supabaseAnonKey) {
  throw new Error('Missing Supabase environment variables');
}
export const supabase = createClient(supabaseUrl, supabaseAnonKey);

Adding that guard clause turns a silent 'Failed to fetch' into a clear, actionable error message during development.

2. Check if your project is paused

Free-tier Supabase projects pause automatically after roughly a week of no activity. A paused project will not respond to any request, which surfaces as 'Failed to fetch' in the browser. Log into the dashboard - if you see a "Restore project" button, that's your problem. Click it and wait a couple of minutes for the database to come back online.

3. Inspect the Network tab

Open your browser's DevTools, go to the Network tab, and re-trigger the request. Look at the failed request:

• Status shows "(failed) net::ERR_NAME_NOT_RESOLVED" - your URL is wrong or DNS can't resolve it.
• Status shows "(blocked:other") - an extension or ad blocker is intercepting the request.
• No request appears at all - the code is throwing before fetch is even called, so check for a bad import or thrown error earlier in the stack.

4. Rule out ad blockers and browser extensions

Open your app in an incognito/private window with extensions disabled, or test in a different browser entirely. If the request succeeds there, an extension is the cause. Ad blockers such as uBlock Origin sometimes include filter lists that flag *.supabase.co as an analytics endpoint.

5. Fix CORS on a custom domain

If you're proxying Supabase behind a custom domain or calling it from a different origin, confirm your Supabase project's CORS/Auth settings allow that origin, and that any reverse proxy forwards headers correctly. If you're building on Next.js, see our guide on how to connect Next.js and React with Supabase for a clean setup that avoids this entirely.

How to Prevent It

• Always validate required Supabase environment variables at startup instead of letting them fail silently.
• Add a simple uptime check or cron ping if you're on the free tier, so your project never auto-pauses in production.
• Wrap Supabase calls in a try/catch and log the underlying error to distinguish network failures from Supabase API errors.
• Test in an incognito window whenever you see unexplained network failures, to quickly rule out extensions.

Frequently Asked Questions

What does 'Failed to fetch' actually mean in Supabase?

It means the browser's fetch call never received a response - the request failed at the network layer before reaching Supabase's API, usually due to a bad URL, a paused project, or a blocked request.

Is 'Failed to fetch' a bug in Supabase?

No. It's a generic browser error thrown by the fetch API itself, not an error code returned by Supabase. The cause is almost always in your app's environment or network path.

Why does my Supabase project keep pausing?

Free-tier projects pause automatically after about a week without any database activity. Upgrading to a paid plan or scheduling a periodic request prevents this.

How do I know if it's a CORS issue versus a network issue?

Check the Network tab in DevTools. A CORS error usually shows a response with a CORS-related message in the console, while a pure network failure shows no response at all or a DNS resolution error.

Need Help?

If you're still stuck after checking your environment variables, project status, and network tab, our team can help you debug it. Explore our development services or get in touch.