React错误边界的使用

React 处理错误：只处理在渲染期间或组件生命周期方法期间抛出的错误。在事件处理程序中（通常通过try catch处理）或异步代码（setTimeout，回调等等）或服务器端的渲染或者在错误边界本身（而不是其子女）中抛出的错误，这些运行后引发的错误不会被捕获。

上周遇到了一个问题，因为React组件Table报错，这个错误没有被捕获，导致整个React组件树被卸载，进而导致整个页面显示为白屏。控制台异常抛出的错误只是指向这个组件但是并没有说是那一块的错误。怎么能清楚的分析这个报错的具体原因？

React有什么工具可以让我们处理这样的运行时错误？

方法一：try catch

官方文档有说明：我们可以使用常规的 JavaScript 语句,try catch 对错误几进行处理

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { error: null };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    try {
      // Do something that could throw
    } catch (error) {
      this.setState({ error });
    }
  }

  render() {
    if (this.state.error) {
      return <h1>Caught an error.</h1>
    }
    return <button onClick={this.handleClick}>Click Me</button>
  }
}

但是不想使用这个常规语句，于是发现了一个处理错误边界的react 组件

方法二：react-error-boundary推荐

重用的 React 错误边界组件。支持所有 React 渲染器（包括 React DOM 和 React Native）

给项目中添加依赖

npm i react-error-boundary   

react-error-boundary类组件的使用方法

他可以将捕获到错误呈现，回退到报错的 UI部分。

import { ErrorBoundary } from "react-error-boundary";
<ErrorBoundary fallback={<div>Something went wrong</div>}>
  <ExampleApplication />
</ErrorBoundary>

组件引入： import { ErrorBoundary } from "react-error-boundary";

定义一个function用来在界面显示报错：

这样我们可以在控制台和界面看到同样的错误信息，以便分析问题； 

useErrorBoundary hook

翻看npm发布的文档，还有一个钩子可以使用。

文档链接：react-error-boundary - npm

此挂钩可用于将这些错误传递到最近的错误边界：

import { useErrorBoundary } from "react-error-boundary";

function Example() {
  const { showBoundary } = useErrorBoundary();

  useEffect(() => {
    fetchGreeting(name).then(
      response => {
        // Set data in state and re-render
      },
      error => {
        // Show error boundary
        showBoundary(error);
      }
    );
  });

  // Render ...
}

后面有使用到hooks的话，更新实例.......

建议所有的组件中都使用错误边界处理的方法，有助于更好的定位错误信息。