使用Raygun來自動追蹤AngularJS中的異常

　　這篇文章主要介紹了使用Raygun來自動追蹤AngularJS中的異常,AngularJS是一款高人氣的JavaScript庫,需要的朋友可以參考下

　　Angular.js取得的巨大成就之一是實用的異常拋出，因為異常資訊經常能夠準確的表明你的代碼為什麼崩潰了。運行於世界各地的眾多瀏覽器的大型用戶端web應用會面臨異常丟失的問題，而捕獲它就有可能修複 bug並贏得使用者。

　　當處理跨瀏覽器和裝置的問題時，接收這些異常資訊是很重要的，因為你的應用可能在你的開發機器上運行得正確可靠，但在你的使用者的瀏覽器上卻是另一番情境。

　　其解決方案是需要一個自動異常Tracing Service，而Raygun通過接收你的Angular web應用拋出的所有異常但不需要你做任何事，從而簡化了這項工作。它的設定真的很快--只需要按照以下步驟將Raygun hook到你的應用就可以了。

　　安裝

　　首先，下載小巧的Raygun4JS指令碼，並把它添加到你的項目中。有3個途徑獲得：

　　通過Bower

　　代碼如下:

　　bower install raygun4js

　　從NuGet獲得——在Visual Studio中，開啟包管理器控制台然後輸入：

　　代碼如下:

　　Install-Package raygun4js

　　手動下載 – 點擊此處下載dev版 或者壓縮過的版本

　　配置

　　接下來，引用這個指令碼。如果你使用靜態HTML，將 添加到頁面裡面或添加到你的模組載入器中。

　　最後，在你的Angular主邏輯執行之前調用下面的代碼來設定Raygun4JS：

 

?

1	Raygun.init('YOUR_API_KEY').attach();

        你可以為每一個用Raygun建立的app產生一個API key，你可以在你的Raygun dashboard 中訪問他——你有30天免費試用時間來測試它。
         在Angular中捕獲異常

        至少有兩種方法將未處理的異常注射到Angular.js的模組中，通過使用decorator 或 factory。這兩種方式會為你提供$exceptionHandler的具體實現，我們上面所提到的Raygun4JS會將該實現發送給Raygun。

        使用一個裝飾器

        裝飾器模式因其不會覆蓋掉原有的行為，所以很適合用來將行為注入到任意的服務中，以確保在其它所期望的特性中分離關注點，它也是記錄日誌和處理異常的理想方式. 在Angular.js中它可以使用在 $provide 服務中，我們將用來實現我們自己的

?

1 2 3 4 5 6 7 8 9 10

$exceptionHandler 函數:   app.config(function ($provide) { $provide.decorator("$exceptionHandler", ['$delegate', function($delegate) { return function (exception, cause) { Raygun.send(exception); $delegate(exception, cause); } }]) });

        $delegate 是異常處理器的實體，我們會調用它來獲得輸出到控制台的原始行為.

        你也可以按照自己的需要建立足夠多的其它服務:

?

1 2 3 4 5 6 7

$provide.decorator("$exceptionHandler", ['$delegate', '$log', function($delegate, $log) { return function (exception, cause) { $log.debug('Sending to Raygun'); Raygun.send(exception); $delegate(exception, cause); } }])

        依賴於所擷取到的自Angular邏輯中拋出的錯誤是什麼類型, cause 參數得以被填充. 如果一個異常發生在一個工廠或者服務中，你可能會得到那個參數可以的範圍, 你可以將其作為自訂資料，通過替換掉上面的Raygun.send調用，附帶任何你需要的其它東西，再傳送到Raygun:

?

1	Raygun.send(exception, { cause: cause });

使用一個工廠

        快速的將Raygun放到你的應用的異常處理器中的方法就是使用一個工廠, 儘管它會移除原來的控制台日誌，而如果你想要保留此項功能的話，就會需要儲存原來的值並再一次調用它.

?

1 2 3 4 5

app.factory('$exceptionHandler', function () { return function (exception) { Raygun.send(exception); } });

手動發送錯誤

Raygun4JS 也歸於了你任意時間很容易的手動跟蹤錯誤的能力:

?

1	Raygun.send(new Error('my custom error'));

　　供應器上還有一堆其它使用的工具可以利用，包括獨特的使用者跟蹤，版本跟蹤，標籤及其它 – 這裡的文檔可以查看 的所有相信資訊.

　　Raygun 甚至可以在你的Angular應用中跟蹤jQuery 的Ajax錯誤even tracks jQuery Ajax errors ，而無需你的做任何額外的事情, 因此你將得到開箱即用的全面照顧.

　　準備好使用Raygun了嗎?

 

　　如之前所提及的，有一個 30天免費的無信用卡支付的版本可用, 因此你可以擷取一個來看看你的應用是否真的是在為你的使用者運作的. 如果就本文你有任何的疑問，請將它們留在下面的評論中。