Sentry: Unhandled Failed to fetch

I use Sentry extensively for backend error tracking. I set it up for my frontend as well, using the CDN which was pretty simple. All I had to do was add the <script> tag.

A day after that, I started seeing real world errors from browsers. Some of them were from outdated browsers. Most interesting error that was captured was Unhandled Failed to fetch from Chrome and TypeError: NetworkError when attempting to fetch resource from Firefox.

Initially, I assumed that this might have been a backend error - perhaps no response from my API - so I checked nginx logs, sentry for backend. Everything looked good, which was puzzling. I looked up on Google to find the cause of this issue.

On Stack Overflow, I found someone experienced the same issue. The explanation was quite simple:

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 iOS chrome/safari throws this error.

What this meant was this error being logged was a hindrance since it was useless, prevented me from seeing the actual errors. Luckily, there was a solution to ignore these on setup.

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

I wish that the browsers included more information on this error, so it could be captured by Sentry.