Angular Integration

Angular.js is a popular JavaScript framework for building single page web and mobile applications. Atatus integrates with Angular in only a few lines, allowing you to pick up all the obscure bugs and performance metrics in your web app as it runs in your user’s browsers.

Track exceptions in your Angular apps

There are two ways to handle exceptions in AngularJS. You can use one of the below methods

  • Using a factory
  • Using a decorator
Using a factory

You can override the default AngularJS exception handler using a factory. This is the quickest way of getting Atatus into your app’s exception handler, although this removes the original console logging.

angular.module('app').factory('$exceptionHandler', ['$window', function ($window) {
    return function (exception, cause) {
        if ($window.atatus) {
            $window.atatus.notify(exception);
        }
    };
}]);

Using a decorator

If you don't want to overwrite the existing functionality of the $exceptionHandler, you can decorate the $exceptionHandler through the $provide.decorator. It is the preferred way for logging and exception handling as it doesn’t override the original behaviour.

angular.module("app").config(function ($provide) {
    $provide.decorator("$exceptionHandler", ['$delegate', '$window', function($delegate, $window) {
      return function (exception, cause) {
        if ($window.atatus) {
          $window.atatus.notify(exception);
        }
        // (Optional) Pass the error through to the delegate
        $delegate(exception, cause);
      }
    }]);
});

View hash in URL filter section

Atatus strips hash from URL to avoid huge number of entries in the URL filter section. By default, angular apps use hash based routing. If you want to see the URL along with hash, then you have to convert your hash based URL into pretty URL in the error payload in onBeforeErrorSend function as follows

atatus.onBeforeErrorSend(function(payload) {
    if (!payload.request) { return true; }
    // Convert the hash based URL into pretty URL
    payload.request.url = payload.request.url.replace('/#/', '/');
    return true;
})
Capture AJAX errors

Error responses from the server can be intercepted and reported to Atatus by installing $http response interceptor. Add your own interceptor factory to the your app module. You can do that using the following code snippet:

angular.module('app')
    .factory('errorHttpInterceptor', ['$q', '$window', function ($q, $window) {
        return {
            responseError: function responseError(rejection) {
                if ($window.atatus) {
                    var message = 'AJAX Error: ' +
                                   rejection.status + ' - ' +
                                   rejection.config.method + ' ' +
                                   rejection.config.url;
                    atatus.notify(new Error(message), {
                        status: rejection.status,
                        headers: rejection.config.headers,
                        method: rejection.config.method,
                        url: rejection.config.url
                    });
                }
                return $q.reject(rejection);
            }
        };
    }])
    .config(['$httpProvider', function($httpProvider) {
        $httpProvider.interceptors.push('errorHttpInterceptor');
    }]);

Now you will know about error server responses, which to your users look like errors.

Capture $log.error

If you want $log.error() to trigger errors, then you can do that using the following code snippet:

angular.module('app')
  .config(["$provide", function($provide) {
        // Use the `decorator` solution to substitute or attach behaviors to
        // original service instance;

        $provide.decorator( '$log', [ "$delegate", function( $delegate )
        {
            // Save the original $log.error()
            var errorFn = $delegate.error;

            $delegate.error = function( )
            {
              var args    = [].slice.call(arguments),
                  msg = args.join(' ');

              // Send error to atatus
              atatus.notify(new Error(msg));

              // Call the original with the arguments
              errorFn.apply(null, args)
            };

            return $delegate;
        }]);
  }]);
Document Sections