React错误边界 | GDYG Blog

type

status

date

slug

summary

📝 介绍

React 错误边界是 React 组件，用于捕获并处理其子组件树中的 JavaScript 错误（即运行时错误），从而防止这些错误导致整个应用崩溃。错误边界通过在组件树的一部分中捕获错误，并允许开发者在发生错误时显示备用 UI 来保持用户体验的稳定性。

通常情况下，当 React 组件中发生 JavaScript 错误时，React 会中止渲染整个组件树，并在控制台中输出错误信息。这可能会导致用户看到空白屏幕或其他不良体验。错误边界的作用就是为了处理这种情况，提供一种方式来优雅地处理错误，而不会影响整个应用的稳定性。

需要错误边界的情况包括但不限于：

第三方库可能引发的错误：当使用第三方库时，不能保证其完全没有错误。使用错误边界可以捕获这些错误，避免整个应用崩溃。

异步操作的错误处理：在异步操作中（如网络请求或定时器），如果发生错误，错误边界可以捕获这些错误，并显示友好的错误信息，而不是让用户看到空白页面或其他异常。

稳定性：通过使用错误边界，可以提高应用的稳定性和用户体验，即使某些组件发生了错误，也不会影响整个应用的运行。

调试：错误边界提供了一个机制来捕获并记录错误，使开发者更容易调试应用中的问题。

在大多数情况下，将错误边界应用于局部组件是最佳实践。这样可以将错误处理逻辑限制在特定的组件树范围内，并且可以根据不同的场景显示不同的错误 UI。然而，在某些情况下，在全局组件中使用错误边界也是有意义的，特别是当应用中的所有组件都共享相同的错误处理逻辑时。例如，如果你希望在整个应用中都显示相同的错误信息或错误 UI，那么在全局组件中使用错误边界可能是一种更简单的方法。

React官方提供的ErrorBoundary

要实现错误边界组件，您需要提供 static getDerivedStateFromError ，它允许您更新状态以响应错误并向用户显示错误消息。您还可以选择实现 componentDidCatch 以添加一些额外的逻辑，例如，将错误记录到分析服务。

目前还没有办法将错误边界编写为函数组件。但是，您不必自己编写错误边界类。例如，您可以使用 react-error-boundary 代替。

使用react-error-boundary

注意 ErrorBoundary 是客户端组件。您只能将可序列化的属性传递给它，或者在具有 "use client"; 指令的文件中使用它。

ErrorBoundary 与 fallbackRender 属性:

ErrorBoundary 与 FallbackComponent 属性:

使用 onError 记录错误:

useErrorBoundary hook:

withErrorBoundary HOC:

react-error-boundary不能用做JSX 组件

错误边界无法捕获以下四种场景中产生的错误：

事件处理函数（因为 Error Boundaries 实现的本质是触发更新，但是事件处理函数不在render或者commit阶段，所以无法进行捕获，如果你需要在事件处理器内部捕获错误，可以使用原生的 try / catch 语句）

异步代码（例如 setTimeout 或 requestAnimationFrame 回调函数）

服务端渲染（因为触发更新只能在客户端进行，不能在serve端进行）

它自身抛出来的错误（因为错误抛出要向父节点冒泡寻找 Error Boundaries 处理，无法处理自身产生的错误）

📝 介绍

React官方提供的ErrorBoundary

使用react-error-boundary

错误边界 无法捕获 以下四种场景中产生的错误：

错误边界无法捕获以下四种场景中产生的错误：