Setting up Angular 2 monitoring is easy

This short and simple guide will get you familiar in integrating Atatus with Angular 2 apps
and start tracking error and performance.

Angular 2

Install Setup Code

Copy & paste this code into the <head> tag of your html to start using Atatus on your Angular 2 app. Please make sure that you add it before other script tags as well.

<script src="//dmc1acwvwny3.cloudfront.net/atatus.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.

Create a custom error handler

// /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 "AtatusErrorHandler" in the providers section of @NgModule

// /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 { }

Send an event

Just reload your page now. That's it! You've sent your first event.