AngularJS Integration - Real User Monitoring

Agent Installation

For NPM and YARN

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

Install atatus-spa from the npm or yarn registry:

copy

npm install --save atatus-spa
Or
yarn add atatus-spa

Import and initialize atatus to monitor your application:

copy

import * as atatus from 'atatus-spa';
atatus.config('YOUR_API_KEY').install();

For CDN

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

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

Replace the YOUR_API_KEY string with the API Key that is assigned for your project. You're done.

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

Test Integration

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

copy

atatus.notify(new Error('Test Atatus Setup'));

Within few seconds, performance metrics and errors 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

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

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);
    }
    }]);
});

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

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

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

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;
        }]);
    }]);

AngularJS Integration - Real User Monitoring

Agent Installation

For NPM and YARN

For CDN

Test Integration

Track exceptions in your Angular apps

Using a factory

Using a decorator

View hash in URL filter section

Capture AJAX errors

Capture $log.error