4

I know that AngularJS by default catches all application exceptions and then logs them to the console. That makes the 'Pause on uncaught exceptions' button in Chrome (which I use a lot) useless.

Many times I encounter small javascript errors in my code (like accessing members on undefined variables) and I'm really used to pausing on the exception and inspecting the situation.

The only solution I have by now is either to put a breakpoint on the code which is triggering the error (impractical) or to use the 'Pause on all exceptions' button, but I have to continue on all errors generated by default by jQuery, Angular and other frameworks, and that's also very nasty.

I also tried overwriting the $exceptionHandler service, and put a breakpoint in it, but I don't have access from the call stack in the function that generated the error.

So, is it possible to use the 'Pause on uncaught exceptions' with AngularJS apps?

Tiborg
  • 2,304
  • 2
  • 26
  • 33

3 Answers3

3

According to the Angular docs,

https://docs.angularjs.org/api/ng/service/$exceptionHandler

This example will override the normal action of $exceptionHandler, to make angular exceptions fail hard when they happen, instead of just logging to the console.

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

This will cause them to be handled by the browser dev tools, which will allow pause on caught exceptions, usage of source maps for nice stack traces, etc.

Presumably you don't want this to happen in production, and also don't want to have to add/remove this code continuously during development. We solve this secondary problem by having a 'dev' module which adds to and overrides our production code during development. For example:

In dev.html:

<html ng-app="devApp"> ...

In dev.js:

angular.module('devApp', ['mainApp']) .factory('$exceptionHandler', ...)

jazmit
  • 5,170
  • 1
  • 29
  • 36
1

The "Skip stepping through sources" is no longer available in Chrome, but - there is a new option - you can right click any script in sources/sources and choose 'Blackbox script'. Then you can turn on 'Pause on Caught Exceptions' without worrying about jQuery and other errors. Personally I use it always on jquery.js and angular.js.

licancabur
  • 635
  • 5
  • 11
-1

You can enable Skip stepping through sources with particular names in DevTools and set it to something like this:

(jquery|angular|diigolet)

enter image description here

Pavel 'Strajk' Dolecek
  • 678
  • 7
  • 16
  • 1
    This doesn't seem to address the actual problem - You can't 'pause on uncaught exceptions' thrown in angular code because Angular catches the exceptions and doesn't re-throw them. I guess (based on another answer to this question) that you can use to reduce the number of irrelevant caught exceptions that you have to skip through if you enable that mode. – rjmunro Aug 19 '15 at 12:25