问题标签 [react-error-boundary]

我想创建一个错误边界，以防止我的整个应用程序崩溃，而是通知用户出现问题并让他选择重新加载页面。我的错误边界组件：

我是这样实现的：

然后，在我的 App 组件树的深处，我定义了一个函数来手动触发错误（用于测试/原型设计）：

当我window.kaboom()从控制台调用时，我的错误边界会正确触发。但是，一旦我单击重新加载按钮，而不是刷新页面，相同的错误就会被 cra 的错误覆盖捕获并打印堆栈跟踪：

这是为什么？我希望我的自定义错误边界能够捕捉到错误，而不是让它进一步传播。我怎样才能实现我想要的并正确测试我的解决方案？

我有这个组件。在里面componentDidMount我创建了一个对象并尝试抛出错误。但是 mycomponentDidCatch没有被调用反而破坏了我的页面！

这是我目前关于如何ErrorBoundary在 Typescript 中正确键入 React 类组件的尝试：

这个问题是关于这个ErrorBoundary类组件的类型。我将它分成几部分以使其更容易。

A 部分：道具和状态的类型

我做的对吗？

B 部分：getDerivedStateFromError（错误）

error我应该为参数选择什么类型？返回类型应该是State类型吧？

C部分：componentDidCatch（错误，errorInfo：React.React.ErrorInfo）

error我应该为参数选择什么类型？对于errorInfo，React 确实有一个ErrorInfo看起来是正确的类型。是吗？返回类型应该是void，对吗？

D 部分：render() 方法

返回类型应该是ReactNode？

我们App.js在 React 中有一个文件，我想添加一个包含大多数路由的错误边界。App.js 文件大致如下所示：

我们正在尝试使用 1ErrorBoundary将所有路由包装在<switch>. 请注意，交换机中的最后一个路由是一个NoMatch组件，如果其他路由都没有渲染，则该组件会渲染。如果我尝试渲染ErrorBoundary内部<Switch>，如下所示：

然后由于某种原因，NoMatch组件总是呈现。如果我将NoMatchRoute 向下拖动一行（在 下方</ErrorBoundary>），则NoMatchRoute 永远不会渲染（即使它应该渲染）。另一方面，如果我环绕</ErrorBoundary>整个<Switch>：

..然后 theErrorBoundary和 theNoMatch两者似乎都有效。我的问题是 - 最后一个代码块是在单个 ErrorBoundary 内的 React App.js 文件中包装多个路由的正确方法吗？

编辑：我知道将所有这些路由包装在单个错误边界内需要权衡取舍。对于这种情况，我可以接受这种权衡，并且单个错误边界是设计使然（目前）。

我正在尝试使用 https://github.com/bvaughn/react-error-boundary 它有一个例子

据我了解，参数名称 error 和 resetErrorBoundary 是预定义的，不是吗？

我想传递我的应用程序特定参数，我可以这样做吗

function ErrorFallback({error, resetErrorBoundary, myProp1,myProp2}) ?

如果父组件将它们作为 {...props} 传递，它们会自动填充吗？

当我添加 createCFommonent 时，PostList 组件出现了太多的重新渲染错误。React 限制了渲染的数量以防止无限循环。

createComment Component 这是给出的组件 考虑在树中添加错误边界以自​​定义错误处理行为。

在服务器端渲染期间如何捕获组件或其子组件中的错误？我见过有人使用 try/catch，但显然父母catch没有发现他们孩子的错误。

当使用 react-boundary 并抛出手动错误时，错误边界有效！问题是，在 1-2 秒后，它会呈现错误，就好像没有错误边界一样

这是代码

这是行为：

我已经实现了一个react-error-boundarynpm 库的示例。但它似乎不能正常工作。

错误信息如下所示：

似乎该ErrorFallback组件未呈现。我认为我做错了什么会破坏代码。

我有一个组件故意抛出错误，包裹在错误边界组件中。

它捕获错误并显示消息，但仅显示一瞬间。

这是我的包装组件

和我的错误边界组件

然后我像这样声明组件

当我的组件加载时，它会按应有的方式捕获错误，并在边界组件中接收它。它显示错误消息，但随后立即崩溃

我处理这个错误的方式吗？我知道错误边界是针对 DOM 错误的，但有趣的是它正在捕获错误。

非常感谢任何帮助