问题标签 [react-error-boundary]

在此处输入图像描述我们已经在 ReactJs 中开发了我们的前端。刷新网站的任何页面后，网站显示 HTTPS 错误。

可能的错误是什么以及如何解决？

我试图弄清楚/如果我在另一个带有 route 的页面中出现错误，如何定向到我的主页/results。我能够使用包含在我的组件中的 ErrorBoundary 重定向到我的主页，但路由没有改变，并且立即恢复到相同的错误。（我基本上是想在出现错误时显示主页）

我尝试react-router-dom在 ErrorBoundary 组件中使用并渲染函数，如下所示：

但是再次出现错误，路线保持不变/results（并且主页没有使用 route 呈现/。为什么会发生这种情况？任何人都可以帮助理解原因。谢谢。

我有这个组件：

我正在尝试测试传入不存在的 SVG 的条件，进而呈现<ErrorBoundary />回退。ErrorBoundary 在浏览器中有效，但在我的测试中无效。

这是失败的测试：

我收到此错误消息：

TestingLibraryElementError：无法通过以下方式找到元素：[data-testid="icon-notdef"]”。

如何在我的测试中访问 ErrorBoundary 后备 UI？

编辑

这是<ErrorBoundary />组件的代码：

…这是我在测试中得到的 DOM 的完整错误：

最后，我的 SVG 模拟：

我的应用程序顶部有一个错误边界。它可以工作，我可以将自定义组件作为后备传递给它。但是，Typescript 声称：

'Readonly<{}> & Readonly<{ children?: ReactNode; 类型上不存在属性'fallback' }>' (errorboundary.js)

然后

没有重载匹配此调用。（索引.tsx）

如何解决这个问题？

请注意，我没有使用 react-error-boundary 库。本机错误边界类应该可以完成这项工作。

编辑：完整的工作代码：

我有以下代码：

我的 fetchUsers 方法：

我的 App.js：

当我输入不存在的 graphql 字段（aka nice）时，我希望看到 ErrorBoundary 正在运行 - 但我的反应应用程序崩溃：

为什么错误边界没有捕捉到这个错误？知道我错过了什么吗？

请查看下面出现错误后我得到的组件堆栈。我自己的组件写为“未知”。像我在 fluentui 中使用的其他组件以它们的名称显示，例如“堆栈”。为了能够了解问题的根源，我需要查看那些“未知”的真实姓名。我怎样才能做到这一点？

如果需要，我将提供更多信息。这是我可能从 React 文档中复制的 ErrorBoundary 组件（这个副项目一直在进行中）。

我用它来包装我的应用程序：

这是组件声明的示例。我通常使用功能组件和反应钩子：

我的 Pokemon 应用程序正在使用以下库：React Hook Form、React Query 和 React Error Boundary。

当没有发出请求时，它应该呈现No Pokemon Yet, Please Submit a Pokemon.当发生错误时，Try Again将呈现一个按钮来代替No Pokemon Yet, Please Submit a Pokemon. Try Again单击按钮时，No Pokemon Yet, Please Submit a Pokemon将再次显示并重置搜索输入，用户再次能够进行查询。

但是，我的实现不起作用。最初，No Pokemon Yet, Please Submit a Pokemon在用户提交查询之前不呈现。此外，当我键入没有任何匹配项的查询时，错误边界不会触发以告诉用户发生了什么并允许他们在单击Try Again按钮后重新提交查询。DevTools Network 选项卡给了我一个 404。

React Error Boundary 只会在imgfromPokemonInfo未注释时触发。它呈现Cannot read property 'front_default' of undefined.

请让我知道我做错了什么。

我的应用程序让用户输入查询以向 Pokemon API 发出请求，并呈现响应数据。

如果用户输入了数据库中不存在的查询，它将触发错误边界和一个Try Again按钮，通过重置查询状态并让用户重新提交不同的查询来从错误中恢复。这是预期的行为。

但是，使用我当前的设置，当用户的查询没有任何匹配项时，控制台将显示GET https://pokeapi.co/api/v2/pokemon/foo 404and Uncaught (in promise) Error: Request failed with status code 404。但是，用户没有看到此错误。没有什么可以告诉用户他们的查询没有任何匹配项。我的目标是获得更明确的用户体验，告诉用户他们提交的请求没有任何匹配项，然后单击Try Again按钮重置输入并提交新查询。我相信，这就是错误边界应该做的。

我正在使用以下库：React Query, React Hook Form, React Error Boundary. 有人建议我使用 React Query 的onError回调来记录错误并设置属性useErrorBoundary: true。仍然没有运气。

这是一个演示预期行为的工作示例。https://epic-react-exercises.vercel.app/react/hooks/3

这是我的尝试。请让我知道如何解决这个问题。https://codesandbox.io/s/pokedex-5j1jf

我正在使用支持错误边界的 React 16.3，我想从 API 获取数据，但我不知道在这种情况下是否可以使用错误边界。而且我不知道在这种情况下使用 catch 更好还是使用错误边界。这是一个大的 json 数据，包括图像、价格项目、项目文本以及所有这些我对 React 很陌生的东西，所以提前感谢。

我曾经通过将它包裹在可能引发错误的组件周围react-error-boundary来实现<ErrorBoundary>

这个想法是，当我们error在输入字段中键入时，Form组件应该抛出一个错误，并且错误边界应该捕获它并显示一个带有重试按钮的 UI

但是，如果我error在输入字段中输入，应用程序仍然会崩溃。看看这个截图。

只有点击x关闭后，您才能看到错误边界正在工作，并且您可以点击重试按钮。但我认为错误边界会阻止它崩溃。我是不是实现错了，或者这是 React 中错误边界的预期行为？

现场演示：https ://codesandbox.io/s/error-boundary-bz2ir?file=/src/App.js