AngularJS Quick Tip: Catch Internal Exceptions
Last updated on Dec 14, 2014

We don't like to see our console painted in red. But when AngularJS throw an exception, we can't catch it unless we patch the source code (and we don't want to it). So how can we catch Angular internal exceptions?

Peeking into the AngularJS source code reveals that every try/catch block delegates the error to a service called $exceptionHandler.

example (line 20587):

  this.$$writeModelToScope = function() {
    ngModelSet(ctrl.$modelValue);
    forEach(ctrl.$viewChangeListeners, function(listener) {
      try {
        listener();
      } catch (e) {
        $exceptionHandler(e);
      }
    });
  };

In production, we usually don't want these errors to appear in the client console. Instead, we prefer to send them to a log server for further analysis (for example). To do this, we can use a decorator method to override the $exceptionHandler service, and delegate the error to our own service for further handling.

The decorator will look like this:

(function () {
    /**
     * override the core $exceptionHandler service
     *
     * @desc decorate
     * @param $delegate
     * @returns {Function}
     */
    function exceptionHandlerDecorator ($delegate) {

        $delegate = function (excpetion, couse) {
            // delegate to your own service
            console.log(excpetion, couse);
        };
        return $delegate
    }

    /**
     * register a decorator
     * @param $provide
     */
    function utilModuleConfiguration ($provide) {
        $provide.decorator('$exceptionHandler', exceptionHandlerDecorator)
    }

    angular.module('utils')
        .config(['$provide', utilModuleConfiguration])
}());

I suggest using the $exceptionHandler in your code as well. It provides a central service that catches and handles errors in the app, whether it's an angular exception, or our own.

Back to all articles
We are leading front-end consultancy specializing in React, React Native, and Angular. We build web and mobile apps, train teams and consult on complex projects.

Tel AvivIsrael

New York CityUSA

© 500Tech. Building high-quality software since 2012.