Is there a standard way to handle network errors and blocked requests across browsers?

Question

According to the fetch spec https://fetch.spec.whatwg.org/#concept-network-error network errors responses should have status 0. But for these error cases we see the browser implementation of the fetch API throw a generic error. When I block a request in browser dev tools across any major browser I get a thrown error from fetch. The error message differs across browsers.

It surprises me that this behavior isn't standardized. This is a big problem for our team's telemetry and alerts. We want to filter out "network errors" from server errors when alarming our on call. We've resorted to string matching on the different set of error messages thrown across browsers. So far we have:

const NETWORK_OR_FIREWALL_ERROR_MESSAGES = [
  'TypeError: Failed to fetch', // Chrome
  'Failed to fetch', // Chrome, Edge
  'NetworkError when attempting to fetch resource.', // Firefox
  'Load failed', // iOS Safari,
];

I'm sure it's not comprehensive - we have to incrementally add to this as our oncall engineer gets paged and then greps through logs.

Is there a better way to filter out network errors or is resorting to string matching on Error.message our best bet? Shouldn't this be standardized so that fetch API across browsers throw a certain error type / message or is there a good reason it can't be?

Answer 1

According to the fetch spec https://fetch.spec.whatwg.org/#concept-network-error network errors responses should have status 0. But for these error cases we see the browser implementation of the fetch API throw a generic error.

You misunderstood the spec there. When it says to "return a network error" from the fetch algorithm, the fetch method will throw an error. This is stated in https://fetch.spec.whatwg.org/#dom-global-fetch, "If response is a network error, then reject p with a TypeError and abort these steps".

Every time the fetch method throws (rejects the promise it returned), you don't have a server error. Nothing to worry there (unless, of course, the problem is that your server is down and completely unreachable). You still do have a hard time distinguishing network errors (where the request was blocked, the device was offline, or the connection could not be established for any other reason) from problems where your clientside code did not use fetch correctly (e.g. passing invalid options), they all just throw TypeErrors.