[译]React高级话题之Error Boundaries

本文为意译，翻译过程中掺杂本人的理解，如有误导，请放弃继续阅读。

原文地址:Error Boundaries

在过去，React组件内部的javascript错误往往会让React内部的state变得不可用，并且会在下一次的渲染过程中产生模棱两可的错误信息。这些错误常常是由应用先前的错误所引起的，但是React并没有提供一个优雅的方案去在组件内部处理这种错误，并将应用恢复到正常的状态。

正文

介绍Error Boundaries

应用中局部UI中的javascript错误按理说不应该导致整个应用都崩溃掉。为了帮助React用户解决这种问题，React在16.x.x中引入了新的概念-“error boundary”。

什么是“error boundary”呢？ “error boundary”就是一种能够捕获它的子组件树所产生的错误的React组件 。在这种组件里，你能够把这些错误日志打印出来，又或者相比简单粗暴地把组件树崩溃后的界面呈现给用户，你可以呈现一个精心设计过的备用界面给用户（为了强调error boundary是一个组件，我后面的翻译过程中使用 <Error boundary> 来指代）。 <Error boundary> 能捕获在渲染过程中，所有子组件的constructors和生命周期函数里面发生的错误。

<Error boundary> 不能捕获以下类型的错误：

<Error boundary>

从代码的层面来说，只要一个class component定义了 static getDerivedStateFromError() 和 componentDidCatch() 方法中的一个，又或者两个都定义了，我们就说它是一个 <Error boundary> 。上面提到的两个方法其实是有分工的。一般来说， static getDerivedStateFromError() 是不允许发生副作用的，故是负责呈现一个备用的UI给用户。 componentDidCatch() 允许发生副作用，故负责打印错误日志，发送错误日志到远程服务器等。如下：

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

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

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

  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>
复制代码

<Error boundary> 使用起来就像 catch {} 语句，只不过它是用于React component而已。只有class component才能成为 <Error boundary> 。在实际应用中，大多数情况，你只需要定义一个 <Error boundary> ，然后到处使用它。

注意， <Error boundary> 是不能捕获自己所产生的错误，只能捕获在它之下的组件树所产生的错误。在 <Error boundary> 嵌套使用的情况下，如果某个 <Error boundary> 不能渲染一些错误信息（调用static getDerivedStateFromError()失败？），那么这个错误就会往上冒泡到层级最近的个 <Error boundary> 。这也是catch{}语句在javascript里面的执行机制。

在线Demo

查看 如何在React 16版本中定义和使用 error boundary 。

在哪里“放置”Error Boundaries

在组件树中“放置” <Error boundary> 的密度完全取决于你。你可以把你最顶级的route component包裹在 <Error boundary> 中，然后让 <Error boundary> 呈现一个备用的界面给用户，例如“Something went wrong”。服务端渲染经常就是这样应对应用崩溃的。你也可以把多个组件分开包裹在 <Error boundary> 中，以此来防止局部UI的崩溃。