您可以安全地忽略这个错误。

一个规范的作者在评论中对你的问题写了一个评论，但它不是一个答案，在评论中不清楚答案是否真的是这个线程中最重要的一个，并且是一个让我在我们的哨兵日志中很舒服地忽略它的答案。

This错误意味着ResizeObserver不能在一个动画帧中传递所有的观察结果。它是良性的(您的站点不会崩溃)。——Aleksandar Totic 4月15日3:14

在规范存储库中也存在一些与此相关的问题。

这是一个老问题，但它仍然可能对某些人有帮助。你可以通过在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
   });
});

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

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

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

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

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

添加debounce

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

为我修正了这个错误

摩卡用户:

下面的代码片段将覆盖该窗口。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);
    }
  }
});

不知道有没有更好的办法。

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”错误。

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

在我的情况下，问题“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]);

这个错误可能值得调查一下。它可以指出代码中可以修复的问题。

在我们的例子中，观察到的一个元素的大小调整引发了页面上的变化，这又导致了第一个元素的大小调整，这又触发了页面上的变化，这又导致了第一个元素的大小调整，……你知道这是如何结束的。

从本质上讲，我们创建了一个无法装入单个动画帧的无限循环。我们通过使用setTimeout()在页面上保持更改来打破它(尽管这并不完美，因为它可能会对用户造成一些闪烁)。

因此，每当ResizeObserver循环限制超出我们的哨兵，我们把它视为一个有用的提示，并试图找到问题的原因。

赛普拉斯的一线解决方案。编辑文件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;
  };
}, []);

我遇到了柏树测试无法运行的问题。 我发现，正确的方法不是处理异常，而是编辑tsconfig。Json，目标是新的es6版本，如下所示:

｛ “扩展”:“. . / tsconfig.json”, " compilerOptions ": { “baseUrl”:“. . / node_modules”, "target": "es5"，——> old "target": "es6"，——> new "types": ["cypress"， "@testing-library/cypress"]， “sourceMap”:真的 }， “包括”:( “* * / * .ts” ］ ｝