React 错误边界

过去，如果组件内部出现任何 JavaScript 错误，它会破坏 React 的内部状态，并在下一次渲染时使 React 处于损坏状态。React 组件中没有任何方法可以处理这些错误，也没有提供任何方法来从中恢复。但是，React 16 引入了一个新概念，即使用错误边界来处理错误。现在，如果在 UI 的一部分中发现任何 JavaScript 错误，它不会破坏整个应用程序。

错误边界是 React 组件，它可以捕获应用程序中任何地方的 JavaScript 错误，记录这些错误，并显示备用 UI。它不会破坏整个应用程序组件树，仅当组件中发生错误时才渲染备用 UI。错误边界会捕获组件生命周期方法渲染期间以及它们下面整个树的构造函数中的错误。

对于简单的 React 应用程序，我们可以声明一个错误边界并将其用于整个应用程序。对于具有多个组件的复杂应用程序，我们可以声明多个错误边界来恢复整个应用程序的每个部分。

我们还可以将错误报告给错误监控服务，例如 Rollbar。 此监控服务提供了跟踪有多少用户受到错误影响、查找错误原因并改善用户体验的能力。

类中的错误边界

如果一个类组件定义了一个新的生命周期方法，即 static getDerivedStateFromError() 或 componentDidCatch(error, info)，则它可以成为一个错误边界。我们可以使用 static getDerivedStateFromError() 来渲染在抛出错误时显示的备用 UI，并且可以使用 componentDidCatch() 来记录错误信息。

错误边界无法捕获自身内部的错误。如果错误边界无法渲染错误消息，则该错误将转到其上方的最近的错误边界。它类似于 JavaScript 中的 catch {} 块。

如何实现错误边界

步骤 1 创建一个继承 React 组件的类，并在其中传递 props。

步骤 2 现在，添加 componentDidCatch() 方法，该方法允许您捕获树中低于它们的组件中的错误。

步骤 3 接下来添加 render() 方法，该方法负责如何渲染组件。例如，它将显示类似“出了问题”的错误消息。

示例

步骤 4 现在，我们可以将其用作常规组件。将要包含在错误边界中的新组件添加到 HTML 中。在此示例中，我们在 MyWidgetCounter 组件周围添加了一个错误边界。

错误边界的放置位置

错误边界完全取决于您。您可以在应用程序组件的顶层使用错误边界，也可以将其包装在单个组件上，以保护它们免受破坏应用程序其他部分的影响。

让我们看一个例子。

在上面的代码段中，当我们单击数字时，它会增加计数器。 计数器被编程为在达到 3 时抛出一个错误。它模拟了组件中的 JavaScript 错误。在这里，我们使用了两种方式的错误边界，如下所示。

首先，这两个计数器都在同一个错误边界内。如果任何一个崩溃，错误边界将替换它们两个。

其次，这两个计数器都位于各自的错误边界内。因此，如果任何一个崩溃，另一个不会受到影响。

输出

当我们执行上面的代码时，我们将获得以下输出。

当计数器达到 3 时，它会给出以下输出。

未捕获错误的新行为

这是与错误边界相关的重要含义。如果错误未被任何错误边界捕获，则将导致整个 React 应用程序的卸载。

事件处理程序中的错误边界

错误边界不允许捕获事件处理程序中的错误。 React 不需要任何错误边界来从事件处理程序中的错误中恢复。如果需要在事件处理程序中捕获错误，则可以使用 JavaScript try-catch 语句。

在下面的示例中，您可以看到事件处理程序将如何处理错误。