How can I let Angular show an error on a Angular error?

Question

I've taken over an Angular application from another developer.

Now I've been playing around with it and making my first edits.

Question is: when I bind to non-existing elements (or make any other mistake) I don't see any error, which sounds good but isn't because I want to be notified when I do something wrong.

How can I make Angular show errors?

Answer 1

To began, I recommend not using the minified version of angular, as the unminified version allows more coherent and clear errors to be logged in the console.

Next, I think the best way to handle angular errors is to write a custom wrapper to better handle them. Here is an example of how you could write a wrapper.

The first step would be to write a function that will handle the error in a way that you want. This is how I current handle angular errors. Note: this could be modified in many different ways to make the error handling more customized.

function HandleAngularError(Exception, AppName){
    try {
        var AppName = (window.parent._.isEmpty(AppName) ? "Angular App Unspecified" : AppName) + " - ";

        if (window.parent._.isUndefined(Exception)) {
            console.log(strAppName + "error: exception undefined", "AngularJs");
        } else {
            console.log(strAppName + "error: " + Exception.toString() + " " +   JSON.stringify(Exception), "AngularJs");
        }
    } catch (e) {
         alert("Handle Angular Error: " + Exception.toString() + " " + JSON.stringify(Exception));
    }
}

The next step is to include the error handling function in the any of the Modules in you project and rely on the $exceptionHandler to then pass angular errors into your custom wrapper like so:

angular.module("someApp",[], function(){
//setup stuff here

}).factory( '$exceptionHandler', function () {
    return function (exception) {
        HandleAngularError(exception, "someApp");
    };
});       

Answer 2

By default, AngularJS is forgiving, that is to say it prefers to show nothing rather than throwing an exception if you binded an undefined value.

From Angular doc :

In JavaScript, trying to evaluate undefined properties generates ReferenceError or TypeError. In Angular, expression evaluation is forgiving to undefined and null.

One way of displaying an error would be to decorate the $eval function, which is used to evaluate binded expressions.

You could try something like this :

app.run(function($rootScope) {
   var origRootScope = $rootScope,
        origEval = origProvider.$eval;

    //Override rootScope's $eval with our own
    origProvider.$eval = function(expression, locals) {

        // Test the expression value and add the behavior you like
        if(typeof expression === 'undefined') {
             // Log some kind of error
             console.log('Some kind of error')
        }
        // Call the original $eval function 
        var returnValue = origEval.apply(this, arguments);

        return returnValue;
    }
});

I haven't tried that code but you should be able to add custom logging to $eval this way.