Published on

How to Filter Sentry Errors and Reduce Noise in Javascript

Authors

Setting up Sentry in a project is straight forward. We just need to install the Sentry client and configure it.

npm install --save @sentry/browser

import * as Sentry from '@sentry/browser';
Sentry.init({
  dsn: 'https://examplePublicKey@o0.ingest.sentry.io/0',
  release: 'my-project-name@3.2.1',
});

That's it.

Under the hood, if an error happens in your code (and also other code that runs on the same page), Sentry will capture and process it.

And you can also capture error manually as well.

try {
  // do something
} catch (error) {
  Sentry.captureException(error);
}

So, what's the problem?

Well, it'll start capturing errors that are not even related to our code.

For example, it'll capture errors that are thrown by the browser extensions, third party libraries, etc.

And it slowly consumes our quota and also increases the error alert that are not related to our code.

How to fix it?

There are multiple way to handle sending errors to Sentry.

1. SDK Filtering: beforeSend

While initialising Sentry, we can define beforeSend callback function using which we can write out own logic to filter out errors.

Sentry.init({
  beforeSend: (event, hint) => {
    const error = hint.originalException;
    if (error && error.message && error.message.match(/known issue/i)) {
      // do not send known issue
      return null;
    }
    return event;
  },
});

2. SDK Configuration: InboundFilters

Similar to that of beforeSend we can also configure the known issue and settings while initialising Sentry to filter out errors.

allowUrls → Allowed domains in regex denyUrls → Denied domains in regex ignoreErrors → Ignores errors that match the given strings or regex

Sentry.init({
  ignoreErrors: ['known issue'],
  denyUrls: [
    // Chrome extensions
    /extensions\//i,
    /^chrome:\/\//i,
    // Facebook flakiness
    /graph\.facebook\.com/i,
  ],
  allowUrls: [/https?:\/\/((cdn|www)\.)?example\.com/],
});

References