Cypress 10.0.2 is bypassing resize observer loop error handler

[mlberkow]

Current behavior

This error is showing up on tests that are set to ignore the error.

The following error originated from your test code, not from Cypress.
  > ResizeObserver loop limit exceeded
When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.
Because this error occurred during a after all hook we are skipping all of the remaining tests.
Although you have test retries enabled, we do not retry tests when before all or after all hooks fail

This was working correctly prior to the Cypress 10 upgrade.

Desired behavior

Optimally the error would just be ignored

Test code to reproduce

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

Cypress Version

10.0.2

Other

No response

[lmiller1990]

Hi! Thanks for the bug report. Can you provide your OS/Browser? Does it happen in all of them?

If you could provide a minimal repository, that would be really helpful in debugging.

If it helps, we also have a similar snippet for some of our component tests: https://github.com/cypress-io/cypress/blob/a8ed29ecbbf7ca29466dc48dd0d91903e1851e5e/packages/app/cypress/component/support/index.ts#L52

I wonder if some white space changed, that's messing with the regular expression you are using :thinking:

[mlberkow]

So far, I've only tested it with Electron. I'll give it a shot with the other browsers tomorrow.

It is relatively inconsistent, in that it seems to only happen every few test runs. It happens on the same test when it does happen, but it isn't every run.

[AtofStryker]

@mlberkow is the error always originating from the test code in your case? What happens if you try the fail handler in stead of the uncaught:exception, out of curiosity? Similar to https://github.com/cypress-io/cypress/issues/22129#issuecomment-1150340007?

[mjhenkes]

@mlberkow any update to @AtofStryker's question?

[mlberkow]

@AtofStryker it didn't make any difference, the test still fails pretty often. This problem is most definitely new with 10.x

[AtofStryker]

@AtofStryker it didn't make any difference, the test still fails pretty often. This problem is most definitely new with 10.x

@mlberkow I'm having some trouble reproducing it. Is there any way you could provide a test case / reproduction to showcase the error to determine a potential root cause?

[mjhenkes]

Right now there doesn't seem to be enough information to reproduce the problem on our end. We'll have to close this issue until we can reproduce it. This does not mean that your issue is not happening - it just means that we do not have a path to move forward.

Please open a new issue with a reproducible example and link to this issue. Here are some tips for providing a Short, Self Contained, Correct, Example and our own Troubleshooting Cypress guide.

[nielsuit227]

Experiencing the same. It's hard to make a correct reproducible example with an obscure error such as this. If only I knew where the problem was coming from... Meanwhile we're stuck and reverting to Cypress 9.

[AtofStryker]

Experiencing the same. It's hard to make a correct reproducible example with an obscure error such as this. If only I knew where the problem was coming from... Meanwhile we're stuck and reverting to Cypress 9.

@nielsuit227 Any idea if the error is being thrown from the application or the test code?

[nielsuit227]

@AtofStryker Cypress throws the error, but indicates it came from the application code. We have experienced this error from the application code, so that could very well be.

[AtofStryker]

@nielsuit227 have you tried the work around @lmiller1990 proposed https://github.com/cypress-io/cypress/issues/22113#issuecomment-1146948262? If the error is occurring in a cy.origin block you will also need to declare the handler there.

[ottopaulsen]

Did anyone find a solution to this problem? I am seeing the same when running a loop testing hundreds of pages in an MPA. The error comes after running many pages using cypress run. If I run all 371 pages using cypress open, it does not fail. It fails both using chrome and electron, but not the exact same pages. The pages are similar (but with some differences).

I do not understand how you can close the issue if it has not been fixed.

[ottopaulsen]

I solved this by increasing the viewport size for cypress.

[nestor-aleks]

@ottopaulsen can you share your dimension, please? For me, it's still failing with viewports

  viewportWidth: 1536,
  viewportHeight: 960,

macbook-16 from https://docs.cypress.io/api/commands/viewport#Arguments

[ottopaulsen]

I just set

  "viewportHeight": 667,
  "viewportWidth": 375

in this case, @nestor-aleks.

[Fewwy]

Got the same error when I was writing a test that included an interception of the network request made by graphql. Viewport changes didn't help

[lmiller1990]

@Fewwy what version of Cypress are you on? Can you share a little more information (End to End or Component Testing, version of libraries, etc)? Did you try Firefox? A minimal reproduction would be great, although maybe tough.

[tedscape]

@lmiller1990 , The issue occurs for me as well. We are on cypress 12.7.0. I get this resize observer mode when running headless. When I run in the interactive mode, it passes on chrome, electron and firefox. We do e2e with mocked API's. This has been happening after upgrading to cypress 12. We were on 9 before. Unfortunately, I cannot share the code.

[joeprivettsmart]

We are experiencing the same issue. Using v10.11.0. Tests fail based on cy:command ✘ uncaught exception Error: ResizeObserver loop limit exceeded showing up in the test run, using headless browser in Electron 106, Node v 16.13.0. When using --headed flag in the command line, the same test does show this exception and, therefore, does not fail.

Adding Cypress.on('uncaught:exception', err => !err.message.includes('ResizeObserver')) to e2e.ts does not capture the exceptions.

We're not using cy.origin in any of our tests.

An example of the test that throws this exception is:

const headerTests = (isMobile = false) => {
  beforeEach(() => {
    isMobile && cy.viewport('iphone-x')
    cy.ensureSessionAndVisitUrl('account_live', '/', 'AUTH_EMAIL_LIVE')
  })

  specify('navigate by all items after menu open', () => {
    cy.wrap(HAMBURGER_MENU_NAVIGATION_LINKS).each(({ link, path }: TNavLink) => {
      cy.visit(paths.dashboard.board)
      cy.findByText('Menu').click()
      cy.findByText('Signed in as')
      cy.findByText('Mr Alex Smith')
      cy.waitForTextAndClick(link, 0, path)
      cy.findByText('Signed in as').should('not.exist')
      cy.findByText('Mr Alex Smith').should('not.exist')
      cy.url().should('include', path)
    })
  })
})

The message we see in the terminal is:

Although you have test retries enabled, we do not retry tests when before all or after all hooks fail at (https://localhost:3001/__/#/specs/runner?file=tests/account_live/layout/header.spec.ts:0:0)]]> <failure message="The following error originated from your test code, not from Cypress.

> ResizeObserver loop limit exceeded

When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.

Because this error occurred during a after all hook we are skipping all of the remaining tests.

Happy to arrange a video call to go through the code in more detail if it helps Cypress team debug this.

[lazovskih]

Hello. Just to support the investigation. We have the same issue (!!!) only when run headless on chrome browser.

Here is some info:

cypress version Cypress package version: 12.5.1 Cypress binary version: 12.5.1 Electron version: 21.0.0 Bundled Node version: 16.16.0 cypress info

Displaying Cypress info...

Chrome

• Name: chrome
• Channel: stable
• Version: 112.0.5615.121
• Executable: google-chrome
• Profile: /home/{user}/.config/Cypress/cy/production/browsers/chrome-stable

---

In e2e.js we have the following:

import './commands';
Cypress.setMaxListeners(40);
Cypress.on('uncaught:exception', (err, runnable) => {
  console.log(`----------- 1 uncaught:exception: ${err}`);
  const resizeObserverLoopLimitExcedError = 'ResizeObserver loop limit exceeded';
  const resizeObserverLoopNotificationError =
    'ResizeObserver loop completed with undelivered notifications';
  if (
    err.message.includes(resizeObserverLoopLimitExcedError) ||
    err.message.includes(resizeObserverLoopNotificationError)
  )  return false;
});

Looks like this code do not execute, as the handler does not catch the error and we do not get logs in the console.

I attempted to put the same code in test file (*.spec.js) and I attempted to use it in the page open function (where we have cy.visit()). Nether worked.

I got this in console: Error: The following error originated from your test code, not from Cypress.

ResizeObserver loop limit exceeded When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.

The only workaround solution is to open page by click on menu item with the link to the same page. This makes tests pass even 'ResizeObserver loop limit exceeded' still observed, but ignored.

Please note, in both cases it is ignored when run in browser mode (cypress open).

Please let me know if you need more info. Thanks!

[zuzusik]

We are experiencing ResizeObserver loop limit exceeded error when running component tests in headless mode with official Cypress Docker image.

When running headless with electron outside of Docker this error is not present. Running in headed mode doesn't produce error either.

Cypress version: 12.3.0 Docker image: cypress/included:12.3.0

[mschile]

Thanks for the updates everyone. Would anyone be able to provide a reproduction repository by forking cypress-test-tiny or by any other means?

Would anyone be able to provide the DEBUG logs?

[lmiller1990]

@mschile I think this happens in our code base. You could remove https://github.com/cypress-io/cypress/blob/8f75b139a4f38419aa8be93b1f87839c0d6c3d8a/packages/frontend-shared/cypress/support/component.ts#L85 and run the packages/app suite (not sure if it's E2E or CT).

A more minimal example can be found here: https://github.com/cypress-io/cypress/pull/20284/files#diff-e6a4beb1ac08611a3166f9a15c30b0ec5a55ff8388367654b6067908246f8b92

[mschile]

@lmiller1990, this issue is for scenarios where the uncaught:exception handler is not firing. Unfortunately, we don't have a reproduction for that scenario yet.

[Fabo95]

The output of DEBUG=cypress: seems to be very long, so which part is helpful for debugging?

[mschile]

The output of DEBUG=cypress: seems to be very long, so which part is helpful for debugging?

@Fabo95, I'm not sure right now. I was hoping something around when the error occurred might be helpful. Ultimately, we'll probably need a reproduction so we can investigate.

[chrisbreiding]

Right now there doesn't seem to be enough information to reproduce the problem on our end. Unless we receive a reliable reproduction, we'll eventually have to close this issue until we can reproduce it. This does not mean that this issue is not happening - it just means that we do not have a path to move forward.

[jogelin]

We also had that issue with Monaco Editor because it is using ResizeObserver internally.

To fix it, we patched the original API by doing:

class CalmResizeObserver extends ResizeObserver {
  constructor(callback: ResizeObserverCallback) {
    super((entries, observer) => {
      requestAnimationFrame(() => {
        callback(entries, observer);
      });
    });
  }
}

win.ResizeObserver = CalmResizeObserver;

[chrisbreiding]

I'm going close this since there still isn't a reproduction we can use to debug it. Please comment with a minimal reproduction and we can re-open this.

[Fabo95]

Until now i can not reproduce it and we can not share the original project where the error happens.

So i dived into the cypress project code and saw that the "top.addEventListener('error', onTopError('error'))" inside of onTopError handler function is responsibile for the ResizeObserver error from spec files. This handler is only triggered in headless mode. So i tried to compare version 12.13 with version 9.7 but could not find any differences realted to this behaviour. Therefore i want to ask you if there are major changes realted to this behaviour? Or could it be browser related because (in my case) the error occurs not in firefox.