Expose javascript errors in angular.js

Question

in some cases, the angular engine doesn't output the raw javascript error. For example

myapp.directive('helloWorld', function() {
return {
    scope: '@',
    restrict: 'AE',
    template: '<p ng-click="clearMessage2()">Hello, World! {{message}}</p>',
    link: function(scope, elem, attrs) {
       scope.clearMessage = function() {
          scope.message = '';
       }
   }
}});

When I click on p element produced with directive I'm expecting the error in console to say clearMessage2() is not defined, but this doesn't happen and the only way to check things is to use console.log inside clearMessage definition.

Is it possible to change that behavior of angular.js and do not hide errors happening inside JS code?

No - angular swallows errors from undefined function by substituting them with angular.noop — New Dev
– New Dev, Commented Mar 19, 2015 at 22:12

Faris Zacina · Accepted Answer · 2015-03-20 16:22:15Z

4

It is possible, but not recommended. The problem is that angular does not execute the method in the ng-click directive as is (like in regular onclick), but instead evaluates expressions using the $parse service. From the angular doc:

Angular does not use JavaScript's eval() to evaluate expressions. Instead Angular's $parse service processes these expressions.

The implementation of expression evaluation in Angular is deliberately forgiving.

In JavaScript, trying to evaluate undefined properties generates ReferenceError or TypeError. In Angular, expression evaluation is forgiving to undefined and null. It makes more sense to show nothing than to throw an exception if a is undefined (perhaps we are waiting for the server response, and it will become defined soon). If expression evaluation wasn't forgiving we'd have to write bindings that clutter the code

So the $parseProvider will not execute an undefined function at all, instead it will execute a noop function (which is an implementation of a null object pattern). Here is an excerpt from the $parseFunctionCall method:

var fn = fnGetter(scope, locals, context) || noop;

The execution of a null object will do nothing, and that is what's happening. You could probably achieve what you want by modifying the $parseFunctionCall to execute any function, instead of executing a noop function.

Changing code looks like the only option since configuration of these services is not sufficient for your use-case. However, i don't think it's a recommended approach unless you know the Angular API very well.

For additional reading:

Angular expressions

$parse service

edited Mar 20, 2015 at 16:22

answered Mar 19, 2015 at 23:09

Faris Zacina

14.3k8 gold badges64 silver badges76 bronze badges

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

9 Comments

New Dev Over a year ago

What if an expression is used, like so: ng-click="foo = 4"? This solution falls flat

New Dev Over a year ago

also, presumably, the OP was interested in a broader solution of function expression invocation than ng-click

DmitrySemenov Over a year ago

yes, I was interested in broad solution to avoid Angular intercept and hide any js error. I'd rather get normal exception with the link to file where it happened instead of swallowing it quietly

New Dev Over a year ago

@DmitrySemenov, why is this of concern?

Faris Zacina Over a year ago

You are both right. My initial answer was flawed and not covering all scenarios. Rewritten answer.

|

Collectives™ on Stack Overflow

Expose javascript errors in angular.js

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related