React 中的组件错误边界：让前端更稳定

在开发 React 应用时，页面突然白屏或者某个模块直接崩溃，用户只能刷新页面，这种体验很糟糕。其实，这类问题往往是因为某个组件内部出错，导致整个应用渲染失败。这时候，组件错误边界（Error Boundary）就能派上用场。

什么是组件错误边界

组件错误边界是 React 提供的一种机制，用来捕获其子组件树中任何位置的 JavaScript 错误，并展示一个备用的 UI，而不是让整个页面崩溃。它有点像 try-catch 语句，但作用于组件层级。

需要注意的是，错误边界只能捕获组件在渲染期间、生命周期方法以及事件处理函数之外抛出的错误。它无法捕获异步代码或事件回调中的错误，比如定时器或点击事件里的异常。

如何创建一个错误边界

要实现一个错误边界，只需要定义一个类组件，并在其内部实现 static getDerivedStateFromError() 或 componentDidCatch() 方法之一或两者。

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

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

  componentDidCatch(error, errorInfo) {
    console.log("捕获到错误：", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <div>哎呀，出错了！请稍后重试。</div>;
    }

    return this.props.children;
  }
}

实际使用场景

假设你正在做一个电商网站的商品详情页，右侧有一个“推荐商品”模块。这个模块依赖第三方接口加载数据，偶尔会因为网络问题或数据格式异常而报错。如果不对这个模块做隔离，一旦出错，整个详情页都可能挂掉。

这时就可以把“推荐商品”组件包裹在一个错误边界里：

<ErrorBoundary>
  <RecommendProducts />
</ErrorBoundary>

即使 RecommendProducts 出现渲染错误，主内容区域依然正常显示，用户还能继续浏览商品信息，只是推荐部分暂时不可见，体验上友好很多。

函数组件能做错误边界吗

目前不能。错误边界必须是类组件，因为只有类组件才能定义 getDerivedStateFromError 和 componentDidCatch 这两个生命周期方法。如果你用的是函数组件，可以把它嵌套在外部的类组件错误边界中来实现保护。

配合 Sentry 等工具更好用

在 componentDidCatch 中，除了更新 UI，还可以把错误信息上报到监控平台，比如 Sentry 或自建的日志系统。这样开发团队能第一时间发现问题，而不只是等用户反馈。

componentDidCatch(error, errorInfo) {
  logErrorToService(error, errorInfo.componentStack); // 上报错误
}

通过这种方式，不仅能提升用户体验，也能加快线上问题的定位速度。