错误边界

Error Boundaries

• 过去，组件内的 JavaScript 错误会导致 React 的内部状态被破坏，并且在下一次渲染时产生可能无法追踪的错误

• 这些错误基本上是由较早的其他代码（非React组件代码）错误引起的，但是 React 并没有提供一种在组件中优雅处理这些错误的方式，也无法从错误中恢复。

• 部分 UI 的 JavaScript 错误不应该导致整个应用崩溃，为了解决这个问题，React 16 引入了一个新的概念：错误边界

• 错误边界是一种 React 组件，这种组件

  • 可以捕获并打印发生在其子组件树任何位置的 JavaScript 错误，并且，它会渲染出备用 UI 而不是渲染那些崩溃的子组件树

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

  • 错误边界无法捕获以下场景中发生的错误

    • 事件处理 React 不需要错误边界来捕获事件处理器中的错误 使用 try / catch

    • 异步代码 setTimeout 或 requestAnimationFrame

    • 服务端渲染

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

• 如果一个 class 组件中定义了 static getDerivedStateFromError() 或 componentDidCatch() 这两个生命周期方法中的任意 一个 或 两个 时，那么它就变成了一个错误边界

  • 当抛出错误时，使用 static getDerivedStateFromError() 渲染备用 UI

  • 使用 componentDidCatch() 打印错误信息

• 错误边界的工作方式类似于 JavaScript 的 catch {}

  • 不同的地方在于错误边界只针对 React 组件

  • 只有 class 组件才可以成为错误边界组件

  • 大多数情况下，你只需要声明一次错误边界组件，并在整个应用中使用它

  • 如果一个错误边界无法渲染错误信息，则错误会冒泡至最近的上层错误边界，这也类似于 JavaScript 中 catch {} 的工作机制

```jsx harmony

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

static getDerivedStateFromError(error) { // 更新 state 使下一次渲染能够显示降级后的 UI return { hasError: true }; }

componentDidCatch(error, errorInfo) { // 你同样可以将错误日志上报给服务器 logErrorToMyService(error, errorInfo); }

render() { if (this.state.hasError) { // 你可以自定义降级后的 UI 并渲染 return Something went wrong.; }

return this.props.children; 

} }

// 可以将它作为一个常规组件去使用

```

未捕获错误 Uncaught Errors 的新行为

• 自 React 16 起，任何未被错误边界捕获的错误将会导致整个 React 组件树被卸载

• 把一个错误的 UI 留在那比完全移除它要更糟糕