How To Override $exceptionHandler Implementation

There are some extra things we want to do anytime a javascript exception is thrown. From the docs on $exceptionHandler: Any uncaught exception in angular expressions is delegated

Solution 1:

Another option I've found for this is to "decorate" the $exceptionHandler through the $provide.decorator function. This provides you with a reference to the original implementation if you want to use it as part of your custom implementation. So, you can do something like this:

mod.config(function($provide) {
    $provide.decorator("$exceptionHandler", ['$delegate', function($delegate) {
        return function(exception, cause) {
            $delegate(exception, cause);
            alert(exception.message);
        };
    }]);
});

It will do what the original exception handler does, plus custom functionality.

See this updated fiddle.

Solution 2:

You can override the $exceptionHandler functionality by creating a service with the same name:

var mod = angular.module('testApp', []);

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

See this fiddle for a sample. If you comment out the factory definition for $exceptionHandler you will see the error will log to the console instead of alerting it.

Here is a group thread that has an example of injecting other services like $http using $injector.

Note: if you don't want to overwrite the existing functionality of the $exceptionHandler (or another built in service) see this answer for information on how to decorate a service.

Solution 3:

You can override any service/factory even $cookieStore.If you want a full-blown, configurable object here is a really nice example:

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

//provider style, full blown, configurable version     
myApp.provider('helloWorld', function() {

    this.name = 'Default';

    this.$get = function() {
        var name = this.name;
        return {
            sayHello: function() {
                return "Hello, " + name + "!"
            }
        }
    };

    this.setName = function(name) {
        this.name = name;
    };
});

//hey, we can configure a provider!            
myApp.config(function(helloWorldProvider){
    helloWorldProvider.setName('World');
});


function MyCtrl($scope, helloWorld, helloWorldFromFactory, helloWorldFromService) {

   helloWorld.sayHello(),
}