React生产构建环境下CSS资源加载失败的异常处理方法咨询

首先明确底层原因：CSS资源加载错误属于浏览器资源加载类错误，不属于React运行时的JS执行错误，也不会进入React组件的执行栈，所以默认不会被ErrorBoundary的componentDidCatch捕获。你之前能捕获JS chunk加载失败，是因为React.lazy加载JS chunk失败时会抛出Promise rejection错误，属于React组件加载阶段的JS错误，所以能被捕获。

以下是可落地的处理方案：

• 全局监听资源加载错误 #

  资源加载错误不会冒泡，需要在全局监听捕获阶段的error事件，统一处理所有CSS、图片、字体等静态资源加载异常：

  // 在项目入口文件（如index.js）最顶部添加
  window.addEventListener('error', (e) => {
    // 匹配CSS资源加载失败的场景
    if (e.target.tagName === 'LINK' && e.target.rel === 'stylesheet') {
      const failedCssUrl = e.target.href
      console.error('CSS资源加载失败:', failedCssUrl)
      // 自定义降级逻辑：示例为加时间戳重试加载
      const newLink = document.createElement('link')
      newLink.rel = 'stylesheet'
      newLink.href = `${failedCssUrl}?t=${Date.now()}`
      document.head.appendChild(newLink)
      // 也可自行添加逻辑：弹出用户提示、上报埋点、跳转降级页等
    }
  }, true) // 第三个参数设为true，开启捕获阶段监听
  

• 适配现有ErrorBoundary的懒加载校验方案 #

  如果不想加全局监听，可以封装React.lazy方法，在懒加载页面JS chunk加载完成后，手动校验对应CSS是否加载成功，校验失败则主动抛出JS错误，即可被外层已有的ErrorBoundary捕获：

  // 封装懒加载方法
  const lazyWithCssValidate = (importFn, expectedCssChunkName) => {
    return React.lazy(async () => {
      const module = await importFn()
      // 校验对应CSS是否加载成功，cssChunkName可和Webpack打包的chunk名做约定匹配
      const isCssLoaded = Array.from(document.querySelectorAll('link[rel="stylesheet"]'))
        .some(link => link.href.includes(expectedCssChunkName) && link.sheet !== null)
      
      if (!isCssLoaded) {
        // 主动抛出JS错误，触发外层ErrorBoundary
        throw new Error(`页面CSS加载失败，请刷新重试`)
      }
      return module
    })
  }
  
  // 路由中替换原有的React.lazy调用即可
  const OrderPage = lazyWithCssValidate(() => import('./pages/Order'), 'order')
  

• 兜底兼容优化 #

  针对弱网场景，可在入口HTML的head中嵌入最小体积的全局兜底CSS，保证即使所有业务CSS加载失败，页面核心元素（按钮、导航、文字）仍可读可用，不会完全崩版影响用户操作。

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