Using $http with $exceptionHandler

Question

I want to post errors that happen inside an angular application.

I followed the approach given in this related question, as suggested in the answer, I injected the $injector and then got the $http service from there. But the line

Uncaught Error: Circular dependency: $http <- $exceptionHandler <- $rootScope

keeps comming.

here is the fiddle with the problem

with the relevant code:

var mod = angular.module('test', []);
mod.config(function ($provide) {
    $provide.decorator("$exceptionHandler", ['$delegate', '$injector',             function ($delegate, $injector) {
      var $http = $injector.get("$http");
    }]);
  });
mod.controller('testCtrl', function ($scope) {
  });

If you comment the line

var $http = $injector.get("$http");

The circular dependency error is gone.

I think I'm missing something in my understanding. What am I doing wrong? After all, that seems to have worked for others.

Any suggestion on how to achieve my initial goal of 'posting errors to a service' is also welcomed.

Thanks everyone

score 4 · Accepted Answer · answered Aug 25 '15 at 03:56

4

wrap your injector code within function

var mod = angular.module('test', []);
mod.config(function ($provide) {
    $provide.decorator("$exceptionHandler", ['$delegate', '$injector',function ($delegate, $injector) {
           return function (exception, cause) {
              var $http = $injector.get("$http");
           }
    }]);
  });

  mod.controller('testCtrl', function ($scope) {
  });

answered Aug 25 '15 at 03:56

maddygoround

2,145
2
20
32

Yeap, that made it. Thank you very much. Do you have an explanation for that behavior? – José Villacreses Aug 25 '15 at 14:51

Satyam Koyani · Answer 2 · 2015-08-25T04:24:26.620

You can do like this.

This will break your circular dependency error and you can achieve your goal too.

If I am not wrong then you just wanna call web service in exception Handler.

var httpCallOnAngularError = angular.module('exceptionTestApp', []);

/*httpCallOnAngularError.factory('$exceptionHandler', function () {
 return function (exception, cause) {
        alert(exception.message);
    };
});*/

httpCallOnAngularError.config(function ($provide) {
    $provide.decorator("$exceptionHandler", function ($delegate, $injector) {
        return function (exception, cause) {
            var $rootScope = $injector.get('$rootScope');
            $delegate(exception, cause);
            $rootScope.logAngularError();
            alert(exception.message);
        };
    });
});
httpCallOnAngularError.run(function ($http, $rootScope) {
    $rootScope.logAngularError = function () {
        //Call your webservice here.
        $http.get("http://jsonplaceholder.typicode.com/posts/1")
                .success(function (response) {
                    console.log(JSON.stringify(response));
                });
    };

});

httpCallOnAngularError.controller('exceptionTestCtrl', function ($scope) {
    throw {message: 'Log this error by calling webservice.'};
});

You can verify this by this template.

<div ng-app="exceptionTestApp" ng-controller="exceptionTestCtrl">
</div>

Webservice call in Exception Handler $http in $exceptionHandler

Thank you Satyam for your kind help. Your code seems to work for the same reason as it worked for @maddygoround: the reference for the $injector is inside a function. I don't understand why it happens to work here and not when the $injector is outside the function returned. Is there some kind of event listener when registering the decorators or something? Do you have an explanation? — José Villacreses, Aug 25 '15 at 14:57

Using $http with $exceptionHandler

2 Answers2