react错误边界，如何使用？

1、问题由来：我们前端代码依赖后端代码，一些数据格式错误可能导致页面白屏或者出错，

我们不能保证我们代码完全没有问题，这时候我们寄希望于后端，还不如自己增加代码兼容性，以及相应的提示。

2、错误边界：Error Boundaries，一个官方提供的思路，简单写一下错误捕获逻辑，这里封装成组件，代码如下

import ErrPage from '@src/assets/images/error-page.png';
import * as React from 'react';
import './index.less';

interface IErrorBoundaryProps {
   state?: {
      error: any;
      errorInfo: any;
   }
}

/**
 * react错误边界处理
 */
class ErrorBoundary extends React.Component<IErrorBoundaryProps, any> {
   /**
    * 初始化参数
    * @param props 父级参数
    */
   constructor(props: any) {
      super(props);
      this.state = { error: null, errorInfo: null };
   }

   /**
    * 捕获错误
    * @param error 错误类型
    * @param errorInfo 错误详细信息
    */
   componentDidCatch(error: any, errorInfo: any) {
      this.setState({
         error: error,
         errorInfo: errorInfo
      })
   }

   /**
    * 回首页
    */
   handleGoHome = () => {
      this.setState({
         error: null,
         errorInfo: null
      }, () => {
         window.location.replace('/');
      });
   }

   render() {
      if (this.state.errorInfo) {
         return (
            <div className="error-boundary-wrapper" onClick={this.handleGoHome}>
               <div className="error-box">
                  <img src={ErrPage} />
                  <div className="err_reason">页面加载失败</div>
                  <div className="err_reload">点击屏幕 重新加载</div>
               </div>
            </div>
         );
      }
      return (this.props.children);
   }

}

export default (ErrorBoundary);

3、使用方式如下，使用时包裹我们的根组件就行，so easy

 <ErrorBoundary>
     <SiderLayout />
  </ErrorBoundary>

4.效果图