无堆栈追踪时排查Chrome/Edge中ResizeObserver循环错误的方法

问题详情 #

• 触发错误：Uncaught ResizeObserver loop completed with undelivered notifications.
• 无堆栈追踪，无法直接定位问题组件
• 项目未直接使用ResizeObserver，排查第三方组件未发现明确关联
• 页面存在渲染异常，但React Error Boundaries无法捕获该错误
• 浏览器错误截图：
  • Chrome错误截图:
  • Edge错误截图:

排查与修复方案 #

• 全局监听捕获错误上下文：在应用入口文件（如index.js）添加全局错误监听，过滤该错误并收集额外信息，辅助定位：

window.addEventListener('error', (e) => {
  if (e.message.includes('ResizeObserver loop completed with undelivered notifications')) {
    e.stopImmediatePropagation();
    // 记录当前路由、活跃DOM节点等信息
    console.log('ResizeObserver错误触发，当前路由:', window.location.pathname);
    console.log('当前活跃DOM节点:', document.activeElement);
  }
});

• 逐个排查可疑组件：通过React DevTools的"Components"面板，逐个禁用页面中的组件/模块，观察错误是否消失，锁定问题来源。同时可开启"Highlight Updates"功能，查看是否有组件异常频繁重绘。

• 检查第三方依赖版本：部分UI组件库（如Ant Design、Material-UI）内部会封装ResizeObserver，尝试升级或降级相关依赖，排查版本兼容问题。

• 替换为ResizeObserver Polyfill：安装并引入polyfill替代浏览器原生实现，可能解决循环通知的底层问题：

npm install resize-observer-polyfill

在入口文件添加：

import ResizeObserver from 'resize-observer-polyfill';
window.ResizeObserver = ResizeObserver;

• 优化渲染优先级：使用React的startTransition或useDeferredValue延迟非紧急状态更新，避免渲染过程中触发ResizeObserver循环：

import { startTransition } from 'react';

const handleDataUpdate = () => {
  startTransition(() => {
    // 更新状态的逻辑
    setSomeState(newValue);
  });
};

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