大约两个月前，我们开始使用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无关的错误?
当前回答
设法解决这个问题，在React为我们的错误记录器设置。
观察者错误传播到窗口。Onerror错误处理程序，因此通过存储原始窗口。Onerror，然后你可以用一个自定义方法替换它，该方法不会抛出这个特定的错误。其他错误被允许正常传播。
确保在useEffect清理中重新连接原来的onerror。
const defaultOnErrorFn = useRef(window.onerror);
useEffect(() => {
window.onerror = (...args) => {
if (args[0] === 'ResizeObserver loop limit exceeded') {
return true;
} else {
defaultOnErrorFn.current && defaultOnErrorFn.current(...args);
}
};
return () => {
window.onerror = defaultOnErrorFn.current;
};
}, []);
其他回答
在我的情况下，问题“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]);
如果您正在使用Cypress，遇到这个问题，您可以在support/index.js或commands.ts中使用以下代码安全地忽略它
const resizeObserverLoopErrRe = /^[^(ResizeObserver循环限制超过)]/ 柏树。On ('uncaught:exception'， (err) => { /*在这里返回false可以防止Cypress测试失败*/ if (resizeObserverLoopErrRe.test(err.message)) { 返回假 ｝ })
你可以在这里跟随关于它的讨论。 由于Cypress维护者自己提出了这个解决方案，所以我相信这样做是安全的。
赛普拉斯的一线解决方案。编辑文件support/commands.js:
Cypress.on(
'uncaught:exception',
(err) => !err.message.includes('ResizeObserver loop limit exceeded')
);
设法解决这个问题，在React为我们的错误记录器设置。
观察者错误传播到窗口。Onerror错误处理程序，因此通过存储原始窗口。Onerror，然后你可以用一个自定义方法替换它，该方法不会抛出这个特定的错误。其他错误被允许正常传播。
确保在useEffect清理中重新连接原来的onerror。
const defaultOnErrorFn = useRef(window.onerror);
useEffect(() => {
window.onerror = (...args) => {
if (args[0] === 'ResizeObserver loop limit exceeded') {
return true;
} else {
defaultOnErrorFn.current && defaultOnErrorFn.current(...args);
}
};
return () => {
window.onerror = defaultOnErrorFn.current;
};
}, []);
我们也有同样的问题。我们发现chrome扩展是罪魁祸首。具体来说，织机铬扩展是导致错误(或我们的代码与织机扩展的一些交互作用)。当我们禁用扩展，我们的应用程序工作。
我建议禁用某些扩展/插件，看看其中是否有一个可能导致错误。
