ResizeObserver - loop limit exceeded

Question

About two months ago we started using Rollbar to notify us of various errors in our Web App. Ever since then we have been getting the occasional error:

ResizeObserver loop limit exceeded

The thing that confuses me about this is that we are not using ResizeObserver and I have investigated the only plugin which I thought could possibly be the culprit, namely:

Aurelia Resize

But it doesn't appear to be using ResizeObserver either.

What is also confusing is that these error messages have been occuring since January but ResizeObserver support has only recently been added to Chrome 65.

The browser versions that have been giving us this error are:

• Chrome: 63.0.3239 (ResizeObserver loop limit exceeded)
• Chrome: 64.0.3282 (ResizeObserver loop limit exceeded)
• Edge: 14.14393 (SecurityError)
• Edge: 15.15063 (SecurityError)

So I was wondering if this could possibly be a browser bug? Or perhaps an error that actually has nothing to do with ResizeObserver?

Solution 1

You can safely ignore this error.

One of the specification authors wrote in a comment to your question but it is not an answer and it is not clear in the comment that the answer is really the most important one in this thread, and the one that made me comfortable to ignore it in our Sentry logs.

This error means that ResizeObserver was not able to deliver all observations within a single animation frame. It is benign (your site will not break). – Aleksandar Totic Apr 15 at 3:14

There are also some related issues to this in the specification repository.

Solution 2

It's an old question but it still might be helpful to someone. You can avoid this error by wrapping the callback in requestAnimationFrame. For example:

const resizeObserver = new ResizeObserver(entries => {
   // We wrap it in requestAnimationFrame to avoid this error - ResizeObserver loop limit exceeded
   window.requestAnimationFrame(() => {
     if (!Array.isArray(entries) || !entries.length) {
       return;
     }
     // your code
   });
});

Solution 3

If you're using Cypress and this issue bumps in, you can safely ignore it in Cypress with the following code in support/index.js or commands.ts

const resizeObserverLoopErrRe = /^[^(ResizeObserver loop limit exceeded)]/
Cypress.on('uncaught:exception', (err) => {
    /* returning false here prevents Cypress from failing the test */
    if (resizeObserverLoopErrRe.test(err.message)) {
        return false
    }
})

You can follow the discussion about it here. As Cypress maintainer themselves proposed this solution, so I believe it'd be safe to do so.

Solution 4

For Mocha users:

The snippet below overrides the window.onerror hook mocha installs and turns the errors into a warning. https://github.com/mochajs/mocha/blob/667e9a21c10649185e92b319006cea5eb8d61f31/browser-entry.js#L74

// ignore ResizeObserver loop limit exceeded
// this is ok in several scenarios according to 
// https://github.com/WICG/resize-observer/issues/38
before(() => {
  // called before any tests are run
  const e = window.onerror;
  window.onerror = function(err) {
    if(err === 'ResizeObserver loop limit exceeded') {
      console.warn('Ignored: ResizeObserver loop limit exceeded');
      return false;
    } else {
      return e(...arguments);
    }
  }
});

not sure there is a better way..

Solution 5

We had this same issue. We found that a chrome extension was the culprit. Specifically, the loom chrome extension was causing the error (or some interaction of our code with loom extension). When we disabled the extension, our app worked.

I would recommend disabling certain extensions/addons to see if one of them might be contributing to the error.

View more solutions

Comments

[Fred Kleuver]

Funny how even the docs say ResizeObserver has a mechanism to avoid infinite callback loops and cyclic dependencies. Did you update the dependency to element-resize-detector (dependency of aurelia-resize) recently? Seems that one had an update in January..

[Fred Kleuver]

As a workaround you could do window.ResizeObserver = undefined; at the start of your application to just disable the ResizeObserver. Not the best solution of course, but just reverts it back to what it was when it worked..

[gregwhitworth]

Can you provide a repro of your code, and yes ResizeObserver gives UAs an out (at an unspecified limit) to bail on a loop. The Edge Security Error is going to be completely different as we don't currently support ResizeObserver.

[Alexander Taran]

@IOIIOOIO please consider adding your own response reflecting your decision.

[Aleksandar Totic]

This error means that ResizeObserver was not able to deliver all observations within a single animation frame. It is benign (your site will not break).

[NSjonas]

it's a real PITA if you are trying to use onerror. To make matters worse, safari will prevent the message from showing up so you can't even filter it out

[Aleksandar Totic]

> what would be the mechanism for this error happening when the ResizeObserver is never used? This error will never happen if RO is not used. Where is the usage coming from? I see 2 options. A) An extension, or B) RO is used internally by Chrome in some tags (video). B) should not happen, and is a bug. If you have a reproducible case you can share, please file a bug on crbug.com.

[Aleksandar Totic]

@SergioPrado ^^

[Mark G]

Also see Error "ResizeObserver loop limit exceeded" Firing When Video Controls Exist.

[JohnnyFun]

We had this issue in coming from @microsoft/applicationinsights-web which does our client error logging. So we just ignore this error by setting up an error event handler prior to applicationInsights and call stopImmediatePropagation and preventDefault

[Saeed Seyfi]

is the condition needed? "!Array.isArray(entries) || !entries.length"

[Rani]

What do you mean?

[NSjonas]

@JohnnyFun any thoughts on how to do that on safari? No matter what I only get "script error." when this event happens

[ADJenks]

How did you know to do this...?

[Vaughan Hilts]

You may not want to do this. " you can limit the executions to a single frame" A more accurate explanation is that you're actually pushing the layout change onto the macrotask queue. This is unfortunately an important distinction, because RO normally would run inbetween layout and paint. This is important because it lets you make layout changes without "jank" or "flickering" You can find a great example of that here: github.com/petyosi/react-virtuoso/issues/269 That doesn't mean that you cannot use this solution -- but if you are using RO for sync updates, reconsider.

[Oliver Joseph Ash]

I'm not sure it's always sensible/safe to ignore this error. It can indicate a performance problem, for example: jsbin.com/cadafaduwu/1/edit?html,css,js,console,output. The resize observer callback triggers the element to resize again, thus creating a loop. When this happens, it's usually a mistake—you don't want to trigger another resize from a resize observer callback.

[Oliver Joseph Ash]

Also, there's a good description of why this error happens here: webkit.org/blog/9997/resizeobserver-in-webkit/…. (In Safari the error message is slightly different but the logic still applies.)

[Oliver Joseph Ash]

In case it helps anyone understand why they are seeing this error, I created a repository with a bunch of different reduced test cases where you might run into this error: github.com/OliverJAsh/resize-observer-loop-tests

[retrovertigo]

Related ticket, including the error message for Firefox and a little workaround: stackoverflow.com/a/64257593/472804

[Harry Cutts]

This worked for me, except that I had to return true in the if, to prevent the firing of the default event handler (see MDN).