reactjs - React：理解错误边界的使用

Question

我有一些关于在 React 16 中捕获错误的问题。

目前，当我们为应用程序创建新版本时，我们会处理 ChunkLoadErrors。所以我想实现一个包装整个应用程序的错误边界。现在出现了几个问题：

似乎这些错误并没有像try / catch声明那样真正“被捕获”。这意味着，如果出现错误，它仍然会被抛出到浏览器，因此在开发模式下，应用程序实际上会中断并且您看不到回退 UI。这是否意味着像 Sentry 这样的服务也会收到有关这些错误的通知，即使它们已被处理？

第二：将整个应用程序包装在错误边界中并过滤掉特定错误是否可能是不好的做法？如果是这样，是否有更好的解决方案？我正在考虑在我的错误边界 (TS) 内执行以下操作：

static getDerivedStateFromError(error: Error) {
if (error.name === "ChunkLoadError") {
    // Catching ChunkLoadError
    return { hasError: true, theError: error };
}
throw error;
}

最后，在我的用例中我应该注意什么我可能会忘记吗？

我感谢所有的答案！

标签： reactjserror-handling

Answer 1

包裹整个应用程序的错误边界

坦率地说，这不是一个好主意。它旨在捕获组件级别的错误，以便其他组件可以顺利运行。假设您有 1000 种产品，如果仅第 99 种产品出现问题，则应在内部处理，其他产品不应受到影响。

如果出现错误，它仍然会被抛出到浏览器，因此在开发模式下，应用程序实际上会中断并且您看不到回退 UI。

错误跟踪在开发模式下具有最高优先级，但如果您已将错误边界实现到组件然后发生错误，那么您可以在浏览器中看到错误跟踪。然而，您可以X在右上角看到一个删除跟踪块以查看回退 UI。

你可以在这里获得更多信息。