Nx升级后ResizeObserver错误导致Cypress崩溃求助

核心原因 #

1. 两个错误的层级与处理逻辑不同：ResizeObserver loop limit exceeded是浏览器抛出的警告级错误，可通过webpack构建配置屏蔽；但ResizeObserver loop completed with undelivered notifications是未捕获的运行时异常，Cypress对这类异常的检测逻辑更严格，会直接终止测试进程，webpack的构建级抑制规则无法影响Cypress的运行时异常捕获机制。
2. Nx升级到v14.8.6后，配套的Cypress版本（通常为v9.x或v10.x）强化了未捕获异常的检测逻辑；同时React或依赖的UI库版本升级后，ResizeObserver的使用方式可能触发了更底层的异常。
3. webpack的错误抑制仅作用于应用代码的构建输出，无法渗透到Cypress的测试运行上下文，所以你添加的抑制规则对测试环境完全无效。

可行解决方案 #

• 在Cypress中直接捕获并忽略该异常
  在cypress/support/index.js（或e2e/support/e2e.js，取决于你的Nx项目结构）中添加全局异常处理：

  Cypress.on('uncaught:exception', (err, runnable) => {
    // 匹配目标错误信息，阻止Cypress终止测试
    if (err.message.includes('ResizeObserver loop completed with undelivered notifications')) {
      return false;
    }
    // 其他异常正常抛出
    return true;
  });
  

• 修复ResizeObserver的使用逻辑（从根源解决）
  异常通常是因为ResizeObserver回调中同步修改元素尺寸触发循环，或元素已被移除但观测未停止。可通过以下方式优化：

  const observer = new ResizeObserver(entries => {
    // 用requestAnimationFrame延迟处理，避免同步触发循环
    requestAnimationFrame(() => {
      entries.forEach(entry => {
        // 先检查元素是否还在DOM中，避免无效处理
        if (!entry.target.isConnected) {
          observer.unobserve(entry.target);
          return;
        }
        // 你的尺寸处理逻辑
      });
    });
  });
  

• 检查依赖兼容性
  查看Nx升级后package.json中React、Cypress以及你使用的UI组件库（如AntD、Material-UI）的版本变化，是否存在已知的ResizeObserver相关bug，尝试升级到对应库的补丁版本。

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