What is best way in javascript to stop throwing “ResizeObserver loop limit exceeded” error avoid exceeding Sentry quota?

Question

On my ReactJs web application, I'm getting "ResizeObserver loop limit exceeded" errors on pages specifically where I used AntTable . I searched a bit and as far as I see this error is harmless, and can be ignored. And also it happens only in Chrome, no other browser. But, the issue here for me is that I've integrated Sentry to my app to monitor and handle errors. And most of my users are using Chrome as browser, and thus my sentry quote getting its limits so fast. What is the best way to ignore this specific error. For now, I'm trying to find some good solution other than adding a dirty if statement to my code script throwing error to check whether this is "ResizeObserver" error initially. I simply do not want to do this if there is any other solution?

I can also share any other detail about my application - including code, if requested.

here is the function where app send captured errors to Sentry .

  init() {
    if (env.ENV === 'production' && !this.isInitialized) {
      this.isInitialized = true;
      Sentry.init({
        release: env.REACT_APP_VERSION,
        dsn: env.SENTRY_DSN,
        beforeSend(event) {
          const { request: { url }, exception: { values } } = event;
          if (
            url.includes('login') &&
            values[0].type === 'UnhandledRejection' &&
            values[0].value.includes('Non-Error promise rejection captured with keys')
          ) {
            return null;
          }

          return event;
        },
      });
    }
  }

I tried to apply the solution of wrapping code with requestAnimationFrame . But I'm lost about how should I return it.

  init() {
    if (!this.isInitialized) {
      this.isInitialized = true;
      Sentry.init({
        release: env.REACT_APP_VERSION,
        dsn: env.SENTRY_DSN,
        beforeSend(event) {
          const resizeObserver = new ResizeObserver((entries) => {
            window.requestAnimationFrame(() => {
              if (!Array.isArray(entries) || !entries.length) {
                return null;
              }
              return event;
            });
          });
          resizeObserver.observe(document.getElementById('app'));
        },
      });
    }
  }

I just need to return as exactly it is if it's not about ResizeObserver error.

Answer 1

Using window.requestAnimationFrame . See this answer for more info. Basically:

resizeObserver = new ResizeObserver(entries => {
    window.requestAnimationFrame(() => {
        // ...your code here
    });
});

Answer 2

Your main question is

What is the best way to ignore this specific error.

You are using Sentry and you want to prevent irrelevant errors from being reported to not exceed quota.

In such case you should use ignoreErrors when initializing Sentry in your app, like this:

Sentry.init({
  ignoreErrors: [
    "ResizeObserver loop limit exceeded"
  ],
  // other config options
  // ...
});

See Sentry documentation for more details: https://docs.sentry.io/platforms/javascript/configuration/filtering/#decluttering-sentry

And for more ideas on saving quota read https://blog.sentry.io/2017/03/27/tips-for-reducing-javascript-error-noise (a bit old, but most of the tips are still applicable to the new Sentry SDK).