反应错误边界

反应错误边界

使用 react-error-boundary 进行反应错误处理

React-error-boundary

H 你好伙计们，
今天，我们正在使用错误边界进行下一步。在上一篇文章中，我们讨论了错误边界，但现在我们将讨论 react-error-boundary。

在继续这个话题之前，你需要阅读最后一篇文章—— 误差边界 ****

问题️‍♂️-

反应 v16 引入了概念 “错误边界” .

React 中的错误边界：

错误边界被引入 反应 16 作为一种方式 抓住 和 处理 我们组件的 UI 部分中的 JavaScript 错误 .

所以基本上，错误边界只处理涉及 React 的代码部分中的错误。

笔记 — 完整理解请看我们的上一篇文章 误差边界

这个解决方案‍ -

反应错误边界 -

开发者 可以使用 反应错误边界 ， 一个 包装 大约 React 的错误边界，到 实施 代码中的错误边界 没有 必须从头开始创建它们。

使用 react-error-boundary，我们可以使用已经提供的 Error Boundary 组件轻松包围我们预期错误的组件，并传递额外的 props 来修改错误边界的行为。

在本文中， 我将介绍如何使用 react-error-boundary 处理 React 应用程序中的错误。让我们来看看图书馆提供的服务。

误差边界 零件

这 误差边界 component 是 react-error-boundary 中可用的主要组件。
它允许我们实现 典型的 用更少的代码反应错误边界。

基本用例 -

渲染我们的 后备组件 如果有 一个错误 （可以通过 react-error-boundary 检测和处理） , 我们简单 裹 我们在 误差边界分量 在组件中 如上所示 和 经过 我们的 后备组件 到 后备组件道具 .

此外，我们还有 fallback Render 属性，这是一个基于渲染属性的 API，允许我们内联指定我们的后备组件。此代码块使用后备渲染道具并显示在上方：

第二个用例 -

此外 ，误差边界有 错误 财产 供应 作为一个 听众 并且是 活性 每当 我们的 错误边界检测 和 响应错误 在其中之一 子组件。

我们可以 选择 将这些错误从这里报告给我们可能使用的任何错误记录服务。

重置错误边界

反应错误边界 还为我们的代码提供了一种从错误边界捕获的错误中恢复的方法。这是使用重置键和 重置错误边界 函数传递给后备组件。

使用直接取自 反应文档 是演示其工作原理的最佳方式：

正如我们所见 来自 上面的代码 ，一个 state Hook 被开发出来，现在用来决定 App 组件是渲染一个错误安全的组件还是一个抛出错误的 Bomb 组件。

此外 ，重置键被发送到错误边界组件。这些重置键控制是否重置错误边界的内部状态。如果在渲染时更改了其中一个重置键，则错误边界的内部状态将被重置。

我们还有 onResetKeysChange 处理程序，当重置键的值更改时触发，导致错误边界的内部状态重置。

使用错误处理程序 钩

另一个很棒的功能 的 反应错误边界 库是它允许开发人员使用错误边界来捕获错误 不会 否则是 被 传统的 反应错误边界 .

这表示 我们可以 现在 利用 错误边界以在 API 请求、事件处理程序和可能发生错误的其他代码部分期间捕获错误。

有两种使用方法 使用错误处理程序 钩：

1. 常量句柄错误 = useErrorHandler() : 那么我们可以调用 处理错误（错误） 并传入错误对象，就像在下面的示例中一样
2. 使用ErrorHandler(错误) ：当我们自己处理错误状态或从另一个 Hook 获取错误状态时，这很有用。

这是我们使用第一种方法捕获 API 请求中的错误的方式：

带错误边界 用作 HOC

反应错误边界 允许 我们要 用途 e 带错误边界 作为一个 高阶成分 (HOC) 管理组件内的问题。

这边走 我们可以专注于开发组件 同时将错误处理留给函数。

此外， 此方法减少了实现组件及其测试所需的代码量。

这是一个例子 反应错误边界文档 关于如何使用它。 ✌️

结论 -

react-error-boundary

反应开发人员 能够 少写代码 并扩大他们的 错误边界能力 捕获其他类型的错误，否则这些错误不会被标准错误边界检测到，方法是使用 反应错误边界 .访问 GitHub 阅读更多关于 反应错误边界 .

感谢阅读！！
请关注我了解更多故事！！

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/37956/08531911