ResizeObserver - 超出了循环限制

Question

大约两个月前,我们开始使用Rollbar通知我们Web应用程序中的各种错误.从那时起,我们偶尔会遇到错误:

ResizeObserver loop limit exceeded

令我困惑的是我们没有使用ResizeObserver,我调查了唯一一个我认为可能是罪魁祸首的插件,即:

Aurelia Resize

但它似乎也没有使用ResizeObserver.

令人困惑的是,这些错误消息自1月以来一直在发生,但ResizeObserver最近才向Chrome 65添加了支持.

给我们这个错误的浏览器版本是:

• Chrome:63.0.3239(超出ResizeObserver循环限制)
• Chrome:64.0.3282(超出ResizeObserver循环限制)
• 边缘:14.14393(SecurityError)
• 边缘:15.15063(SecurityError)

所以我想知道这是否可能是一个浏览器错误？或者可能是一个与实际无关的错误ResizeObserver？

Answer 1

您可以放心地忽略此错误.

其中一位规范作者在对你的问题的评论中写道,但它不是一个答案,并且在评论中不清楚答案是这个帖子中最重要的答案,而且让我很乐意忽略它我们的哨兵记录.

此错误表示ResizeObserver无法在单个动画帧中传递所有观察结果.这是良性的(您的网站不会破坏).- Aleksandar Totic 4月15日3:14

规范库中也存在一些相关问题.

Answer 2

这是一个老问题，但它仍然可能对某人有帮助。您可以通过将回调包装在requestAnimationFrame. 例如：

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

Answer 3

如果您正在使用 Cypress 并且遇到此问题，您可以在 Cypress 中使用 support/index.js 或 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
    }
})

您可以在此处关注有关它的讨论。由于赛普拉斯维护者自己提出了这个解决方案，所以我相信这样做是安全的。

Answer 4

对于摩卡用户：

下面的代码片段覆盖了 mocha 安装的 window.onerror 挂钩，并将错误转换为警告。 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);
    }
  }
});

不确定是否有更好的方法..

Answer 5

该错误可能值得调查。它可以表明代码中存在可以修复的问题。

\n

在我们的例子中，观察到的元素大小调整触发了页面上的更改，这导致了第一个元素再次调整大小，这再次触发了页面上的更改，这再次导致了第一个元素 \xe2\x80\ 的大小调整xa6 你知道这一切如何结束。

\n

本质上，我们创建了一个无限循环，显然无法适合单个动画帧。我们通过使用保留页面上的更改来打破它setTimeout()（尽管这并不完美，因为它可能会导致用户出现一些闪烁）。

\n

因此，现在每次ResizeObserver loop limit exceeded出现在我们的哨兵中，我们都会将其视为有用的提示，并尝试找出问题的原因。

\n

Answer 6

我们有同样的问题。我们发现 chrome 扩展是罪魁祸首。具体来说，Loom chrome 扩展导致了错误（或者我们的代码与 Loom 扩展的一些交互）。当我们禁用扩展程序时，我们的应用程序工作。

我建议禁用某些扩展/插件以查看其中一个是否可能导致错误。

Answer 7

添加去抖就像

新的 ResizeObserver(_.debounce(entries => {}, 200);

为我修正了这个错误