How to override $exceptionHandler implementation

Question

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 to this service. The default implementation simply delegates to $log.error which logs it into the browser console.

The fact that it says "default implementation" makes me think there's a way we can provide our own implementation for the service, and do the stuff we want when an exception is thrown. My question is, how do you do this? How can we keep all exceptions going to this service, but then provide functionality we want to happen?

Please select the '$provide.decorator' solution as the answer to this question. — wizulus, Jul 13 '14 at 06:24

score 173 · Accepted Answer · edited Jun 28 '16 at 11:32

173

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.

edited Jun 28 '16 at 11:32

I'm Geeker

4,601
5
22
41

answered Jun 05 '13 at 14:46

dnc253

39,967
41
141
157

2

+1 on this - it's the better way to handle the problem for sure. – Roy Truelove Dec 09 '13 at 17:00
Used this but it doesn't seem to do minification properly! – Roger Far Aug 13 '14 at 16:13
Does it work with using the array notation like you did in your edit? You have to do that here just like anywhere else dependency injection is used to work with minification. – dnc253 Aug 13 '14 at 16:21
@dnc253 yes it does, I just applied the edit after I figured it out. – Roger Far Aug 13 '14 at 16:29
1

I would advice CAUTION: This can swallow all exceptions in your karma unit tests, which definately don't want to happen. – hugo der hungrige Dec 16 '15 at 17:59

score 56 · Answer 2 · edited May 23 '17 at 12:03

56

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.

edited May 23 '17 at 12:03

Community

1
1

answered Nov 28 '12 at 00:24

Gloopy

37,767
15
103
71

So, basically you can override any service and the last definition wins, right? – dnc253 Nov 28 '12 at 21:30
It looks that way though I've only ever tried with `$exceptionHandler` – Gloopy Nov 28 '12 at 21:38
9

I very much prefer @dnc253's solution over this one. By using the "decorator" functionality, you get to preserve the existing behavior AND allow other decorators to get in on the action. This one will clobber anything already there, including your own code if you've already done this elsewhere for a different reason. – Brian Genisio Aug 26 '13 at 14:12
2

I agree completely the decorator is a cleaner way to do this. – Gloopy Aug 26 '13 at 20:13
@Gloopy well im enjoying a nice chicken and egg problem with dependancy injection in angular, see if you can have a look: http://stackoverflow.com/questions/22683956/chicken-and-egg-issue-with-dependency-injection-in-angular-exceptionhandler-an – FutuToad Mar 27 '14 at 13:58
1

Although decorators seem better, this appears to be a great solution if you want to use a factory or anything else not initialized at the time of module.config – Hoppe Jan 05 '15 at 17:01
1

Does this work if you configure it in a separate, included module, provided it's the last definition? – Casey Jul 09 '15 at 18:47

score -5 · Answer 3 · answered Jul 13 '13 at 15:44

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(),
}

How to override $exceptionHandler implementation

3 Answers3

Linked