Angular 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 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 Angular apps

You need to create separate error handler to notify errors to Atatus.

copy

// /app/atatus.handler.ts
import { ErrorHandler } from '@angular/core';
declare var atatus: any;

class AtatusErrorHandler implements ErrorHandler {
    handleError(error:any) : void {
        if (atatus) {
            // Send the error to Atatus
            atatus.notify(error.originalError || error);
        }
    }
}

export default AtatusErrorHandler;

Add the custom error handler AtatusErrorHandler in the providers section of @NgModule

copy

// /app/app.module.ts
import { ErrorHandler } from '@angular/core';
import { AppComponent } from './app.component';
import AtatusErrorHandler from './atatus.handler';

@NgModule({
    bootstrap: [AppComponent],
    declarations: [AppComponent],
    providers: [{provide: ErrorHandler, useClass: AtatusErrorHandler}]
})

export class AppModule { }