React之错误边界（ErrorBoundary）

错误边界是一种React组件。它及其子组件形成一个树型结构，能捕获JavaScript中所有位置的错误，记录下错误，并且还能显示一个后备界面，避免让用户直接看到组件树的崩溃信息。

componentDidCatch

React 16 将提供一个内置函数 componentDidCatch，如果 render() 函数抛出错误，则会触发该函数。

  componentDidCatch(error, info) {
  
  }

注意

错误边界目前只在 Class Component 中实现了，没有在 hooks 中实现（因为Error Boundaries的实现借助了this.setState可以传递callback的特性，useState无法传入回调，所以无法完全对标）;

错误边界 无法捕获 以下四种场景中产生的错误：

• 事件处理函数（因为 Error Boundaries 实现的本质是触发更新，但是事件处理函数不在render或者commit阶段，所以无法进行捕获，如果你需要在事件处理器内部捕获错误，可以使用原生的 try / catch 语句）
• 异步代码（例如 setTimeout 或 requestAnimationFrame 回调函数）
• 服务端渲染（因为触发更新只能在客户端进行，不能在serve端进行）
• 它自身抛出来的错误（因为错误抛出要向父节点冒泡寻找 Error Boundaries 处理，无法处理自身产生的错误）

实现一个ErrorBoundary组件

import React from "react";

interface Props {
    children: any
}

interface State {
    error: any,
    errorInfo: any
}

//类组件建立方式
class ErrorBoundary extends React.Component<Props, State> {
    //初始化生命周期
    constructor(props:Props){
        super(props);
        this.state = {error: null, errorInfo: null};
    }

    //捕获错误边界，在render时错误会执行
    componentDidCatch(error: any, errorInfo: any) {
        this.setState({
            error: error,
            errorInfo: errorInfo
        });
    }

    render() {
        if (this.state.errorInfo) {
            return (
                <div>
                    <h2>Something went wrong.</h2>
                    <details style={{whiteSpace: "pre-wrap"}}>
                        {this.state.error && this.state.error.toString()}
                        <br/>
                        {this.state.errorInfo.componentStack}
                    </details>
                </div>
            );
        }
        return this.props.children;
    }
}

export default ErrorBoundary;

错误边界的粒度

错误边界的粒度由你来决定，可以将其包装在最顶层的路由组件中，并为用户展示一个 “xxx” 的错误信息，就像服务端框架经常处理崩溃一样。

也可以将单独的组件包装在错误边界，从而保护其它组件不会崩溃。