Best way to handle/log resource errors in angular

Question

I'm trying to setup solid error handling within my angular web application. I have a lot of various api calls using various sources, within many different controllers and directives. Ideally I'd like to handle resource errors in a manner like this:

$scope.loadData = function () {
    $scope.loaded = false;
    dataFactory.getData($scope.RecordId)
    .$promise
    .then(function (resp) {
        $scope.Data = resp;
        $scope.loaded = true;
    }, function (resp) {
        $scope.loaded = true;
        $scope.handleResourceError(resp);
    })
};

Since I inject $scope in all controllers/directives that would need this functionality, am I able to define a Resource Error method that would be accessible anywhere $scope is injected?

You would have to put that function in the $rootScope for it to be accessible everywhere. — jsonmurphy
– jsonmurphy, Commented Jul 9, 2015 at 13:30

Naruto · Accepted Answer · 2016-02-29 19:57:46Z

Interceptors might help you. instead of writing error handler function every time, you can just bind your function to root scope and call it form the "responseError" interceptor. Here i bind a function to open the error model to $rootScope and i'm calling it form the interceptor. you can find the example below.

Sample code:

(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));

//registering interceprtor

(function (global) {
    "use strict";

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

    }]);

}(this));

PS: My openErrorModel definition

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

You can refer to Error Handling in angular for more info.

Collectives™ on Stack Overflow

Best way to handle/log resource errors in angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related