错误边界

错误边界（Error Boundaries）

部分 UI 的 JavaScript 错误不应该导致整个应用崩溃 如：jsx的html结构中显示对象

为了解决这个问题，React 16 引入了一个新的概念 —— 错误边界

错误边界是一种 React 组件，这种组件可以捕获发生在其子组件树任何位置的 JavaScript 错误

并打印这些错误，同时展示降级 UI，而并不会渲染那些发生崩溃的子组件树

错误边界可以捕获发生在整个子组件树的渲染期间、生命周期方法以及构造函数中的错误

import React, { Component } from 'react'
import Test2 from './test2'

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

  // 会在js出现错误的时候执行，而且在所有的子组件发生错误也会执行
  static getDerivedStateFromError (error) {
    // 更新state使下一次渲染能够显示降级后的UI
    console.log(error)
    return { hasError: true }
  }
  // componentDidCatch也会在所有的子组件发生错误的时候也执行
  componentDidCatch(error, errorinfo){
    // 上报错误日志到服务器
    console.log('componentDidCatch fired in ErrorBoundary');
  }
  render () {
   if(this.state.hasError){
    return (
      // 自定义降级后的UI渲染
      <div><h1>Something went wrong</h1></div>
    )
   }
   return <Test2></Test2>
  }
}

注：

错误边界组件必须是类组件 因为在类组件中才能使用生命周期函数

错误边界组件只能处理子组件的错误

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

• 事件处理

• 异步代码（例如 setTimeout 或 requestAnimationFrame 回调函数）

• 服务端渲染

• 它自身抛出来的错误（并非它的子组件）