componentDidCatch

2024年03月06日

柏拉文

越努力，越幸运

一、认识

---

componentDidCatch(error, info) 用于捕获某些子组件（包括后代组件）在渲染过程中抛出的错误。一般来说，它与 static getDerivedStateFromError 一起使用，这样做允许你更新 state 来响应错误并向用户显示错误消息。

二、语法

---

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

  static getDerivedStateFromError(error) {
    // 更新状态，以便下一次渲染将显示后备 UI。
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // 示例“组件堆栈”：
    //   在 ComponentThatThrows 中（由 App 创建）
    //   在 ErrorBoundary 中（由 APP 创建）
    //   在 div 中（由 APP 创建）
    //   在 App 中
    logErrorToMyService(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // 你可以渲染任何自定义后备 UI
      return this.props.fallback;
    }

    return this.props.children;
  }
}

• error: 被抛出的错误。实际上，它通常会是一个 Error 的实例，但是这并不能保证，因为 JavaScript 允许 抛出 所有值，包括字符串甚至是 null。

• info: 一个包含有关错误的附加信息的对象。它的 componentStack 字段包含一个关于有关组件的堆栈跟踪，以及其所有父组件的名称和源位置。在生产中，组件名称将被简化。如果你设置了生产错误报告服务，则可以使用源映射来解码组件堆栈，就像处理常规 JavaScript 错误堆栈一样。