如何统一监听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')
);