Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker.

Override The AngularJS Exception Handler

TwitterFacebookRedditLinkedInHacker News

AngularJS is one of the hottest things around right now. Maybe you’re finding yourself getting pretty deep in its greatness and you’re ready to customize how exceptions are handled by default.

Lucky for us there is a way to override the default functionality and do whatever we want when an error happens.

Now most of what I’m going to show you is straight from the AngularJS documentation, but if you’re anything like me, you had a tough time with what the documentation was talking about.

To keep things simple, we’re just going to customize the message that shows up in the browser console.

Let’s start by creating a custom AngularJS module called exceptionOverride which will contain our new $exceptionHandler factory:

angular.module('exceptionOverride', []).factory('$exceptionHandler', function() {
    return function(exception, cause) {
        exception.message += ' (caused by "' + cause + '")';
        throw exception;
    };
});

Now let’s check out the modification in action. In your project’s main AngularJS module, do something like the following:

var example = angular.module("example", ['exceptionOverride']);
example.controller("ExampleController", function($scope) {
    var x = n + 1;
});

You can probably tell that n is undefined in this example. Based on our custom exception message, the browser logs show an error that looks like the following:

ReferenceError: Can't find variable: n (caused by "undefined")

Pretty awesome right? If we didn’t override the exception handler we would have ended up with a messy error that looks like this:

[Error] Error: Can't find variable: n
file:///Users/nraboy/Desktop/Testing/index.html:7:26
d@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js:35:41
instantiate@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js:35:166
https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js:67:562
https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js:54:26
r@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js:7:396
J@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js:53:397
g@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js:47:257
g@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js:47:274
https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js:46:378
https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js:18:314
$eval@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js:113:32
$apply@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js:113:315
https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js:18:276
d@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js:35:41
c@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js:18:184
dc@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js:18:388
Wc@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js:17:416
https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js:216:80
a@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js:146:94
https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js:31:229
r@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js:7:294
c@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js:31:208
    (anonymous function) (angular.min.js, line 92)
    (anonymous function) (angular.min.js, line 68)
    $apply (angular.min.js, line 113)
    (anonymous function) (angular.min.js, line 18)
    d (angular.min.js, line 35)
    c (angular.min.js, line 18)
    dc (angular.min.js, line 18)
    Wc (angular.min.js, line 17)
    (anonymous function) (angular.min.js, line 216)
    a (angular.min.js, line 146)
    (anonymous function) (angular.min.js, line 31)
    r (angular.min.js, line 7)
    c (angular.min.js, line 31)

Now how would we have been able to determine n was undefined from that?

As we saw it wasn’t difficult to override the exception handler, and it opens your AngularJS world to more possibilities. Why not send an HTTP request of the error to some remote web server for tracking? Plenty of things that could be done.

Nic Raboy

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.

Search

Follow Us

Support This Site