大约两个月前，我们开始使用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”错误。
我解决这个问题的方法是在页面的整个生命周期中设置一个观察者。
其他回答
这个错误可能值得调查一下。它可以指出代码中可以修复的问题。
在我们的例子中，观察到的一个元素的大小调整引发了页面上的变化，这又导致了第一个元素的大小调整，这又触发了页面上的变化，这又导致了第一个元素的大小调整，……你知道这是如何结束的。
从本质上讲，我们创建了一个无法装入单个动画帧的无限循环。我们通过使用setTimeout()在页面上保持更改来打破它(尽管这并不完美，因为它可能会对用户造成一些闪烁)。
因此，每当ResizeObserver循环限制超出我们的哨兵，我们把它视为一个有用的提示，并试图找到问题的原因。
在我的情况下，问题“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]);
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”错误。
我解决这个问题的方法是在页面的整个生命周期中设置一个观察者。
摩卡用户:
下面的代码片段将覆盖该窗口。Onerror钩子mocha安装并将错误转换为警告。 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);
}
}
});
不知道有没有更好的办法。
添加debounce
new ResizeObserver（_.debounce（entries => {}， 200）;
为我修正了这个错误
