第129题 如何统一监听React组件报错

• ErrorBoundary组件
  • 在react16版本之后，增加了ErrorBoundary组件
  • 监听所有下级组件报错，可降级展示UI
  • 只监听组件渲染时报错，不监听DOM事件错误、异步错误
    • ErrorBoundary没有办法监听到点击按钮时候的在click的时候报错
    • 只能监听组件从一开始渲染到渲染成功这段时间报错，渲染成功后在怎么操作产生的错误就不管了
    • 可用try catch或者window.onerror（二选一）
  • 只在production环境生效(需要打包之后查看效果)，dev会直接抛出错误
• 总结
  • ErrorBoundary监听组件渲染报错
  • 事件报错使用try catch或window.onerror
  • 异步报错使用window.onerror

    // ErrorBoundary.js
    
    import React from 'react'
    
    class ErrorBoundary extends React.Component {
      constructor(props) {
        super(props)
        this.state = {
          error: null // 存储当前的报错信息
        }
      }
      static getDerivedStateFromError(error) {
        // 更新 state 使下一次渲染能够显示降级后的 UI
        console.info('getDerivedStateFromError...', error)
        return { error } // return的信息会等于this.state的信息
      }
      componentDidCatch(error, errorInfo) {
        // 统计上报错误信息
        console.info('componentDidCatch...', error, errorInfo)
      }
      render() {
        if (this.state.error) {
          // 提示错误
          return <h1>报错了</h1>
        }
    
        // 没有错误，就渲染子组件
        return this.props.children
      }
    }

    // index.js 中使用
    import React from 'react';
    import ReactDOM from 'react-dom';
    import App from './App';
    import ErrorBoundary from './ErrorBoundary'
    
    ReactDOM.render(
      <React.StrictMode>
        <ErrorBoundary>
          <App />
        </ErrorBoundary>
      </React.StrictMode>,
      document.getElementById('root')
    );