Error Boundary 详解

Error Boundary 是 React 16 引入的一种特殊组件，用于捕获并处理子组件树中的 JavaScript 错误，防止这些错误导致整个应用崩溃。它类似于 JavaScript 的 try-catch 机制，但专门用于 React 组件。

核心概念与作用

1. 错误捕获范围

   • 渲染期间发生的错误
   • 生命周期方法中的错误
   • 构造函数中的错误

2. 无法捕获的错误

   • 事件处理中的错误（需使用传统 try-catch）
   • 异步代码中的错误（如 setTimeout）
   • 服务端渲染中的错误
   • Error Boundary 自身的错误

3. 主要作用

   • 防止应用因局部错误而崩溃
   • 显示友好的错误提示界面
   • 记录错误日志

实现方式

1. 类组件实现 Error Boundary

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, errorInfo: null };
  }

  // 捕获子组件错误
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  // 记录错误日志
  componentDidCatch(error, errorInfo) {
    console.error('Error Boundary caught an error:', error, errorInfo);
    // 可以将错误日志发送到服务端
    logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 显示降级 UI
      return (
        <div className="error-boundary">
          <h2>Something went wrong.</h2>
          <button onClick={() => window.location.reload()}>Reload</button>
        </div>
      );
    }
    // 正常渲染子组件
    return this.props.children;
  }
}

2. 使用示例

function App() {
  return (
    <div className="app">
      <ErrorBoundary>
        <ComponentThatMayCrash />
      </ErrorBoundary>
      <ErrorBoundary>
        <AnotherComponentThatMayCrash />
      </ErrorBoundary>
      <Footer /> {/* 不受错误影响的组件 */}
    </div>
  );
}

最佳实践

1. 错误边界的粒度

   • 可以在应用根目录放置一个全局 Error Boundary
   • 为关键区域（如广告组件、评论区）单独设置 Error Boundary

2. 友好的错误提示

   • 根据不同错误类型显示不同提示
   • 提供操作按钮（如刷新、反馈）

3. 错误日志记录

   • 记录错误堆栈信息
   • 收集用户环境信息（浏览器、设备等）

4. 避免过度使用

   • 不要用 Error Boundary 替代合理的状态管理和错误处理
   • 优先修复错误而非掩盖它们

面试高频问题

1. Error Boundary 能捕获哪些错误？
   答：渲染期间、生命周期方法和构造函数中的错误。不能捕获事件处理、异步代码、服务端渲染和自身的错误。

2. 如何实现一个 Error Boundary？
   答：创建一个类组件，实现 static getDerivedStateFromError() 和 componentDidCatch() 方法。前者用于更新状态显示降级 UI，后者用于记录错误日志。

3. Error Boundary 和 try-catch 的区别？
   答：try-catch 只能捕获同步代码中的错误，而 Error Boundary 专门用于 React 组件层次的错误处理。

4. 在函数组件中如何使用 Error Boundary？
   答：目前 Error Boundary 只能用类组件实现，但可以将其作为高阶组件（HOC）或自定义 Hook 封装后在函数组件中使用。

5. 生产环境和开发环境中 Error Boundary 的表现有何不同？
   答：开发环境中 React 会显示详细的错误堆栈信息，而生产环境中会显示 Error Boundary 定义的降级 UI。

常见问题与解决方案

1. 问题：事件处理中的错误无法被捕获
   解决方案：在事件处理函数中使用传统的 try-catch：

function MyComponent() {
  const handleClick = () => {
    try {
      // 可能出错的代码
    } catch (error) {
      console.error('Caught error in event handler:', error);
    }
  };

  return <button onClick={handleClick}>Click me</button>;
}

1. 问题：异步代码中的错误无法被捕获
   解决方案：在 Promise 链中使用 .catch() 或在 async/await 中使用 try-catch：

async componentDidMount() {
  try {
    const data = await fetchData();
    this.setState({ data });
  } catch (error) {
    console.error("Caught async error:", error);
  }
}

1. 问题：服务端渲染（SSR）中的错误无法被捕获
   解决方案：使用 React 的 ErrorBoundary 组件结合服务端的错误处理机制。

面试回答策略

1. 概念解释：清晰阐述 Error Boundary 的定义、作用和捕获范围。
2. 实现细节：强调两个核心方法 getDerivedStateFromError 和 componentDidCatch 的作用。
3. 使用场景：举例说明在复杂应用中如何合理布置 Error Boundary。
4. 局限性：明确指出 Error Boundary 不能解决所有类型的错误。
5. 扩展思考：讨论 Error Boundary 与状态管理库（如 Redux）的集成方式。

例如：

"Error Boundary 是 React 提供的一种错误处理机制，用于捕获子组件树中的渲染错误。它通过实现 getDerivedStateFromError 和 componentDidCatch 两个静态方法来工作。在我的项目中，我会在应用根目录设置一个全局 Error Boundary，同时为第三方组件（如广告）单独包裹 Error Boundary。需要注意的是，它不能替代传统的 try-catch，对于事件处理和异步代码中的错误，我们仍需要使用传统的错误处理方式。"