Possible to catch JavaScript errors within an Angular app from $window.onerror

Question

In my app.module().run(), I set an onerror message to pop a toastr message whenever a javascript error is encountered.

I would like this to work across my entire ngApp. Is that possible?

The following code pops a toast because asdf is invalid JavaScript.

angular.module("app").run(['notificationFactory', '$window',
    function (notificationFactory, $window) {
    $window.onerror = function (errorMsg, url, lineNumber) {
        notificationFactory.error(errorMsg);
   };

   asdf
}]);

But if I put 'asdf' into a controller, $window.onerror doesn't fire.

Is it possible to catch this with a global onerror call?

App.run is in my app.js file, and loads before my controllers.

Within my controller, I can't seem to get $window.onerror to work at all. I tried moving the onerror function to the controller. I also tried to see if an img tag would generate the error to no avail.

<img ng-src="someFileThatDoesntExist.png" />

Hoppe · Accepted Answer · 2015-01-05 16:33:23Z

12

You can decorate $exceptionHandler provider. Try below;

(function () {
    'use strict';

var app = angular.module('myApp');

// Configure by setting an optional string value for appErrorPrefix.
// Accessible via config.appErrorPrefix ().

app.config(['$provide', function ($provide) {
    $provide.decorator('$exceptionHandler',
        ['$delegate', 'notificationFactory', extendExceptionHandler]);
}]);

// Extend the $exceptionHandler service to also display a toast.
function extendExceptionHandler($delegate, notificationFactory) {
    var appErrorPrefix = 'myPrefix';
    return function (exception, cause) {
        $delegate(exception, cause);
        if (appErrorPrefix && exception.message.indexOf(appErrorPrefix) === 0) { return; }

        var errorData = { exception: exception, cause: cause };
        var msg = appErrorPrefix + exception.message;
        notificationFactory.error(msg);
        console.log(appErrorPrefix, errorData)
    };
}
})();

edited Jan 5, 2015 at 16:33

Hoppe

6,85518 gold badges66 silver badges124 bronze badges

answered Jan 5, 2015 at 15:56

Mehmet Otkun

1,3949 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Hoppe Over a year ago

This looks promising. But it seems like factories aren't initialized within app.config, so I'm looking into a way around that

Mehmet Otkun Over a year ago

$exceptionHandler service is initialize by default, you just need to rewrite it. please look at documenthation here

Hoppe Over a year ago

I wrapped a quick and dirty version of this in an angular plugin. If it gets any interest, I can flesh it out further github.com/joehoppe/angular-errors-on-toast

AncientSwordRage Over a year ago

Whats the logic in excluding the errors when exception.message.indexOf(appErrorPrefix) === 0? Do we not want our own errors?

michaeljiz · Accepted Answer · 2016-02-02 02:50:54Z

1

The window.onerror event will not fire from a console error. Here's how you can fire the window.onerror event manually from console:

setTimeout(function() { notThere(); }, 0);

answered Feb 2, 2016 at 2:50

michaeljiz

1941 gold badge2 silver badges10 bronze badges

Collectives™ on Stack Overflow

Possible to catch JavaScript errors within an Angular app from $window.onerror

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related