JavaScript

Fetch Network Error: What It Means and How to Fix It

Error reference

Fetch Network Error

Language

JavaScript

Severity

High

When it happens

fetch() rejects with a TypeError when a network-level failure prevents the request from completing.

Potential fixes

Distinguish network errors (TypeError) from HTTP errors (non-ok status). Check the URL and ensure the server is running. Handle both error types explicitly. Use navigator.onLine to provide offline-aware UI feedback.

Deep dive

fetch() rejects with a TypeError when a network-level failure prevents the request from completing. This is different from an HTTP error status (4xx/5xx): a network error means no response was received at all. Common causes include the server being down, DNS resolution failure, or a CORS preflight rejection.

Why it happens

•The server is not running or the URL is unreachable.
•A CORS preflight (OPTIONS) request was rejected before the main request.
•The browser is offline or the network connection dropped.
•An invalid URL scheme or hostname causes DNS resolution to fail.

Potential fixes

Distinguish network errors (TypeError) from HTTP errors (non-ok status). Check the URL and ensure the server is running. Handle both error types explicitly. Use navigator.onLine to provide offline-aware UI feedback.

Examples

JavaScript

Code that triggers the error

const data = await fetch("https://localhost:9999/api");
const json = await data.json();

Error output

TypeError: Failed to fetch

Fixed code

try {
  const res = await fetch("https://api.example.com/data");
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  const json = await res.json();
} catch (err) {
  if (err instanceof TypeError) {
    console.error("Network error:", err.message);
  } else {
    console.error("API error:", err.message);
  }
}

Practice in English

How would you explain a Fetch Network Error to a fellow dev? Choose the right phrase:

"I hit an error...

Ready to practice your English at work?

Lingua-e has interactive exercises built around real developer conversations: standups, code reviews, retrospectives, and more. Practice until it comes naturally.

Try Lingua-e for free