ShareYourGroupShareYourGroupError Explainer

JavaScript TypeError: Failed to fetch

A plain-words explanation of this JavaScript message: what it means, the usual causes, and the steps that fix it.

The messageUncaught (in promise) TypeError: Failed to fetch

Make the error yourself

Run in Google Chrome 157.0.8103.51. This is the smallest example we could find that shows it.

JavaScript (in a script tag)

fetch("http://127.0.0.1:9283/data.json")
  .then(r => r.json())
  .then(d => console.log(d));

Browser console (the real message)

Access to fetch at 'http://127.0.0.1:9283/data.json' from origin 'http://127.0.0.1:9281' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Failed to load resource: net::ERR_FAILED
TypeError: Failed to fetch

Why it happens

fetch itself failed, before any answer arrived. It fails like this for network reasons only: the server is not reachable (wrong address or port, server not running, no internet), the connection was refused, the browser blocked the request because of CORS, mixed content (an http:// request from an https:// page), a browser extension, or a certificate problem. A 404 or 500 answer is NOT a failure for fetch: it succeeds and you have to look at response.ok. Firefox says "NetworkError when attempting to fetch resource" and Safari "Load failed" for the same problem.

How to fix it

  1. Open the Network tab. The failed request shows the reason in the Status or Console column (for example ERR_CONNECTION_REFUSED, ERR_NAME_NOT_RESOLVED, a CORS message).
  2. Check the address by pasting it into a new tab.
  3. Make sure the server is running and listening on that port.
  4. On an https page use https addresses.
  5. Add .catch(...) so you can show a message when the network is down.

The corrected version

JavaScript (in a script tag)

fetch("/page.json")
  .then(r => r.json())
  .then(d => console.log(d.ok))
  .catch(err => console.log("Request failed:", err.message));

Browser console (the corrected version)

true

How to avoid it

Always add error handling around fetch, and show the user a message with a retry button.

Questions

Why does fetch not throw for a 404?

Because the request itself worked: the server answered. Check response.ok or response.status.

This is an independent guide. It is not connected with Python, Microsoft, Google, GitHub or the Git project. Product names belong to their owners. Examples were run on 13 November 2026 in a practice folder or a blank workbook; your version may word a message slightly differently.