如何全局处理错误？答案

【问题标题】：How to handle errors globally?如何全局处理错误？
【发布时间】：2017-06-02 08:39:42
【问题描述】：

我需要在 Angular 4 应用程序中实现全局错误处理。 ErrorHandler 机制适用于某些情况，但并非适用于所有情况。

例如，当我们遇到一些严重错误时，例如缺少模板或其他东西，ErrorHandler 会忽略它。当我为模板使用错误的 URL 时，我收到 zone.js 错误：

zone.js?fad3:567 未处理的承诺拒绝：模板解析错误： 'my-app' 不是已知元素：

zone.js 不会抛出异常，只是控制台错误，所以window.onerror 也不起作用。

错误处理程序：

@Injectable()
export class CommonErrorHandler implements ErrorHandler {
    constructor(private injector: Injector) {
    }


    public handleError(error: any): void {
        console.log("error", error);
    }
}

在app.module注册：

 providers: [
        AuthGuard,
        { provide: ErrorHandler, useClass: CommonErrorHandler }
}

更新： Plnkr

【问题讨论】：

标签： angular

【解决方案1】：

Angular 使用zone.js 来解析未处理的异常和拒绝： https://github.com/angular/zone.js/blob/master/dist/zone.js#L633

您需要使用NgZone 服务来解析这些错误： https://angular.io/docs/ts/latest/api/core/index/NgZone-class.html

NgZone API 被标记为“实验性”，但我不知道它与现实有何关系。大量广泛使用的 API 仍处于“实验阶段”。

例子：

import { NgZone } from '@angular/core';

@Component(...)
class AppComponent {
  constructor(protected zone: NgZone) {

    this.zone.onError.subscribe((e) => {
      console.log(e);
    });

    setTimeout(() => {
      throw new Error();
    }, 1000);

    setTimeout(() => {
      Promise.reject('unhandled');
    }, 1000);
  }
}

这样您就可以看到这两个错误。

@EDIT：我发现这个https://angular-2-training-book.rangle.io/handout/zones/ 非常有用。

【讨论】：

谢谢。但它不起作用。看起来像 AppComponent 初始化之前的角度中断。
为此plnkr.co/edit/FQxR45n7oBYuexsMNWPl?p=info创建了plunker

【解决方案2】：

接受的解决方案对我不起作用，因为我的错误出现在初始化时（例如，未在模块中声明的组件）并且由于我有加载动画，所以我想停止它。

相反，我在 try/catch 中用 try catch 封装了 bootstrapModule 代码

  try {
    platformBrowserDynamic()
      .bootstrapModule(AppModule)
      .catch(err => {
        // Handle runtime error in angular
      });
  } catch (err) {
    // handle angular loading error here. I do that by hidding the animation div and showing the error div

    var node = document.getElementById('app-loading-error');
    if (node) {
      node.style.display = 'inherit';
    }

    var node = document.getElementById('app-loading-pending');
    if (node) {
      node.style.display = 'none';
    }

    throw err; // pass it back to the console
  }

【讨论】：