Agent Installation

If you want to include Atatus script with your source, you can add it through package managers such as 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. Create a custom error handler

    copy
    icon/buttons/copy
    // /app/atatus.handler.ts
    import { ErrorHandler } from '@angular/core';
    import * as atatus from 'atatus-js';
    atatus.config('0df5e8d5b5914dbd974b18ac036f9bb0').install();
    
    class AtatusErrorHandler implements ErrorHandler {
      handleError(error:any) : void {
        if (atatus) {
          // Send the error to Atatus
          atatus.notify(error.originalError || error);
        }
      }
    }
    
    export default AtatusErrorHandler;
    
  3. Add the custom error handler AtatusErrorHandler in the providers section of @NgModule

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

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 yarn 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. Create a custom error handler

    copy
    icon/buttons/copy
    // /app/atatus.handler.ts
    import { ErrorHandler } from '@angular/core';
    import * as atatus from 'atatus-js';
    atatus.config('0df5e8d5b5914dbd974b18ac036f9bb0').install();
    
    class AtatusErrorHandler implements ErrorHandler {
      handleError(error:any) : void {
        if (atatus) {
          // Send the error to Atatus
          atatus.notify(error.originalError || error);
        }
      }
    }
    
    export default AtatusErrorHandler;
    
  3. Add the custom error handler AtatusErrorHandler in the providers section of @NgModule

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

Test Integration

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

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

An error will appear in your project dashboard.

The architecture of Angular is totally different from AngularJs. So you need to follow different methods to capture errors from Angular apps.

Custom error handler

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

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

Use AtatusErrorHandler

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

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