這篇文章給大家介紹怎么在Angular中對未知異常錯誤進(jìn)行處理，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、西鄉(xiāng)塘網(wǎng)絡(luò)推廣、成都微信小程序、西鄉(xiāng)塘網(wǎng)絡(luò)營銷、西鄉(xiāng)塘企業(yè)策劃、西鄉(xiāng)塘品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們大的嘉獎；成都創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供西鄉(xiāng)塘建站搭建服務(wù)，24小時服務(wù)熱線：13518219792，官方網(wǎng)址：www.cdcxhl.com

Angular 默認(rèn)情況下也提供了全局的異常管理，當(dāng)發(fā)生異常時，會把它扔到 Console 控制臺上。如果你在使用 NG-ZORRO 時，可能經(jīng)常就會遇到 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 統(tǒng)一管理異常消息，而且只需要覆蓋其中的 handleError 方法并重新處理異常消息即可。

ErrorHandler

首先創(chuàng)建一個 custom-error-handler.ts 文件：

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

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

CustomErrorHandler 可以完整的獲取當(dāng)前用戶數(shù)據(jù)、當(dāng)前異常消息對象等，并允許通過 HttpClient 上報給后端。

以下是 NG-ALAIN 的文檔站，由于是使用 Google Analytics 來分析，只需要將異常消息轉(zhuǎn)給 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 模塊內(nèi)注冊 CustomErrorHandler ：

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

結(jié)論

事實上還有一項非常重要的工作，生產(chǎn)環(huán)境中都是打包壓縮過后的，換言之所產(chǎn)生的異常消息也是無法與實際代碼行數(shù)相同的數(shù)字，這就需要 SourceMap 的支持，當(dāng)然正常的生產(chǎn)環(huán)境是不會發(fā)布這份文件的，所以如果想要得到正確的行列數(shù)，還是需要借助一層中間層，在后端利用 source-map 模塊來解析出真正的行列數(shù)值。

Angular 的依賴注入（DI）系統(tǒng)可以使我們快速替換一些 Angular 內(nèi)置模塊，從而實現(xiàn)在不修改業(yè)務(wù)層面時快速解決一些特殊需求。

關(guān)于怎么在Angular中對未知異常錯誤進(jìn)行處理就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

分享名稱：怎么在Angular中對未知異常錯誤進(jìn)行處理-創(chuàng)新互聯(lián)
路徑分享：http://weahome.cn/article/deipgi.html