大约两个月前,我们开始使用Rollbar来通知我们Web应用程序中的各种错误。从那以后,我们偶尔会遇到一些错误:

超出ResizeObserver循环限制

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

奥蕾莉亚调整大小

但它似乎也没有使用ResizeObserver。

同样令人困惑的是,这些错误消息从1月份就开始出现,但ResizeObserver支持最近才添加到Chrome 65。

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

Chrome: 63.0.3239 (ResizeObserver循环限制超过) Chrome: 64.0.3282 (ResizeObserver循环限制超过) Edge: 14.14393 (SecurityError) Edge: 15.15063 (SecurityError)

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


当前回答

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函数将返回min_depth为4096,在没有观察者的情况下,在这种情况下,我们将得到“ResizeObserver循环limit exceeded”错误。

我解决这个问题的方法是在页面的整个生命周期中设置一个观察者。

其他回答

我们也有同样的问题。我们发现chrome扩展是罪魁祸首。具体来说,织机铬扩展是导致错误(或我们的代码与织机扩展的一些交互作用)。当我们禁用扩展,我们的应用程序工作。

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

如果您正在使用Cypress,遇到这个问题,您可以在support/index.js或commands.ts中使用以下代码安全地忽略它

const resizeObserverLoopErrRe = /^[^(ResizeObserver循环限制超过)]/ 柏树。On ('uncaught:exception', (err) => { /*在这里返回false可以防止Cypress测试失败*/ if (resizeObserverLoopErrRe.test(err.message)) { 返回假 } })

你可以在这里跟随关于它的讨论。 由于Cypress维护者自己提出了这个解决方案,所以我相信这样做是安全的。

在我的情况下,问题“ResizeObserver -循环限制超出”是由于窗口触发的。addEventListener("resize"和React的React. usestate . addEventListener。

详细地说,我正在处理名为useWindowResize的钩子,用例是这样的const [windowWidth, windowHeight] = useWindowResize();

代码通过useEffect对windowWidth/windowHeight的变化做出反应。

React.useEffect(() => {
    ViewportService.dynamicDimensionControlledBy(
        "height",
        { windowWidth, windowHeight },
        widgetModalRef.current,
        { bottom: chartTitleHeight },
        false,
        ({ h }) => setWidgetHeight(h),
    );
}, [windowWidth, windowHeight, widgetModalRef, chartTitleHeight]);

所以任何浏览器窗口大小的调整都会导致这个问题。

我发现由于连接旧javascript世界(DOM操作,浏览器的事件)和新javascript世界(React)引起的许多类似问题可以通过setTimeout解决,但我将避免它,并在可能的情况下将其称为反模式。

因此,我的解决方案是将setter方法包装到setTimeout函数中。

React.useEffect(() => {
    ViewportService.dynamicDimensionControlledBy(
        "height",
        { windowWidth, windowHeight },
        widgetModalRef.current,
        { bottom: chartTitleHeight },
        false,
        ({ h }) => setTimeout(() => setWidgetHeight(h), 0),
    );
}, [windowWidth, windowHeight, widgetModalRef, chartTitleHeight]);

添加debounce

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

为我修正了这个错误

赛普拉斯的一线解决方案。编辑文件support/commands.js:

Cypress.on(
  'uncaught:exception',
  (err) => !err.message.includes('ResizeObserver loop limit exceeded')
);