quasar: ResizeObserver loop limit exceeded

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

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

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

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

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.

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

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

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

Working one-liner:

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

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

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

Still having the issue in Cypress 9.1.1

I’m seeing this occur in Cypress v8.7.0

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

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…

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.

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: https://github.com/w3c/csswg-drafts/issues/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.

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

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