Agent Installation

If you want to include Atatus script with your source, you can add it through package managers such as CDN, YARN and NPM.

With NPM

Installation

  1. Install atatus-js from the npm registry:

    copy
    icon/buttons/copy
    npm install --save atatus-js
    

    Import and initialize atatus to monitor your application:

    copy
    icon/buttons/copy
    import * as atatus from 'atatus-js';
    atatus.config('YOUR_API_KEY').install();
    

    For more advanced options on installing your monitoring code, view customizing agent.

  2. Add atatus to the angular exception handler

    copy
    icon/buttons/copy
    angular.module('YOUR_APP').factory('$exceptionHandler', ['$window', function ($window) {
      return function (exception, cause) {
        if ($window.atatus) {
          $window.atatus.notify(exception);
        }
      };
    }]);
    

Test Integration

To verify that your integration is working, call notify() in your application:

copy
icon/buttons/copy
atatus.notify(new Error('Test Atatus Setup'));

An error will appear in your project dashboard.

With YARN

Installation

  1. Install atatus-js from the npm registry:

    copy
    icon/buttons/copy
    yarn add atatus-js
    

    Import and initialize atatus to monitor your application

    copy
    icon/buttons/copy
    import * as atatus from 'atatus-js';
    atatus.config('YOUR_API_KEY').install();
    

    For more advanced options on installing your monitoring code, view customizing agent.

  2. Add atatus to the angular exception handler

    copy
    icon/buttons/copy
    angular.module('YOUR_APP').factory('$exceptionHandler', ['$window', function ($window) {
      return function (exception, cause) {
        if ($window.atatus) {
          $window.atatus.notify(exception);
        }
      };
    }]);
    

Test Integration

To verify that your integration is working, call notify() in your application:

copy
icon/buttons/copy
atatus.notify(new Error('Test Atatus Setup'));

An error will appear in your project dashboard.

With CDN

Installation

  1. Copy & paste this code into the <head> tag of your html (every page) to start using Atatus on your site. Please make sure that you add it before other script tags as well.

    copy
    icon/buttons/copy
    <script src="//dmc1acwvwny3.cloudfront.net/atatus.js"></script>
    <script type="text/javascript">atatus.config('YOUR_API_KEY').install();</script>
    

    For more advanced options on installing your monitoring code, view customizing agent.

  2. Add atatus to the angular exception handler

    copy
    icon/buttons/copy
    angular.module('YOUR_APP').factory('$exceptionHandler', ['$window', function ($window) {
        return function (exception, cause) {
            if ($window.atatus) {
                $window.atatus.notify(exception);
            }
        };
    }]);
    

Test Integration

To verify that your integration is working, call notify() in your application:

copy
icon/buttons/copy
atatus.notify(new Error('Test Atatus Setup'));

An error will appear in your project dashboard.

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.

copy
icon/buttons/copy
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.

copy
icon/buttons/copy
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

copy
icon/buttons/copy
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 your app module. You can do that using the following code snippet:

copy
icon/buttons/copy
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:

copy
icon/buttons/copy
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;
        }]);
    }]);