问题标签 [react-error-boundary]

我正在尝试测试错误边界组件，如果有任何错误，错误边界组件将捕获它并显示正确的消息。

我还添加了上面的错误边界组件代码以供参考，我还尝试在编写测试用例时模拟 componentDidCatch 方法，但它对我也不起作用。

上面的代码是Errorboundary.test.js usingErrorsimulator

我正在尝试在引发错误的页面/组件顶部显示带有错误消息的横幅。该错误是由 API 调用触发的，因此我同时使用了来自 react-error-boundary 的钩子和组件。

我可以捕获错误并显示横幅，但我不知道如何将其显示在页面顶部而不是替换整个内容。我认为这就是 fallbackRender 应该做的，但它仍然显示横幅，没有别的。

这是我当前设置的简化版本：

警报横幅.js

应用程序.js

登录.js

我正在尝试改进使用react-query.

我有一个经过<ErrorBoundary>身份验证的用户路由器的组件：

组件包装器如下所示：

这正确地捕获了错误，太棒了！

现在，我想向用户展示两个按钮之一：

• 如果这是第一次看到错误边界，<ButtonInvalidateAuthQueries>那么我可以尝试在不注销用户的情况下重置应用程序。
• 但是，如果失败了，我想向用户显示一个不同的按钮 ，<ButtonResetApp>它会重置所有查询并将用户注销。

我这样设置我的<PageError>组件：

和无效按钮：

但是，这不起作用，因为当用户单击 时<ButtonInvalidateAuthQueries>，所有 auth 组件都会重新渲染，包括错误边界，因此如果再次显示错误边界，则将alreadyTriedItOnce状态初始化为 false。

所以我的问题是：是否有一些聪明的方法来判断是否<ButtonInvalidateAuthQueries>失败，如果是，则显示<ButtonResetApp>？

作为一种解决方法，我可以显示两个按钮，并给用户指示“先单击这个，如果不起作用，请单击另一个”，但我觉得作为一名程序员，我的工作是为用户提供最好的在任何给定时间选择。

我正在尝试使用react-error-boundary NPM 包来捕获使用 React App 的项目中所有组件的错误。我正在从这个库中阅读文档，但我想知道useErrorHandler(error)（react-error-boundary 提供的这个函数）和 react-error-boundarythrow new Error(error)中的（抛出错误的正常方法）有什么不同，或者两者都工作相同？

我的代码示例如下：

我有一个具有以下结构的反应应用程序：

在组件渲染函数中，我抛出异常：

在 ErrorBoundary 我有以下代码：

当我在浏览器中运行此应用程序时，我收到以下错误：

我试过更换

和

但我仍然遇到同样的错误。我正在远程服务器上运行 react 应用程序，并通过我的计算机远程连接到它。你能帮我弄清楚这可能是什么原因吗？

我在获取数据的 react-table 文档中使用了本指南。我现在遇到的一个问题是我试图在我的 Table 组件周围包裹一个错误边界，我收到了这个错误：

当然，当我不基于过滤器和分页获取数据时，这不是问题，但是当我包含 table 组件的 useeffect 方法时，由于 fetchData 方法会改变状态数据，我会得到无限的重新渲染，例如作为列、过滤器和表数据。

带有 ErrorBoundary 的表组件：

表组件代码：

我按照此处所述实现了 React 错误边界：https ://reactjs.org/docs/error-boundaries.html

当函数组件中产生异常时，它按预期工作，但是，今天我得到一个白屏，我只是注意到异常来自组件的 Render 部分。

这是我的 ErrorBoundary 组件：

其实现如下：

子组件：

我想知道我能做些什么来处理这种类型的异常，因为不可避免地会出现这些可能出现错误且白屏不理想的情况。

安装反应后出现此问题

在此处输入图像描述

我对 React.lazy() 功能有疑问。我正在开发一个功能，但我被困在了一个点上。

我的场景

我在哪里有一个设置

1. 使用 React.lazy() 懒惰地加载一堆组件
2. 在 Suspense 上方有一个错误边界包装器。
3. 有一个错误回退 ui 组件 ( ErrorFallbackToast) 以在出现错误时显示。

看起来像这样的东西（模拟）

我有一个场景，需要为特定类型的错误显示回退 ui，而不应为其他错误显示。例如

1. 如果组件内发生任何错误（可能是空指针错误或其他），我需要显示回退 ui。
2. 如果在延迟加载组件期间由于任何 React.lazy() 错误而发生任何错误（即块加载失败或网络错误），我不应该显示 fallbackUI。

问题

到目前为止，我还没有找到任何方法来区分 React 延迟加载期间引发的错误与组件运行时错误。有什么方法可以实现我想要的吗？

我愿意使用多个错误边界，但由于这两个错误都是在安装时抛出的，所以我无法实现我想要的任何东西。任何帮助，将不胜感激。谢谢 ！。

我已经安装了nodejs，然后我尝试使用npx create-react-app my-app 创建react is app，但它只是卡在安装react-dom，cra-templates，然后我也尝试了npm，但它是一样的，请帮助需要学习反应js请帮助我有节点版本v16.13.2。和 npm 版本 8.1.2