Angular.js取得的巨大成就之一是實(shí)用的異常拋出，因?yàn)楫惓Ｐ畔⒔?jīng)常能夠準(zhǔn)確的表明你的代碼為什么崩潰了。運(yùn)行于世界各地的眾多瀏覽器的大型客戶端web應(yīng)用會(huì)面臨異常丟失的問(wèn)題，而捕獲它就有可能修復(fù) bug并贏得用戶。

當(dāng)處理跨瀏覽器和設(shè)備的問(wèn)題時(shí)，接收這些異常信息是很重要的，因?yàn)槟愕膽?yīng)用可能在你的開(kāi)發(fā)機(jī)器上運(yùn)行得正確可靠，但在你的用戶的瀏覽器上卻是另一番場(chǎng)景。

其解決方案是需要一個(gè)自動(dòng)異常跟蹤服務(wù)，而Raygun通過(guò)接收你的Angular web應(yīng)用拋出的所有異常但不需要你做任何事，從而簡(jiǎn)化了這項(xiàng)工作。它的設(shè)置真的很快－－只需要按照以下步驟將Raygun hook到你的應(yīng)用就可以了。

安裝

首先，下載小巧的Raygun4JS腳本，并把它添加到你的項(xiàng)目中。有3個(gè)途徑獲得：

通過(guò)Bower
 

從NuGet獲得——在Visual Studio中，打開(kāi)包管理器控制臺(tái)然后輸入：
 

手動(dòng)下載 – 點(diǎn)擊此處下載dev版 或者壓縮過(guò)的版本
配置

接下來(lái)，引用這個(gè)腳本。如果你使用靜態(tài)的HTML，將<script src="js/raygun.js" type="text/javascript"></script>添加到頁(yè)面里面或添加到你的模塊加載器中。

最后，在你的Angular主邏輯執(zhí)行之前調(diào)用下面的代碼來(lái)設(shè)置Raygun4JS：
 

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

你可以為每一個(gè)用Raygun創(chuàng)建的app生成一個(gè)API key，你可以在你的Raygun dashboard 中訪問(wèn)他——你有30天免費(fèi)試用時(shí)間來(lái)測(cè)試它。
在Angular中捕獲異常

至少有兩種方法將未處理的異常注射到Angular.js的模塊中，通過(guò)使用decorator 或 factory。這兩種方式會(huì)為你提供$exceptionHandler的具體實(shí)現(xiàn)，我們上面所提到的Raygun4JS會(huì)將該實(shí)現(xiàn)發(fā)送給Raygun。

使用一個(gè)裝飾器

裝飾器模式因其不會(huì)覆蓋掉原有的行為，所以很適合用來(lái)將行為注入到任意的服務(wù)中，以確保在其它所期望的特性中分離關(guān)注點(diǎn)，它也是記錄日志和處理異常的理想方式. 在Angular.js中它可以使用在 $provide 服務(wù)中，我們將用來(lái)實(shí)現(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 是異常處理器的實(shí)體，我們會(huì)調(diào)用它來(lái)獲得輸出到控制臺(tái)的原始行為.

你也可以按照自己的需要?jiǎng)?chuàng)建足夠多的其它服務(wù):
 

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

依賴于所獲取到的自Angular邏輯中拋出的錯(cuò)誤是什么類型, cause 參數(shù)得以被填充. 如果一個(gè)異常發(fā)生在一個(gè)工廠或者服務(wù)中，你可能會(huì)得到那個(gè)參數(shù)可以的范圍, 你可以將其作為自定義數(shù)據(jù)，通過(guò)替換掉上面的Raygun.send調(diào)用，附帶任何你需要的其它東西，再傳送到Raygun:
 

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

使用一個(gè)工廠

快速的將Raygun放到你的應(yīng)用的異常處理器中的方法就是使用一個(gè)工廠, 盡管它會(huì)移除原來(lái)的控制臺(tái)日志，而如果你想要保留此項(xiàng)功能的話，就會(huì)需要存儲(chǔ)原來(lái)的值并再一次調(diào)用它.
 

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

手動(dòng)發(fā)送錯(cuò)誤

Raygun4JS 也歸于了你任意時(shí)間很容易的手動(dòng)跟蹤錯(cuò)誤的能力:
 

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

供應(yīng)器上還有一堆其它使用的工具可以利用，包括獨(dú)特的用戶跟蹤，版本跟蹤，標(biāo)簽及其它 – 這里的文檔可以查看 的所有相信信息.

Raygun 甚至可以在你的Angular應(yīng)用中跟蹤jQuery 的Ajax錯(cuò)誤even tracks jQuery Ajax errors ，而無(wú)需你的做任何額外的事情, 因此你將得到開(kāi)箱即用的全面照顧.
準(zhǔn)備好使用Raygun了嗎?

如之前所提及的，有一個(gè) 30天免費(fèi)的無(wú)信用卡支付的版本可用, 因此你可以獲取一個(gè)來(lái)看看你的應(yīng)用是否真的是在為你的用戶運(yùn)作的. 如果就本文你有任何的疑問(wèn)，請(qǐng)將它們留在下面的評(píng)論中。

最新評(píng)論