Using $http with $exceptionHandler - angularjs

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

Answer 1

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) {
});

Answer 2

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