用VSCode開發一個asp.net core 2.0+angular 5專案(4): Angular5全域性錯誤處理

solenovex發表於2018-03-09
VSCodeASP.NETAngular

第一部分: 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://fa66d9390ab04c7f8e8c82ad0613fb4e@sentry.io/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.

相關文章