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?
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");
};
});
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
ReferenceErrororTypeError. In Angular, expression evaluation is forgiving toundefinedandnull.
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.
