ResizeObserver loop limit exceeded

[abeltodev]

Hi,

Since the app is in production, I see a lot of ResizeObserver loop limit exceeded errors in Sentry breaking my plan capacity. But I can't reproduce it.

I'm not using the QResizeObservable component.

Here I see the discussion saying we can ignore it: https://stackoverflow.com/questions/49384120/resizeobserver-loop-limit-exceeded

Is there a dependency doing that? Can we catch this error in order to don't log it?

Thanks for your work 💯

Software version

Operating System Centos
NodeJs 9.8.0

Global packages
NPM 5.6.0
yarn 1.5.1
quasar-cli 0.15.14
vue-cli 2.9.3
cordova Not available

Important local packages
quasar-cli 0.15.14
quasar-framework 0.15.10
quasar-extras 1.0.2
vue 2.5.16
vue-router 3.0.1
vuex 3.0.1
electron Not available
babel-core 6.26.0
webpack 3.11.0
webpack-dev-server 2.11.1

What did you get as the error?

ResizeObserver loop limit exceeded

What were you expecting?

No errors.

What steps did you take, to get the error?

I've seen the error in the errors log.

[jean-moldovan]

Getting the same in my e2e tests (Cypress). Needs investigation.

[Tyrix]

I'm getting the same error using chrome v68.0.3440.106 64-Bit and cypress.

I have found a workaround for cypress, so that it ignores unhandled exceptions. Just add the following to your support/index.js:

Cypress.on('uncaught:exception', (err, runnable) => {
  // returning false here prevents Cypress from
  // failing the test
  return false
})

More info:
WICG/ResizeObserver Issues

[rstoenescu]

@Tyrix Thank you for solution.

[muodov]

Can we reopen this? It is still an issue. For me it happens every time I load my app in Chrome mobile (or in Chrome Desktop with mobile emulation enabled). The suggested workaround is only a remedy for a specific case (cypress). However, this happens in production a lot and can quickly bloat monitoring/analytics tools such as Sentry.
@rstoenescu

[nibon]

Still treating the symptoms instead of the cause but this option ignore reporting the error to sentry.

Sentry.init({
  ...
  ignoreErrors: ['ResizeObserver loop limit exceeded']
})

[leosdad]

Just began happening to me. Using Quasar 1.0.0 beta and Vue.js 2.6.10.

[jennifer-shehane]

The other issues do seem to indicate that this can be safely ignored, although I would rather the error not be thrown if that is the case.

@Tyrix I would update the listener code in Cypress to more specifically only ignore the ResizeObserver error with the code below:

const resizeObserverLoopErrRe = /^ResizeObserver loop limit exceeded/

Cypress.on('uncaught:exception', (err) => {
  if (resizeObserverLoopErrRe.test(err.message)) {
    // returning false here prevents Cypress from
    // failing the test
    return false
  }
})

[nothingismagick]

Hi @jennifer-shehane - thanks for stopping by. I agree that there needs to be some deeper investigation here, and if we can track it down I have no problem reporting it to the chromium team and seeing if we can fix it upstream. @leosdad - can you post your $ quasar info and be more explicit about the situation where this is happening (browser incl. version, sfc vue file that triggers it, stacktrace). It would also be helpful for me to see a video screencap with dev-tools open.

[nothingismagick]

Gunna have to roll back my last comment - this is expected behaviour in Chromium, so it will never be changed.

I just updated our baseline Cypress support file in the Quasar 1.0 app extension in the way that @jennifer-shehane suggested:

@quasar/testing-e2e-cypress

It is now available in @quasar/quasar-app-extension-testing-e2e-cypress@1.0.0-beta.8

To install (in Quasar v1 only):

$ quasar ext add @quasar/testing

And choose e2e-cypress.

[leosdad]

Hi @nothingismagick, thanks for your quick answer. I'm fairly new to Vue/Quasar, I'm doing a very simple SPA POC with CDN. No NPM, no CLI, no Cypress, nothing. Just direct calls to Vue and Quasar. I'm using using 64-bit Chrome 74.0.3729.131 (pt-br).

As for reproducing the problem itself, it happens in the Quasar web site itself. Hope that helps.

FIW, I've also posted a support request to the JavaScript Errors Notifier extension, I hope they answer me.

[nothingismagick]

Can you paste the error here? I am also on chrome on Mac and I don't see it anywhere on that page.

[leosdad]

Here:

And my Windows version is:

[leosdad]

Can you paste the error here? I am also on chrome on Mac and I don't see it anywhere on that page.

Hi, I hope you could reproduce the problem. Any news on it?

[emahuni]

This is still happening, can we reopen this please. I am not using resizeObserver nor is it running cypress at the moment this happens. This is not being caught on regular console, it's being caught on chrome extension like @leosdad indicated. I believe it is also crashing Chrome. Somehow Chrome eventually runs out of memory, Chrome complained and said "paused to prevent memory crash", right after that error and it indicated something to do with this; can't reproduce this, guess it happens with long time of use. I had to restart my machine to get things working again; MacBook i7 8GB RAM. I think this is a big issue that's breaking Quasar from deep inside.

[emahuni]

Here is a screenshot of everywhere it is found.

[leosdad]

Seems to have been fixed somehow. Does anyone know for sure?

[emahuni]

yes i can confirm that it is no longer happening, will update if there is anything.

[emahuni]

OH NOOO! IT IS STILL HAPPENING, I JUST SAW IT.

[emahuni]

I have the latest Quasar as of writting

[JamieMcDonnell]

I'm getting it too - seems to happen in Chrome with devTools open but not in mobile mode when I resize the console. It is not consistent or replicable though, but seems to happen regularly. Shouldn't this ticket be reopened if it is still happening?

[sn0rcha]

Can confirm still happening to me as well on Chrome.

[demisx]

Still happening in Chrome 79. Using @jennifer-shehane workaround for now.

[emahuni]

@demisx , problem is, this is not happening in Cypress only. It is happening during app runtime. Just put the abovementioned extension in Chrome and run your app and see.

[louisameline]

IMHO, the Quasar team might have been too quick to close this issue without explanation.
As stated by Tyrix above, the root of this behaviour is explained in https://github.com/WICG/ResizeObserver/issues/
But in the previous comments of this thread here, I saw no one saying that he/she looked at the code in Quasar and say it wasn't possible to write a patch that would keep this error from happening.
Since Chromium's behavior isn't going to change anytime soon (because the spec would need to be edited first), I think it's not the best decision to say "People, just ignore the error": hopefully Quasar could prevent that for us and save us the nuisance and the time it takes to come here, read, write code to ignore the error...

[54mu3l]

Why is this issue closed?
I still get this error with window.onerror = function(message, source, lineno, colno, error).

Is there a solution?

__
Chrome: 83.0.4103.116
Edge: 83.0.478.58

quasar - 1.9.12
@quasar/app - 1.9.1
@quasar/extras - 1.6.0
vue - 2.6.11
vue-router - 3.2.0
vuex - 3.4.0
electron - Not installed
electron-packager - Not installed
electron-builder - Not installed
@capacitor/core - Not installed
@capacitor/cli - Not installed
@capacitor/android - Not installed
@capacitor/ios - Not installed
@babel/core - 7.10.1
webpack - 4.43.0
webpack-dev-server - 3.11.0
workbox-webpack-plugin - 4.3.1
register-service-worker - 1.7.1
typescript - 3.8.3

[dvdvdmt]

The error started to appear again after upgrading from Cypress 3.8.3 to 4.10.0 and the solution stopped working.
It seems that error.message now contains all the text that Cypress outputs in the console, but not the original error text.
So I modified the solution to handle that, and the error disappeared:

Cypress.on('uncaught:exception', (err) => {
  if (err.message.includes('ResizeObserver')) {
    // returning false here prevents Cypress from
    // failing the test
    return false;
  }
  return true;
});

[54mu3l]

The error started to appear again after upgrading from Cypress 3.8.3 to 4.10.0 and the solution stopped working.
It seems that error.message now contains all the text that Cypress outputs in the console, but not the original error text.
So I modified the solution to handle that, and the error disappeared:

Cypress.on('uncaught:exception', (err) => {
  if (err.message.includes('ResizeObserver')) {
    // returning false here prevents Cypress from
    // failing the test
    return false;
  }
  return true;
});

We're not using Cypress at all. We're just using plain quasar and we handle window.onerror events ourself. So this "Solution" isn't worth anything.

[khateeb321]

The other issues do seem to indicate that this can be safely ignored, although I would rather the error not be thrown if that is the case.

@Tyrix I would update the listener code in Cypress to more specifically only ignore the ResizeObserver error with the code below:

const resizeObserverLoopErrRe = /^ResizeObserver loop limit exceeded/

Cypress.on('uncaught:exception', (err) => {
  if (resizeObserverLoopErrRe.test(err.message)) {
    // returning false here prevents Cypress from
    // failing the test
    return false
  }
})

Thanks for the answer. you need to change your RegEx to following because of the change in error messages in Cypress
const resizeObserverLoopErrRe = /^[^(ResizeObserver loop limit exceeded)]/

So this would be the working solution

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

[marcorivm]

This has been happening a lot more recently, many projects that were doing just fine on sentry base plan, went over their limit like crazy this last month

[hilts-vaughan]

The core of this issue is that notifications from self-resizing callbacks are dropped. This is actually desirable in some cases. We need a way to tell the API that sometimes, i.e: "Yes, I promise the layout will settle after this so go ahead and drop that notification without complaining"

I try and articulate the issue here: w3c/csswg-drafts#6173

If anyone here feels strongly about this, please contact me as I'd like to get together a proposal for the working group to solve this once and for all.

[AlexBalakersky]

The error started to appear again after upgrading from Cypress 3.8.3 to 4.10.0 and the solution stopped working.
It seems that error.message now contains all the text that Cypress outputs in the console, but not the original error text.
So I modified the solution to handle that, and the error disappeared:

Cypress.on('uncaught:exception', (err) => {
  if (err.message.includes('ResizeObserver')) {
    // returning false here prevents Cypress from
    // failing the test
    return false;
  }
  return true;
});

thanks. that's good enough for me

[Atrus619]

definitely still happening to me, 8.3.0

[CoreyGahafer]

I'm seeing this occur in Cypress v8.7.0

[ajobi]

Still having the issue in Cypress 9.1.1

[grigoreme]

The other issues do seem to indicate that this can be safely ignored, although I would rather the error not be thrown if that is the case.
@Tyrix I would update the listener code in Cypress to more specifically only ignore the ResizeObserver error with the code below:

const resizeObserverLoopErrRe = /^ResizeObserver loop limit exceeded/

Cypress.on('uncaught:exception', (err) => {
  if (resizeObserverLoopErrRe.test(err.message)) {
    // returning false here prevents Cypress from
    // failing the test
    return false
  }
})

Thanks for the answer. you need to change your RegEx to following because of the change in error messages in Cypress const resizeObserverLoopErrRe = /^[^(ResizeObserver loop limit exceeded)]/

So this would be the working solution

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

Your solution will match each time the error message contains any letter that was not defined in the string 'ResizeObserver loop limit exceeded'
Example: resizeObserverLoopErrRe.test('i') will return true because I is contained inside the regex [].

Also, you should return true in any other cases.

So I strongly suggest everybody to use the solution by @dvdvdmt instead.
#2233 (comment)

[ddnexus]

Working one-liner:

Cypress.on("uncaught:exception", err => !err.message.includes("ResizeObserver"));

[harichandra599]

Hi Team! i able to solve this error by giving your code in cypress/support/index.js, but after giving this code, the next code was not executed

[shaninizan]

UPDATE: with Cypress 10, the file has moved to cypress/support/e2e.js

This thread has been very helpful!

[ddnexus]

The latest issue tracking this problem is: cypress-io/cypress#20341

[seyfer]

this is how to fix it in your code actually if it does not come from a dependency

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

resizeObserver.observe(domNode);

[Tofandel]

This issue is still there and I can reproduce 100% of the time

There is an infinite loop in the QResizeObserver (it's used by the QLayout, QTabs, QToolbar and a lot of other components)

I think it happens when you put a QImg inside a QToolbar, I'll investigate more and report the findings

[SashoStzPakAz]

EDIT: I managed to fix this by reverting the webpack-dev-server to version 4.11.1

The issue still appears Quasar version 2.11.10.
It started after I ran npm update
Can you please let us know how to ignore the error step by step?

[Elrinth]

I have this problem with the q-header, whenever I put too much in it for mobile view and set flex-wrap: wrap; then when resizing the window, ResizeObserver loop limit exceeded. Super annoying.

edit: My solution is not using q-header but a div with a class "header" instead and just adding pretty much same CSS to is which q-header has and I also solved some spacing for the drawer:
@media only screen and (min-width: 1024px) {
.header {
position: fixed;
top:0;
left:0;
right:0;
z-index: 2000;
box-shadow: 0px 1px 5px rgba(0,0,0,0.3);
}
.q-page-container {
margin-top:50px;
}
}

now I can resize the layout without ResizeObserver crashing.

[DresAaron]

I have this problem with the q-header, whenever I put too much in it for mobile view and set flex-wrap: wrap; then when resizing the window, ResizeObserver loop limit exceeded. Super annoying.

edit: My solution is not using q-header but a div with a class "header" instead and just adding pretty much same CSS to is which q-header has and I also solved some spacing for the drawer: @media only screen and (min-width: 1024px) { .header { position: fixed; top:0; left:0; right:0; z-index: 2000; box-shadow: 0px 1px 5px rgba(0,0,0,0.3); } .q-page-container { margin-top:50px; } }

now I can resize the layout without ResizeObserver crashing.

I also encountered this issue with the latest version of Quasar. By using div instead, the error is gone. I guess the 0 debounce is the reason:

quasar/ui/src/components/header/QHeader.js

Lines 169 to 172 in 739ab9c

	h(QResizeObserver, {
	debounce: 0,
	onResize
	})

Is anybody still taking care of this issue?