Angular 如何處理未可知異常錯誤

寫在前面

代碼寫得再好，始終都沒法完整的處理全部可能產生異常，特別是生產環境中的應用，很大一部分是數據來自用戶、遠程，很難保證全部數據都按程序規定的產生。事實上，除非測試人員發現或者客戶報告，不然都沒法得知。所以，將應用產生的未可知異常進而上報是很是重要的環節。

Angular 默認狀況下也提供了全局的異常管理，當發生異常時，會把它扔到 Console 控制檯上。若是你在使用 NG-ZORRO 時，可能常常就會遇到 ICON 未加載的異常消息，這也是異常消息的一種：

core.js:5980 ERROR Error: [@ant-design/icons-angular]:the icon setting-o does not exist or is not registered.
    at IconNotFoundError (ant-design-icons-angular.js:94)
    at MapSubscriber.project (ant-design-icons-angular.js:222)
    at MapSubscriber._next (map.js:29)
    at MapSubscriber.next (Subscriber.js:49)
    at RefCountSubscriber._next (Subscriber.js:72)
    at RefCountSubscriber.next (Subscriber.js:49)
    at Subject.next (Subject.js:39)
    at ConnectableSubscriber._next (Subscriber.js:72)
    at ConnectableSubscriber.next (Subscriber.js:49)
    at CatchSubscriber.notifyNext (innerSubscribe.js:42)

而 Angular 是經過 ErrorHandler 統一管理異常消息，並且只須要覆蓋其中的 handleError 方法並從新處理異常消息便可。

ErrorHandler

首先建立一個 custom-error-handler.ts 文件：

import { ErrorHandler, Injectable } from '@angular/core';

@Injectable()
export class CustomErrorHandler extends ErrorHandler {
  handleError(error: any): void {
    super.handleError(error);
  }
}

CustomErrorHandler 能夠完整的獲取當前用戶數據、當前異常消息對象等，並容許經過 HttpClient 上報給後端。

如下是 NG-ALAIN 的文檔站，因爲是使用 Google Analytics 來分析，只須要將異常消息轉給 onerror 便可：

import { DOCUMENT } from '@angular/common';
import { ErrorHandler, Inject, Injectable } from '@angular/core';

@Injectable()
export class CustomErrorHandler extends ErrorHandler {
  constructor(@Inject(DOCUMENT) private doc: any) {
    super();
  }

  handleError(error: any): void {
    try {
      super.handleError(error);
    } catch (e) {
      this.reportError(e);
    }
    this.reportError(error);
  }

  private reportError(error: string | Error): void {
    const win = this.doc.defaultView as any;
    if (win && win.onerror) {
      if (typeof error === 'string') {
        win.onerror(error);
      } else {
        win.onerror(error.message, undefined, undefined, undefined, error);
      }
    }
  }
}

最後，在 AppModule 模塊內註冊 CustomErrorHandler：

@NgModule({
    providers: [
        { provide: ErrorHandler, useClass: CustomErrorHandler },
    ]
})
export class AppModule { }

結論

事實上還有一項很是重要的工做，生產環境中都是打包壓縮事後的，換言之所產生的異常消息也是沒法與實際代碼行數相同的數字，這就須要 SourceMap 的支持，固然正常的生產環境是不會發布這份文件的，因此若是想要獲得正確的行列數，仍是須要藉助一層中間層，在後端利用 source-map 模塊來解析出真正的行列數值。

Angular 的依賴注入（DI）系統能夠使咱們快速替換一些 Angular 內置模塊，從而實如今不修改業務層面時快速解決一些特殊需求。

（完）