How do I add a timeout to fetch?

Use AbortController: const ac = new AbortController(); setTimeout(() => ac.abort(), 5000); fetch(url, { signal: ac.signal })

What is the difference between TypeError and AbortError?

TypeError: network-level failure (could not reach server). AbortError: request was intentionally cancelled via AbortController.

Browser Fetch API Errors — Network Failure, AbortError & TypeError

Warningweb development

Overview

Fix Fetch API errors including TypeError (network failure), AbortError (request cancelled), CORS rejection, and handling failed HTTP responses in JavaScript.

Key Details

Fetch API throws TypeError for network failures (no connection, DNS failure, CORS block)
Important: fetch() does NOT reject on HTTP error status codes (404, 500) — only on network errors
You must check response.ok or response.status manually for HTTP error handling
AbortError is thrown when a request is cancelled via AbortController
Fetch does not support timeout natively — use AbortController with setTimeout

Common Causes

TypeError: network failure, DNS resolution failed, or CORS blocked the request
AbortError: request was cancelled by AbortController (timeout or user navigation)
Unexpected HTTP errors not caught because fetch() resolved with error status
Mixed content: fetch to HTTP URL from HTTPS page
Request blocked by Content Security Policy connect-src directive

Steps

1Always check response.ok: if (!response.ok) throw new Error(`HTTP ${response.status}`)
2Wrap fetch in try/catch for network errors: try { await fetch(url) } catch (e) { /* network error */ }
3Add timeout: const controller = new AbortController(); setTimeout(() => controller.abort(), 5000); fetch(url, { signal: controller.signal })
4For CORS: ensure the server sends proper Access-Control-Allow-Origin headers
5Check DevTools > Network tab for the actual HTTP status and response details