Angular - 如何在组件级别实现异常处理

Posted 2023-02-21

【中文标题】Angular - 如何在组件级别实现异常处理

【英文标题】：Angular - How to implement Exception Handling on component level

【发布时间】：2018-07-01 00:41:48

【问题描述】：

在 Angular（Angular 4、5）内部工作时，如果组件引发 Error（TypeError 或 null 或未定义的错误等），整个应用程序会继续中断。

我们如何处理这个问题，在组件级别捕获错误并可能显示一个备用 UI，就像 React16 使用 Error Boundaries 所做的那样。

【问题讨论】：

目前支持覆盖 ErrorHandler 的 global 实现。您可以尝试使用组件装饰器的 providers 属性实例化一个覆盖组件级别默认实现的提供程序对象。

我已经覆盖了 global ErrorHandler。如果可以在组件级别提供它，那就太好了。你确定有可能吗？

对于你想要的东西来说可能太宽泛了，但overriding ExceptionHandler 是你自己的可能性。更详细的用法见this article。

似乎不可能在plnkr.co/edit/oZPbmFoqURuQQLqvpjKw?p=info

【参考方案1】：

我会通过在组件级别处理错误来处理它，并有一个服务来侦听组件或服务级别发生的任何错误。 例如：

从服务中抛出错误 捕获组件中的错误 处理错误，处理它并将带有详细信息的错误事件发送到 ErrorService。 您可以拥有一个应用级组件“errorBannerComponent”，该组件从 ErrorService 获取输入并绘制您的 UI。 只要在 ErrorService 中收到错误，errorBannerComponent 就会在屏幕上显示错误。

希望对你有帮助。

另外默认情况下，Angular 自带了自己的 ErrorHandler 拦截我们应用程序中发生的所有错误并将它们记录到 控制台，防止应用程序崩溃。我们可以通过创建一个实现 ErrorHandler 的新类来修改这个默认行为：

您可以找到更多详细信息和example here:

【讨论】：

如果说ngAfterContentChecked生命周期方法引发undefined错误，如何在组件或服务内部捕获它。

那里的代码中一定有一些意想不到的事情发生。你应该检查你的代码。与其他功能相比，这些生命周期挂钩使用起来相对安全。

你可以在 stackblitz 分享你的代码，我可以看看。

React 的错误边界确保如果在运行时出现前所未有的错误，它不会使应用程序崩溃，用户也会看到一个回退的 UI。在编译/开发时不明显的运行时错误会使 Angular 应用程序崩溃。我想解决这个问题。

默认情况下，Angular自带了自己的ErrorHandler，它会拦截我们应用中发生的所有错误并将它们记录到控制台，防止应用崩溃。这可以通过创建一个实现 ErrorHandler 的新类来修改：您可以在此处阅读更多内容：medium.com/@aleixsuau/error-handling-angular-859d529fa53a