杏耀註冊平台官網_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 內置模塊,從而實現在不修改業務層面時快速解決一些特殊需求。
站長推薦
1.雲服務推薦: 國內主流雲服務商,各類雲產品的最新活動,優惠券領取。地址:阿里雲騰訊雲華為雲
2.廣告聯盟: 整理了目前主流的廣告聯盟平台,如果你有流量,可以作為參考選擇適合你的平台點擊進入
鏈接: http://www.fly63.com/article/detial/10085