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循环限制）
Edge：14.14393（SecurityError）
Edge：15.15063（SecurityError）

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

Answer 1

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

其中一位规范作者在对你的问题的评论中写道，但这不是一个答案，并且在评论中不清楚答案是这个帖子中最重要的答案，而且让我感到舒服在我们的Sentry日志中忽略它。

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

规范库中还有一些related issues。

Answer 2

如果您使用的是赛普拉斯（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
    }
})

您可以关注有关here的讨论。赛普拉斯的维护人员自己提出了该解决方案，因此我相信这样做是安全的。

Answer 3

这是一个古老的问题，但对某些人可能仍然有帮助。您可以通过将回调包装在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 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

添加防抖动像

new ResizeObserver（_。debounce（entries => {}，200）;

为我修复了此错误

Answer 6

我们遇到了同样的问题。我们发现罪魁祸首是镀铬。特别是，织机chrome扩展名引起了错误（或代码与织机扩展名的某些交互）。当我们禁用扩展程序时，我们的应用程序正常工作。

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

Answer 7

https://github1s.com/chromium/chromium/blob/master/third_party/blink/renderer/core/resize_observer/resize_observer_controller.cc#L44-L45 https://github1s.com/chromium/chromium/blob/master/third_party/blink/renderer/core/frame/local_frame_view.cc#L2211-L2212

查看源代码后，在我的情况下，当调用 NotifyResizeObservers 函数时问题浮出水面，并且没有注册的观察者。

如果没有观察者，GatherObservations 函数将返回 4096 的 min_depth，在这种情况下，我们将收到“超出 ResizeObserver 循环限制”错误。

我解决它的方法是让观察者生活在页面的整个生命周期中。

ResizeObserver - 超出了循环限制

7 个答案: