Sentry JS does not ignore global errors

Question

I use @sentry/react with my React/Redux application with the next setup:

Sentry.init({
  ignoreErrors: [
    "top.GLOBALS",
    "$ is not a function",
    "A.getAll is not a function.",
    "Cannot read property 'offsetWidth' of undefined",
    "undefined is not an object (evaluating 'tiles[0].offsetWidth')",
  ],
  integrations: [
    new Sentry.Integrations.GlobalHandlers({
      onerror: false,
      onunhandledrejection: false,
    }),
  ],
  dsn:
    "https://*****.ingest.sentry.io/****",
});

Then I wrap my app like this:

    ReactDOM.render(
      <Sentry.ErrorBoundary>
        <Provider store={initializeStore()}>
          <StyleSheetManager target={styleContainer}>
            <App />
          </StyleSheetManager>
        </Provider>
      </Sentry.ErrorBoundary>,
      reactRoot
    );

Since my application is installed on a ton of my clients websites - there are always error which a produced in the scopes outside of my app, as you can see in the config - I'm trying to ignore them in order to not push my sentry subscription limits, but it does not really work - I keep getting 2 million errors per month. It there anything else I can do except Sentry On Premise installation?

Answer 1

I'd suggest you to use Regex, so you can build multiple patterns to get every possible error coming your way. For example.

const ErrorsRegex = new RegExp(` "top.GLOBALS | $ is not a function 
    | A.getAll is not a function | Cannot read property 'offsetWidth' of undefined 
    | undefined is not an object (evaluating 'tiles[0].offsetWidth')`,
    'gmi'
);
Sentry.init({
    dsn: "https://*****.ingest.sentry.io/****",
    ignoreErrors: [ErrorsRegex]
});