使用Raygun來自動追蹤AngularJS中的異常
Angular.js取得的巨大成就之一是實用的異常拋出,因為異常信息經(jīng)常能夠準確的表明你的代碼為什么崩潰了。運行于世界各地的眾多瀏覽器的大型客戶端web應用會面臨異常丟失的問題,而捕獲它就有可能修復 bug并贏得用戶。
當處理跨瀏覽器和設備的問題時,接收這些異常信息是很重要的,因為你的應用可能在你的開發(fā)機器上運行得正確可靠,但在你的用戶的瀏覽器上卻是另一番場景。
其解決方案是需要一個自動異常跟蹤服務,而Raygun通過接收你的Angular web應用拋出的所有異常但不需要你做任何事,從而簡化了這項工作。它的設置真的很快--只需要按照以下步驟將Raygun hook到你的應用就可以了。
安裝
首先,下載小巧的Raygun4JS腳本,并把它添加到你的項目中。有3個途徑獲得:
通過Bower
從NuGet獲得——在Visual Studio中,打開包管理器控制臺然后輸入:
手動下載 – 點擊此處下載dev版 或者壓縮過的版本
配置
接下來,引用這個腳本。如果你使用靜態(tài)的HTML,將<script src="js/raygun.js" type="text/javascript"></script>添加到頁面里面或添加到你的模塊加載器中。
最后,在你的Angular主邏輯執(zhí)行之前調(diào)用下面的代碼來設置Raygun4JS:
Raygun.init('YOUR_API_KEY').attach();
你可以為每一個用Raygun創(chuàng)建的app生成一個API key,你可以在你的Raygun dashboard 中訪問他——你有30天免費試用時間來測試它。
在Angular中捕獲異常
至少有兩種方法將未處理的異常注射到Angular.js的模塊中,通過使用decorator 或 factory。這兩種方式會為你提供$exceptionHandler的具體實現(xiàn),我們上面所提到的Raygun4JS會將該實現(xiàn)發(fā)送給Raygun。
使用一個裝飾器
裝飾器模式因其不會覆蓋掉原有的行為,所以很適合用來將行為注入到任意的服務中,以確保在其它所期望的特性中分離關注點,它也是記錄日志和處理異常的理想方式. 在Angular.js中它可以使用在 $provide 服務中,我們將用來實現(xiàn)我們自己的
$exceptionHandler 函數(shù): app.config(function ($provide) { $provide.decorator("$exceptionHandler", ['$delegate', function($delegate) { return function (exception, cause) { Raygun.send(exception); $delegate(exception, cause); } }]) });
$delegate 是異常處理器的實體,我們會調(diào)用它來獲得輸出到控制臺的原始行為.
你也可以按照自己的需要創(chuàng)建足夠多的其它服務:
$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 參數(shù)得以被填充. 如果一個異常發(fā)生在一個工廠或者服務中,你可能會得到那個參數(shù)可以的范圍, 你可以將其作為自定義數(shù)據(jù),通過替換掉上面的Raygun.send調(diào)用,附帶任何你需要的其它東西,再傳送到Raygun:
Raygun.send(exception, { cause: cause });
使用一個工廠
快速的將Raygun放到你的應用的異常處理器中的方法就是使用一個工廠, 盡管它會移除原來的控制臺日志,而如果你想要保留此項功能的話,就會需要存儲原來的值并再一次調(diào)用它.
app.factory('$exceptionHandler', function () { return function (exception) { Raygun.send(exception); } });
手動發(fā)送錯誤
Raygun4JS 也歸于了你任意時間很容易的手動跟蹤錯誤的能力:
Raygun.send(new Error('my custom error'));
供應器上還有一堆其它使用的工具可以利用,包括獨特的用戶跟蹤,版本跟蹤,標簽及其它 – 這里的文檔可以查看 的所有相信信息.
Raygun 甚至可以在你的Angular應用中跟蹤jQuery 的Ajax錯誤even tracks jQuery Ajax errors ,而無需你的做任何額外的事情, 因此你將得到開箱即用的全面照顧.
準備好使用Raygun了嗎?
如之前所提及的,有一個 30天免費的無信用卡支付的版本可用, 因此你可以獲取一個來看看你的應用是否真的是在為你的用戶運作的. 如果就本文你有任何的疑問,請將它們留在下面的評論中。
相關文章
Angularjs過濾器實現(xiàn)動態(tài)搜索與排序功能示例
這篇文章主要介紹了Angularjs過濾器實現(xiàn)動態(tài)搜索與排序功能,涉及AngularJS過濾器相關搜索、查詢、排序操作技巧,需要的朋友可以參考下2017-12-12詳解在AngularJS的controller外部直接獲取$scope
本篇文章主要介紹了詳解在AngularJS的controller外部直接獲取$scope ,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06python爬取安居客二手房網(wǎng)站數(shù)據(jù)(實例講解)
下面小編就為大家?guī)硪黄猵ython爬取安居客二手房網(wǎng)站數(shù)據(jù)(實例講解)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-10-10Angular動態(tài)綁定樣式及改變UI框架樣式的方法小結(jié)
AngularJS 是一個 JavaScript 框架。它是一個以 JavaScript 編寫的庫。這篇文章主要介紹了Angular動態(tài)綁定樣式及改變UI框架樣式的方法小結(jié),需要的朋友可以參考下2018-09-09使用Angular CLI生成 Angular 5項目教程詳解
這篇文章主要介紹了使用Angular CLI生成 Angular 5項目的教程詳解 ,需要的朋友可以參考下2018-03-03