cypress: Cypress 10.0.2 is bypassing resize observer loop error handler

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!

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;

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

This issue is still persist in cypress 13.6.1.

In our case the error is getting triggered by layout elements rendered in the frontend. I was confused about that because the error message “The following error originated from your test code, not from Cypress.” expresses that something is broken inside the test. For me it seems like that for some reason cypress is throughing errors as test errors even they are comming from the application.

We fixed this with a work around by overwriting the ResizeObserver callback with a debounce instance of it inside of onBeforeLoad property of the visit function options.

 onBeforeLoad(win: Cypress.AUTWindow) {
            const originalResizeObserver = win.ResizeObserver;

            const debouncedResizeObserver = (callback: () => void) => {
                const debouncedCallback = debounce(callback, 50);
                return new originalResizeObserver(debouncedCallback);
            };

            cy.stub(win, "ResizeObserver").callsFake(debouncedResizeObserver);
        }, 

We are totally aware that this is not the perfect solution, but hopefully it helps other folks to fully understand the issue.

@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

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 <unknown> (https://localhost:3001/__/#/specs/runner?file=tests/account_live/layout/header.spec.ts:0:0)]]></failure> </testcase> <testcase name="layout header standard viewport "after all" hook for "navigate by all items after menu open"" time="0.184" classname=""after all" hook for "navigate by all items after menu open""> <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.

I just set

  "viewportHeight": 667,
  "viewportWidth": 375

in this case, @nestor-aleks.