"TypeError: Failed to fetch" reported over and overe

We have Sentry in the browser capturing any errors in our website.

We see TypeError: Failed to fetch logged tens of thousands of times to thousands of users.

We see no stacktrace, or an indication of where they originate.

They happen on a variety of browsers, but mostly mobile ones, Android, iPhone etc.

Not tied to a specific version.

Many of the events logged have a latency warning, ie, they were only sent to Sentry some 12 hours after being captured.

I understand this error is from the fetch API, which we use extensively on the website, and that this error is caused nostly by the user navigating away from the site when a fetch call is in progress, and thus it’s being terminated.

My question is, since this appears to be a “normal” routine error thats safe to ignore, what have other people on Sentry done to mitigate it.

1 Like

Hi there,

Recently I faced the same error. Production channel logged this error for about 500 times in just 2 months and it really got irritating. Ours’ is a rails application with frontend powered by react.

Here is what was happening in our case. When the page loads, the refresh button changes to cross button, now if some api request is in progress during this page loading time and the user click this cross button, then chrome browser throws this error. For the same situation Firefox throws NetworkError when attempting to fetch resource.This is not really an issue which we should be worried about, and so we decided to make sentry ignore this error by using the ignoreErrors attribute of sentry.

Sentry.init({
  dsn: "sentry_dsn",
  ignoreErrors: [
    'TypeError: Failed to fetch',
    'TypeError: NetworkError when attempting to fetch resource.'
  ],
});

Note:
Failed to fetch is also generated by CORS errors, please be mindful of that too.
Also we decided to ignore errors with statusCode in between 400 to 426 using the beforeSend callback of sentry.

I spent days trying to find this error. Hope this helps somebody.

Thank you

2 Likes

I’m having huge amounts of this error as well.

It’s very frustrating that the logged errors do not show which URL was being fetched.
But this is just how the fetch exception handling works out of the box

An example: bring up your devTools on any site and run this piece of code:

    fetch("http://something-that-does-not-exist")
        .then(function(x) {
            console.log("Success:", x);
        }).catch(function(e) {
            console.error(e);
        });

You’ll see that the exception logged is nothing more than
TypeError: Failed to fetch

So unfortunately, the error messages used by fetch simply do not convey any more info than that.

I would love it if there was some easy way to log the URL which was being fetched, but as it stands this is the default message.

When it comes to my site - I do run a lot of 3rd party ads - and I have to assume they are responsible for part of the failed fetches.
But it IS really scary to know that fetches are failing without a clue as to which URL they were attempting to fetch.

@sachinkrgupta : Thanks, your reply helped to realise possible “natural causes” for this event.

2 Likes