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.

Does this answer your question? [ResizeObserver - loop limit exceeded](https://stackoverflow.com/questions/49384120/resizeobserver-loop-limit-exceeded) — Mark Schultheiss, Jul 22 '20 at 11:34

score 8 · Accepted Answer · answered Feb 18 '21 at 13:06

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).

score 2 · Answer 2 · answered Jul 22 '20 at 11:30

2

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

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

answered Jul 22 '20 at 11:30

Michal Rybinski

59
5

Thank you. But actually, I did not understand what I should wrap. When I wrap my code with ResizeObserver instance, it is not executed at all. – Ali Zeynalov Jul 23 '20 at 11:11
1

Did you run observe command? `resizeObserver.observe(domNode);` – Michal Rybinski Jul 24 '20 at 12:04
Could you also update question with your code using ResizeObserver? that would be useful. Or maybe create a snippet or something. – Michal Rybinski Jul 24 '20 at 12:06
@AliZeynalov was my answer useful? can you mark it as correct answer? – Michal Rybinski Jul 27 '20 at 13:30
I updated the question. I'm living trouble with wrapping. I guess I'm doing somethings wrong about return statement. Can you take a look please? – Ali Zeynalov Jul 27 '20 at 20:03
1

Oh. I thought you are using ResizeObserver by yourself. That's when you should wrap it with requestAnimationFrame. Please check your codebase if you are using it anywhere. If not, well, that means one of your libraries use it and it's leaking, you could try to find which one and if you can do something about it. As a last resort, you can filter errors that are being sent to Sentry by the error message, see [here](https://docs.sentry.io/error-reporting/configuration/filtering/?platform=browser#before-send). So you would check if the error message matches "ResizeObserver loop limit exceeded”. – Michal Rybinski Jul 28 '20 at 08:22
@AliZeynalov did that help you? – Michal Rybinski Jul 30 '20 at 08:26
thanks for following the issue. Actually, I managed to solve the problem with ignoreErrors config given to Sentry.init function. – Ali Zeynalov Aug 01 '20 at 10:02

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

2 Answers2