Angular Integration - Real User Monitoring

Angular is a popular TypeScript-based framework for building scalable web applications. Atatus provides real-time error tracking and performance monitoring for Angular applications.

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.

Install atatus-spa from the registry:

copy

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

Import and initialize Atatus in your application's entry point (e.g., main.ts):

copy

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

For CDN

Alternatively, you can load the Atatus agent via CDN by adding the following snippet into the <head> section of your src/index.html file before any 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 Angular Apps

Angular catches unhandled exceptions within its zone and delegates them to an ErrorHandler class. To report these exceptions to Atatus, create a custom error handler.

1. Create a Custom Error Handler

Create an atatus.handler.ts file in your application directory:

copy

// src/app/atatus.handler.ts
import { ErrorHandler, Injectable } from '@angular/core';
import * as atatus from 'atatus-spa';

@Injectable()
export class AtatusErrorHandler implements ErrorHandler {
  handleError(error: any): void {
    if (atatus && typeof atatus.notify === 'function') {
      // Unwrap Angular/Zone errors and notify Atatus
      atatus.notify(error.originalError || error.rejection || error);
    }

    // Log the error to the console for standard debugging
    console.error(error);
  }
}

export default AtatusErrorHandler;

2. Register the Error Handler

Option A: Standalone Application (Angular 14+)

If your project uses standalone components and application bootstrap (bootstrapApplication), provide the custom error handler in app.config.ts:

copy

// src/app/app.config.ts
import { ApplicationConfig, ErrorHandler } from '@angular/core';
import { AtatusErrorHandler } from './atatus.handler';

export const appConfig: ApplicationConfig = {
  providers: [
    { provide: ErrorHandler, useClass: AtatusErrorHandler }
  ]
};

Option B: NgModule Application (Classic Angular)

If your project uses @NgModule, register AtatusErrorHandler in the providers array of app.module.ts:

copy

// src/app/app.module.ts
import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AtatusErrorHandler } from './atatus.handler';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [
    { provide: ErrorHandler, useClass: AtatusErrorHandler }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }