反应:了解错误边界的使用

时间:2020-02-27 08:30:15

标签: reactjs error-handling

我对在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;
}

最后,在用例中有什么我应该忘记的事情?

我感谢所有答案!

1 个答案:

答案 0 :(得分:0)

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

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

如果发生错误,它仍然会被抛出到浏览器,因此在开发模式下,应用程序实际上会中断,您将看不到后备UI。

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

You can get more info here.