Search code examples
firefoxgraphqlfetchapollo

"NetworkError when attempting to fetch resource" in Firefox 84/85

We launched a React website powered by a GQL backend not long ago. And just recently from client side metrics collected, we observed that below error is occurring at a high rate during data fetching in the Firefox browser of version 84 and 85 (latest as of the time this question is posted).

NetworkError when attempting to fetch resource.

Inside the React application, an Apollo GraphQL client is used to fetch data. The whole ApolloError object reads like

{"graphQLErrors":[],"networkError":{},"message":"NetworkError when attempting to fetch resource."}

However this could not be reproduced when we ourselves tried on the mentioned browser versions.

I have confirmed that this should not be a CORS problem. We have a pretty large user base and a wide range of Firefox browser versions are used by them, but it's only version 84 and 85 that exhibit this exceptionally high occurrence rate. Not long ago, we fixed a similar issue which was caused by the incompatibility of older version browsers with the Fetch api.

We are a bit clueless regarding what could have caused the issue. The amount of logging at client side is limited to reveal more. Any insights or leads are highly appreciated.

Solution

  • Eventually I found out that this is not an error that is tied to Firefox 84/85. As explained here, the fetch API would just throw a network error message when its process is aborted by the browser (most likely caused by user navigating to a different page or stopping page loading).

    I have verified this on a few major browsers by purposely stopping page loading when a fetch API is working in progress. The error messages I received are:

    • Chrome & Edge - Failed to fetch
    • Firefox - NetworkError when attempting to fetch resource
    • Safari - cancelled

    Unfortunately it's only the Safari browser that returns a proper message that explains what might have happened.

    I think generally these errors are safe to be ignored, or rescued with one retry attempt in case they were caused by connection issues. In the case of Apollo GraphQL client, it's more important to check on the graphQLErrors and networkError attribute of the ApolloError object, which indicate some serious issues caught by the client.