2

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

0

2 Answers 2

5

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) {
  });
Sign up to request clarification or add additional context in comments.

1 Comment

Yeap, that made it. Thank you very much. Do you have an explanation for that behavior?
3

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

1 Comment

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?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.