React 错误边界组件

Error boundary

理解：

错误边界(Error boundary)：用来捕获后代组件错误，渲染出备用页面

特点：

React 16 提供的一个内置函数 componentDidCatch，如果 render() 函数抛出错误，该函数可以捕捉到错误信息，并且可以展示相应的错误信息

另外，看介绍貌似只能捕获后代组件生命周期产生的错误，不能捕获自己组件产生的错误和其他组件在合成事件、定时器中产生的错误 (不是很理解，感觉 自己组件产生的错误 不包含render ?? 这句话做记录后续理解了 回来修改)

componentDidCatch 可以做的事情

• 当有错误发生时, 我们可以友好地展示 fallback 组件；

• 可以捕捉到它的子元素（包括嵌套子元素）抛出的异常；

• 可以复用错误组件；

使用方式：

getDerivedStateFromError 配合 componentDidCatch

import  React, { Component } from 'react';

export default class PointerError extends Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false };
    }

    static getDerivedStateFromError() {
        // 更新 state 使下一次渲染能够显示降级后的 UI
        return { hasError: true };
    }

    componentDidCatch(error, errorInfo) {
        // 可以将错误日志上报给服务器
        console.log('组件奔溃 Error', error);
        console.log('组件奔溃 Info', errorInfo);
    }

    render() {
        if (this.state.hasError) {
            // 你可以自定义降级后的 UI 并渲染
            return this.props.content;
        }
        return this.props.children;
    }
}

将上面组件套在开发中的最外侧，这里用到了 antd 的空状态 小伙伴们可以自由发挥撒

import React, { Component  } from 'react';
import { Empty } from 'antd';

import PointerError from './PointerError';

render() {
    let widget = this.state.widget;
    return (
       <PointerError content={ <Empty description='哎呀，组件崩溃了~' /> }>
      
      		 '里面的组件。。。' 
      
       </PointerError>
    )

}
        

随后在究极深度的子组件render中 手动填进去一个错误

成功打印出 错误提示 year~

控制台打印了报错的具体组件!!

斯嘎 ~ 斯嘎~