2014-03-03 57 views
1

這是我想什麼:有一個模塊或服務,或什麼的,它提供了全局錯誤處理程序爲:在角表達合理的做法對全球錯誤處理的角度

  1. 錯誤(所以一切由$exceptionHandler服務抓)的HTTP請求(所以一切都在requestError截獲
  2. 錯誤和responseError作爲defined by an $httpProvider
  3. 錯誤觸發window.onerror(我相信這將包括錯誤發生的「外」角度,例如,從獨立第三方PA RTY庫)

理想情況下,我想捕獲所有這些錯誤,讓他們提供給我包含在HTML角的應用程序,或許通過將它們添加到$rootScope。但是,我迄今爲止完成的微薄嘗試已經證明有些複雜,並不完全成功。

這裏有一個備用,低於理想,但似乎功能的方法,我得到工作:外面角,設置一個全球性的處理W/window.onerror;那麼當遇到上述第1項和第2項中的錯誤時,實際上會出現throw錯誤(導致所有內容都使其成爲window.onerror)。

我當然不會爲這個解決方案感到驕傲,不僅因爲它很黑,而且因爲它阻止我使用Angular顯示錯誤(而不是我自己填充DOM),並且因爲它剝去了有用的錯誤信息(因爲捕獲的值w/onerror只是一個普通的字符串,與具有信息屬性的對象相反)。

回答

1

我如何被處理錯誤

var pageModule = angular.module('pageModule',[]) 
.service('myService',function($http) { 
    return { 
     someHttpCall : function() { 
      return $http.get('myHttpCall'); 
     } 
    } 
}) 
.controller('parentCtrl',function($scope,myService) { 
    myService.someHttpCall() 
    .success(function(response) { 
     // 
    }) 
    .error(function(response) { 
     $scope.$emit('errorEvent', { 
      type : 'networkError', 
      message : 'There was a network error with this ajax call' 
     }); 

    }); 

    $scope.someFunction = function() { 
     if(error) { 
      $scope.$emit('errorEvent', { 
       type : 'myErrorType', 
       message : 'My message about error here' 
      }); 
     } 
    } 
}) 
.controller('childCtrl',function($scope) { 
    $scope.someFunctionInChildScope = function() { 
     if(error) { 
      $scope.$emit('errorEvent', { 
       type : 'myOtherErrorType', 
       message : 'My other message about error here' 
      }); 
     } 
    } 
}) 
.directive('myErrorMessage',function($rootScope) { 
    return { 
     link : function($scope,$element,$attrs) { 
      $rootScope.$on('errorEvent',function(event,errorObj) { 
       //compile and append an error here.. based on errorObj 
      }); 
     } 
    } 

}); 
1

在我的應用程序使用的第二方法使用攔截器用於錯誤處理的一個粗略的例子。

我寫了一個服務來覆蓋攔截器responseError,並且我在$ rootScope上定義了一個「openErrorModel」方法,當有錯誤時打開帶有錯誤消息的錯誤模型。

這將更清潔和模塊化。你可以通過這種方式避免重複。

示例代碼:

(function (global) { 
    "use strict"; 

    angular.module("TestAPp").factory('httpInterceptor', ["$rootScope", "$q", function ($rootScope, $q) { 
     return { 
     responseError: function (response) { 
      /* Open Error model and display error */ 
      $rootScope.openErrorModel(response); 
      /* reject deffered object so that it'll reach error block , else it'll execute success function */ 
      return $q.reject(response); 
     } 
     }; 
    }]); 

}(this)); 

//註冊interceprtor

(function (global) { 
    "use strict"; 

    angular.module("TestApp", []) 
      .config([ '$httpProvider',function ($httpProvider) { 
       /* Register the interceptor */ 
       $httpProvider.interceptors.push('httpInterceptor'); 

    }]); 

}(this)); 

PS:我openErrorModel定義

$rootScope.openErrorModel = function (error) { 
     $rootScope.errorMessage = error.data; 
     $('#errorModal').modal('show'); 
}; 

您可以參考Error Handling in angular獲取更多信息。

+0

你在哪裏定義「errorModal」? – CuriousCoder

+0

我將其添加到DOM。它是一個引導模式,只有錯誤消息被添加到「$ rootScope.errorMessage」中。 – Naruto