reactjs - react : Understanding the use of Error Boundaries

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;
}

最后，在用例中有什么我应该忘记的事情吗？

我感谢所有答案!

Answer 1

Error Boundary that wraps our whole application

坦白地说，这不是一个好主意。旨在捕获组件级别的错误，以便其他组件可以平稳运行。假设您有1000种产品，并且如果只有第99种产品存在问题，则应在该产品之内进行处理，而其他产品不应受到影响。

if an Error would arise, it still gets thrown to the Browser, therefore in development mode, the application actually breaks and you can't see the fallback UI.

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

You can get more info here.