什么是错误边界

React16 引入了 Error Boundaries（异常边界）的概念是为了避免 React 的组件内的 UI 异常导致整个应用的异常。
Error Boundaries（异常边界）是 React 组件，用于捕获它子组件树种所有组件产生的 js 异常，并渲染指定的兜底 UI 来替代出问题的组件。

它能捕获子组件生命周期函数中的异常，包括构造函数（constructor）和 render 函数

而不能捕获以下异常：

Event handlers（事件处理函数）
Asynchronous code（异步代码，如 setTimeout、promise 等）
Server side rendering（服务端渲染）
Errors thrown in the error boundary itself (rather than its children)（异常边界组件本身抛出的异常）

import React from 'react';
class ErrorBoundary extends React.Component {
  state = {
    hasError: false
  }
  componentDidCatch(err, info) {
    this.setState({ hasError: true })
    console.log(err, info);
  }
  render() {
    // 如果 render 阶段出现问题，那么使用一个兜底的 UI
    if (this.state.hasError) {
      return <div>Something went wrong</div>
    }
    return this.props.children
  }
}
export default ErrorBoundary

使用 ErrorBoundary 组件的方式，将组件嵌套在 ErrorBoundary 组件中

import React from 'react'
import ErrorBoundary from '@/components/ErrorBoundary'
class TodoList extends React.Component {
  render() {
    return new Error('TodoList is Error')
  }
}
class Page extends React.Component {
  render() {
    return (
      <ErrorBoundary>
        <TodoList/>
      </ErrorBoundary>
    )
  }
}

参考资料

《从源码看React异常处理》
《React 官方文档》

前端知识库

React 错误边界

什么是错误边界

参考资料