[ASP.NET] TypeScript + AngularJs 自訂 ErrorHandlerProvider

介紹使用 TypeScript + AngularJs 於 ASP.NET MVC 整合的自訂 ErrorHandlerProvider 撰寫方式

前言


如果是在前端 JavaScript 撰寫的很多的情況下,或許你會想要能夠自訂錯誤的流程,讓 Script 發生的錯誤也能夠記錄下來,這時候你就可以透過 AngularJs 所提供的 $exceptionHandler 來進行錯誤處理。

 

自訂 Angular ExceptionHandler Provider


自訂 ExceptionHandler 其實也不複雜,只需要在 Angular 初始化的時候將自訂的錯誤處理註冊在 $exceptionHandler,你可以使用 Factroy 或 Provider 的方式進行,在這個範例中我將使用 Provider 的方式,首先先建立一個 ExceptionHandlerProvider Class 並且需要 implements ng.IExceptionHandlerProvider,如下

/**
 * 自訂錯誤處理
 */
export class ExceptionHandlerProvider implements ng.IExceptionHandlerProvider {

}

接著在 Class 內加入 $name 代表自訂的 Provider 名稱,因為我是要自訂錯誤處理所以這裡的名稱將會是 $exceptionHandler,而 implements ng.IExceptionHandlerProvider 時還必須要實作一個 mode(mode: string): void 方法,如下

/**
 * 自訂錯誤處理
 */
export class ExceptionHandlerProvider implements ng.IExceptionHandlerProvider {
    static $name = "$exceptionHandler";

    public mode(mode: string): void {
        // set mode is log or rethorw
    }

}

在 Angular Provider 中必須要提供一個 $get() 函式來取得物件,所以在此就需要增加一個 $get 方法,如下

/**
 * 自訂錯誤處理
 */
export class ExceptionHandlerProvider implements ng.IExceptionHandlerProvider {
    static $name = "$exceptionHandler";

    public mode(mode: string): void {
        // set mode is log or rethorw
    }

    public $get($injector) {
        return (exception, cause) => {
            console.error(exception);
        };
    }
}

在以上的程式碼中是將任何沒有被捕捉到的 Exception 透過 console.error() 列印出來。

 

結語


目前 ExceptionHandlerProvider 的範例先撰寫到這樣,之後會再進行補充。到時候將會跟我另一篇文章 使用 Exceptionless 作為 Log Server 搭配 NLog 記錄系統訊息 進行整合。

 

 


以上文章敘述如有錯誤及觀念不正確,請不吝嗇指教
如有侵權內容也請您與我反應~謝謝您 :)