搭配Suspense的React函数组件中ErrorBoundary未生效问题

• React ErrorBoundary 只能捕获子组件树渲染阶段、生命周期、构造函数抛出的同步错误，无法直接捕获动态import()产生的未处理Promise异步reject错误，当目标组件不存在时，动态import加载失败抛出的Promise reject没有被捕获，会直接触发全局错误导致应用崩溃。
• 现有代码每次组件重渲染都会重新执行React.lazy()生成新的组件引用，会导致懒加载组件重复挂载、加载状态异常，也会干扰ErrorBoundary的错误捕获逻辑。

1. 捕获动态import的异步错误 #

给import()的Promise链增加catch逻辑，把加载失败的异步错误转换为渲染阶段抛出的同步错误，让ErrorBoundary可以正常识别捕获。

2. 缓存懒加载组件 #

使用useMemo包裹React.lazy()逻辑，仅当选中的组件路径变化时才重新生成懒加载组件，避免重复创建组件引用导致的异常。

3. 优化ErrorBoundary重置逻辑 #

给ErrorBoundary增加子组件变化时的错误状态重置能力，避免切换到有效组件后仍一直展示错误UI。

修复后的SiteContent组件代码 #

import React, { useState, useMemo, Suspense } from 'react';
import ErrorBoundary from './ErrorBoundary';

export const SiteContent = () => {
  const [selectedOption, setSelectedOption] = useState(null);

  const LazyLoadedComponent = useMemo(() => {
    if (!selectedOption?.component || !selectedOption.option?.value) {
      return null;
    }
    const componentPath = selectedOption.option.value;
    return React.lazy(() => 
      import(`./components/${componentPath}/${componentPath}`)
        .catch(err => {
          // 捕获模块不存在、网络错误等加载异常，转为可被ErrorBoundary识别的渲染错误
          throw new Error(`无法加载组件 ${componentPath}: ${err.message}`);
        })
    );
  }, [selectedOption]);

  return (
    <>
      <ErrorBoundary>
        <Suspense fallback={<div>Loading....</div>}>
          {LazyLoadedComponent && <LazyLoadedComponent />}
        </Suspense>
      </ErrorBoundary>
    </>
  );
};

优化后的ErrorBoundary组件代码 #

import React from "react";
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    // 可在此处添加错误日志上报逻辑
    console.error('组件渲染异常:', error, errorInfo);
  }

  // 子组件变化时重置错误状态，切换有效组件后可正常渲染
  componentDidUpdate(prevProps) {
    if (this.state.hasError && prevProps.children !== this.props.children) {
      this.setState({ hasError: false, error: null });
    }
  }

  render() {
    if (this.state.hasError) {
      return (
        <div>
          <h1>Something went wrong.</h1>
          <p>{this.state.error?.message || '组件加载失败，请稍后重试'}</p>
        </div>
      );
    }
    return this.props.children;
  }
}

export default ErrorBoundary;

• 开发环境下构建工具（Webpack/Vite）会在模块加载失败时弹出全局错误遮罩、打印错误日志，这是开发模式的默认行为，生产环境构建后不会出现该遮罩，会正常展示ErrorBoundary配置的回退UI。
• 如果需要更细粒度的加载失败提示，可以在catch中区分错误类型，比如是网络错误还是模块不存在，返回不同的提示信息。

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