AngularJS Integration - Real User Monitoring

AngularJS (Angular 1.x) is a JavaScript framework for building dynamic single-page web applications. Atatus seamlessly integrates with AngularJS to provide real-time exception tracking, AJAX error monitoring, and frontend performance metrics.

Agent Installation

For NPM and Yarn

If you bundle the Atatus script with your source code, install the atatus-spa package using your preferred package manager:

copy

npm install --save atatus-spa
# or
yarn add atatus-spa

Import and initialize Atatus in your application's bootstrap file:

copy

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

For CDN

Alternatively, include the Atatus agent via CDN by adding the following snippet into the <head> section of your HTML page before other script tags:

copy

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

For more advanced configuration options, refer to Customizing the Agent.

Test Integration

To verify that your integration is working properly, trigger a test error anywhere in your application:

copy

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

Within a few seconds, performance metrics and the test error will appear in your Atatus project dashboard.

Track Exceptions in AngularJS Apps

AngularJS handles uncaught exceptions through the $exceptionHandler service. You can integrate Atatus using either of the following approaches:

Using a decorator (Recommended): Decorates the $exceptionHandler to report errors to Atatus while preserving the default AngularJS behavior and console output.
Using a factory: Replaces the default exception handler entirely.

Option 1: Using a Decorator (Recommended)

Decorating $exceptionHandler using $provide.decorator is the preferred approach because it preserves existing error logging and passes errors to the default delegate:

copy

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

Option 2: Using a Factory

You can override the default $exceptionHandler using a factory. This is a quick way to send errors to Atatus, but note that it suppresses the default AngularJS console logging unless handled manually:

copy

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

Capture AJAX Errors

Server error responses can be automatically intercepted and reported to Atatus by configuring an $http interceptor:

copy

angular.module('app')
  .factory('errorHttpInterceptor', ['$q', '$window', function ($q, $window) {
    return {
      responseError: function (rejection) {
        if ($window.atatus && rejection.config) {
          var message = 'AJAX Error: ' +
            rejection.status + ' - ' +
            rejection.config.method + ' ' +
            rejection.config.url;

          $window.atatus.notify(new Error(message), {
            customData: {
              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');
  }]);

Capture $log.error Calls

If you want calls made to $log.error() to automatically report errors to Atatus, decorate the $log service:

copy

angular.module('app').config(['$provide', function ($provide) {
  $provide.decorator('$log', ['$delegate', '$window', function ($delegate, $window) {
    var originalError = $delegate.error;

    $delegate.error = function () {
      var args = Array.prototype.slice.call(arguments);
      var message = args.join(' ');

      // Send error to Atatus
      if ($window.atatus) {
        $window.atatus.notify(new Error(message));
      }

      // Call original $log.error with arguments
      originalError.apply(null, args);
    };

    return $delegate;
  }]);
}]);

Handle Hash-Based Routing

By default, AngularJS applications use hash-based routing (/#/...). Atatus removes the hash fragment from URLs by default to prevent duplicate path entries.

Enable Hash Routes in Configuration

To preserve hash-based routes in your performance metrics and page views, enable hashRoutes during agent initialization:

copy

atatus.config('YOUR_API_KEY', { hashRoutes: true }).install();

You can also toggle this dynamically:

copy

atatus.setHashRoutes(true);

Custom URL Transformation

If you want to transform hash-based URLs into clean, pretty URLs in error payloads, use the onBeforeErrorSend callback:

copy

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