React之捕获异常的艺术

前端

2023-12-21 23:41:21

React 应用中的错误捕获

错误处理的必要性

在编码过程中，难免会出现错误。错误本身并不可怕，可怕的是未被捕获处理的错误。未处理的错误可能导致程序崩溃，严重损害用户体验。

React 中的错误处理

对于 React 应用程序，错误捕获尤为重要。由于 React 的虚拟 DOM 特性，错误很容易被忽略。一个错误可能导致整个应用程序崩溃，而用户却看不到任何错误提示。

React 的内置错误处理机制

React 提供了两种内置的错误处理机制：

componentDidCatch： 当子组件抛出错误时，父组件的 componentDidCatch 方法会被调用。
ErrorBoundary： ErrorBoundary 是一个 React 组件，可以捕获其子组件抛出的错误。

使用 ErrorBoundary

ErrorBoundary 的使用很简单，只需在组件中定义一个 render 方法，并在 render 方法中使用 ErrorBoundary 组件即可。

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

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

  componentDidCatch(error, info) {
    console.log(error, info);
  }

  render() {
    if (this.state.hasError) {
      return <FallbackUI />;
    }

    return this.props.children;
  }
}

在该代码中，ErrorBoundary 组件定义了一个 render 方法，并在其中使用了 ErrorBoundary 组件。当组件抛出错误时，ErrorBoundary 组件的 getDerivedStateFromError 方法会被调用，并将 hasError 状态设置为 true。

当 hasError 状态为 true 时，ErrorBoundary 组件的 componentDidCatch 方法会被调用，并将错误信息和错误堆栈信息打印到控制台。同时，ErrorBoundary 组件还会渲染一个 FallbackUI 组件，该组件可以是简单的错误提示信息，也可以是一个更复杂的错误页面。

自定义错误捕获组件

除了使用内置的 ErrorBoundary 组件，我们还可以自定义错误捕获组件。

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

  componentDidCatch(error, info) {
    this.setState({ hasError: true });
    console.log(error, info);
  }

  render() {
    if (this.state.hasError) {
      return <FallbackUI />;
    }

    return this.props.children;
  }
}