So I have some code like this:
async function getData() { const response = await fetch(/* ... */); const json = await response.json(); return transform(json); }
Where transform
can throw some of its own errors.
I’m try to catch for network errors from the fetch
API.
try { const data = await getData(); // ... return // ... } catch (e) { if (isNetworkError(e)) { return localStorage.getItem('...'); } throw e; }
My question is how do I implement isNetworkError
that works across browsers? Note: that this should only return true if the network is offline.
It seems like both chrome and firefox throws a TypeError
but the messages they have are different on each.
- Firefox:
TypeError: "NetworkError when attempting to fetch resource."
- Chrome:
TypeError: Failed to fetch
Answer
If the first promise rejects, it’s a network error. That’s the only time it does.
The Promise returned from fetch() won’t reject on HTTP error status even if the response is an HTTP 404 or 500. Instead, it will resolve normally (with ok status set to false), and it will only reject on network failure or if anything prevented the request from completing.
From Mozilla developer page: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API