如何阻止React开发环境显示ResizeObserver循环超限错误的Overlay

你的代码能捕获到错误但无法阻止React错误Overlay，是因为React的错误处理机制会在事件捕获/冒泡的不同阶段拦截错误，且该错误可能在React组件树的渲染流程中抛出，单纯的window.error监听无法完全阻止错误Overlay触发。以下是几种可行的解决方案：

方案1：优化ResizeObserver回调逻辑（推荐） #

这个错误本质是ResizeObserver的回调在布局阶段同步执行，触发了循环限制。用requestAnimationFrame将回调逻辑推迟到下一帧执行，从根源避免错误产生：

const observer = new ResizeObserver((entries) => {
  requestAnimationFrame(() => {
    entries.forEach(entry => {
      // 你的尺寸处理逻辑
      console.log('元素尺寸变化:', entry.contentRect);
    });
  });
});

// 监听目标元素
observer.observe(document.getElementById('target-element'));

方案2：使用捕获模式的window错误监听 #

给window.addEventListener添加第三个参数true，在事件捕获阶段就拦截错误，阻止React后续的错误处理逻辑触发：

window.addEventListener('error', (event) => {
  if (event.message?.includes('ResizeObserver loop limit exceeded')) {
    event.stopImmediatePropagation();
    event.preventDefault();
  }
}, true); // 开启捕获模式

方案3：用React错误边界过滤错误 #

在应用顶层添加错误边界组件，专门拦截并忽略这个良性错误：

import React from 'react';

class ResizeErrorBoundary extends React.Component {
  componentDidCatch(error: Error) {
    // 仅过滤目标错误，其他错误正常上报
    if (!error.message.includes('ResizeObserver loop limit exceeded')) {
      console.error('应用错误:', error);
    }
  }

  render() {
    return this.props.children;
  }
}

// 在index.tsx中包裹整个应用
ReactDOM.render(
  <ResizeErrorBoundary>
    <App />
  </ResizeErrorBoundary>,
  document.getElementById('root')
);

内容的提问来源于stack exchange，提问作者Ashar Rahman