用VSCode開發一個asp.net core 2.0+angular 5項目(4): Angular5全局錯誤處理

第一部分: http://www.cnblogs.com/cgzl/p/8478993.html

第二部分: http://www.cnblogs.com/cgzl/p/8481825.html

第三部分: https://www.cnblogs.com/cgzl/p/8525541.html

這篇文章將介紹angular 5的全局錯誤處理.

需要使用到代碼: https://pan.baidu.com/s/1F0KjbwVE8_Tzfwy69Alp-A

angular 5 全局錯誤處理

參考文檔: https://angular.io/api/core/ErrorHandler

首先按照文檔在客戶端項目建立app.error-handler.ts 文件:

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

export class AppErrorHandler implements ErrorHandler {
    handleError(error: any): void {
        console.log('ERROR Occurred.');
    }
}

這里, 我們只寫log.

然后在app.module里面注冊:

providers: [
    TvNetworkService,
    { provide: ErrorHandler, useClass: AppErrorHandler }
  ],

然后把tv-network-list.component.ts里面到一個錯誤處理刪除掉:

然后在后端到Controller里面拋一個異常:

然后我們試一下:

可以看到, 這個全局錯誤處理器正常到工作了.

先別急, 讓我們在errorhandler里面使用toastr試試.

app.error-handler.ts:

import { ErrorHandler } from '@angular/core';
import { ToastrService } from 'ngx-toastr';

export class AppErrorHandler implements ErrorHandler {

    constructor(private toastr: ToastrService) { }

    handleError(error: any): void {
        // console.log('ERROR Occurred.');
        this.toastr.error('發生了錯誤');
    }
}

 

而這時回到瀏覽器之后, 發生了錯誤:

之所以發生這個錯誤, 是因為AppErrorHandler在angular引入Toastr模塊之前就初始化了.

我們可以這樣處理:

import { ErrorHandler, Injectable, Injector, Inject } from '@angular/core';
import { ToastrService, Toast } from 'ngx-toastr';

@Injectable()
export class AppErrorHandler implements ErrorHandler {

    constructor(private injector: Injector) { }

    private get toastr(): ToastrService { return this.injector.get(ToastrService); }

    handleError(error: any): void {
        this.toastr.error('發生了錯誤');
    }
}

使用Injector來手動注入ToastrService.

回到瀏覽器:

並沒有彈出錯誤信息!!!!, 但是來回切換菜單后, 開始顯示錯誤信息了, 貌似有點遲鈍.

這是什么原因呢? 首先, 我們得了解以下這個東西:

Zone

首先到首先, 需要了解以下execution context, 程序執行到上下文, 但是這些東西到定義看了之后可能會讓人迷糊. 所以還是先看這段代碼吧:

const Zone = {
  run: (callback) => {
    if (this.beforeTask) {
      this.beforeTask();
    }
    callback();
    if (this.afterTask) {
      this.afterTask();
    }
  }
};

Zone.beforeTask = () => {
  console.log('Before Task.');
};
Zone.afterTask = () => {
  console.log('After Task.');
};
Zone.run(() => {
  console.log('Running...');
});

 

就是定義一個Zone, 它到run方法可以執行某個回調函數, 回調函數到前后還可以有一些預定義的函數, 如果它們存在就會被執行. 通過定義這些函數的內容, 我們就可以在執行run的回調前后添加自定義邏輯了.

回到Angular, angular的變化檢測(Change Detection)功能就用到了這些東西.

比如angular的一個component有一個click事件, click()方法里更新了某些屬性的值, 這個時候angular就需要進行變化檢測, 如果真的發生了變化, 那么angular 就會更新dom, 這樣我們就能看見頁面的變化了. Angular用了這個猴子補丁, 使之運行在Zone里面, 當點擊按鈕的時候, 這段代碼總是在Zone里面執行, 在執行完click處理方法之后, angular會執行變化檢測動作.

angular應該是這樣來進行猴子補丁的:

const Zone = {
  run: (callback) => {
    if (this.beforeTask) {
      this.beforeTask();
    }
    callback();
    if (this.afterTask) {
      this.afterTask();
    }
  }
};

Zone.beforeTask = () => {
  console.log('Before Task.');
};
Zone.afterTask = () => {
  console.log('After Task.');
};
Zone.run(() => {
  console.log('Running...');
});

var _setTimeout = setTimeout; setTimeout = (callback, timeout) => { Zone.run(() => { _setTimeout(callback, timeout); }); }; click(() => { console.log('設置Timeout'); });

由於這個是異步的, 所以打印到控制台到順序可能是: Before Task, After Task, 設置Timeout.

js運行時里, 有一個信息隊列. 任何時候出現一個異步操作, 隊列里就會推進去一條信息, js運行時會訓話這個隊列, 一個個把消息推出隊列, 然后調用這個消息到回調函數. 對於這個例子來說就是setTimeout().

所以就出現了Zone.js這個庫.

Zone.js就是一個執行的上下文, 它可以在不同的異步操作之間進行持久性傳遞.

Angular就使用了這個庫, 在它之上建立了ngZone這個模塊. 就這樣angular在發生異步操作后進行到了變化檢測.

瀏覽器里面主要有這幾種異步操作: dom事件, ajax請求, 定時回調之類的.

回到項目里的app.error-handler.ts:

這句話呢就跑出了angular zone的范圍...

所以當錯誤發生的時候, toastr的error方法被調用了(狀態改變了), 但是angular並不知道這個變化, 所以toastr通知沒有顯示.

那如何解決呢?

使用ngZone:

import { ErrorHandler, Injectable, Injector, Inject, NgZone } from '@angular/core';
import { ToastrService, Toast } from 'ngx-toastr';

@Injectable()
export class AppErrorHandler implements ErrorHandler {

    constructor(
        private injector: Injector,
        private ngZone: NgZone
    ) { }

    private get toastr(): ToastrService {
        return this.injector.get(ToastrService);
    }

    handleError(error: any): void {
        this.ngZone.run(() => { this.toastr.error('發生了錯誤'); });
    }
}

下面試試頁面:

這次沒有任何問題了.

Logging Errors 記錄錯誤 

您可以自己寫一個后台api來記錄日志, 但是這里我介紹一個專門做logging的雲服務, sentry.io. https://sentry.io/

首先請您自己注冊賬戶. 

然后創建一個項目, 選擇angular:

然后點擊下面按鈕Create Project.

然后它給出了安裝和配置的說明:

首先執行命令安裝.

然后, 配置:

import * as Raven from 'raven-js';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ErrorHandler } from '@angular/core';
import { AppComponent } from './app.component';

Raven .config('https://[e-mail]/301095') .install(); 
@NgModule({
  imports: [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ],
  providers: [ { provide: ErrorHandler, useClass: AppErrorHandler } ]
})
export class AppModule { }

按照說明進行配置, 我們做一些調整, 這里紅色部分是每個用戶都不一樣都.

最后修改app.error-handler.ts:

import { ErrorHandler, Injectable, Injector, Inject, NgZone } from '@angular/core';
import { ToastrService, Toast } from 'ngx-toastr';
import * as Raven from 'raven-js';

@Injectable()
export class AppErrorHandler implements ErrorHandler {

    constructor(
        private injector: Injector,
        private ngZone: NgZone
    ) { }

    private get toastr(): ToastrService {
        return this.injector.get(ToastrService);
    }

    handleError(error: any): void {
        Raven.captureException(error); this.ngZone.run(() => {
            this.toastr.error('發生了錯誤');
        });
    }
}

回到瀏覽器的錯誤頁面, 觸發錯誤后, 大約幾分鍾后, 來到sentry.io網站查看:

 

今天先寫到這, 明天后天寫以下 angular5上傳文件到asp.net core web api.