Question

错误边界是在其子组件树中的任何位置捕获 JavaScript 错误、记录这些错误并显示回退 UI 而不是崩溃的组件树的组件。

如果一个类组件定义了一个名为 componentDidCatch(error, info) 或 static getDerivedStateFromError() 新的生命周期方法，则该类组件将成为错误边界：

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

componentDidCatch(error, info) {
  // You can also log the error to an error reporting service
  logErrorToMyService(error, info)
}

static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

render() {
  if (this.state.hasError) {
    // You can render any custom fallback UI
    return <h1>{'Something went wrong.'}</h1>
  }
  return this.props.children
}
}

之后，将其作为常规组件使用：

<ErrorBoundary>
<MyWidget />
</ErrorBoundary>