Setup Airbrake for your Angular application

[ayslanjohnson]

Install Airbrake for Angular and TypeScript in three easy steps

Step 1: Add the library
Include via CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/airbrake-js/1.1.1/client.min.js"></script>

We also support installation via npm or Bower.

Step 2: Create an error handler

The second step is to create an error handler with an AirbrakeClient initialized with your projectId and projectKey. In this example the handler will be in a file called error_handler.ts.

(You can find your project ID and API KEY with your project's settings):

import { ErrorHandler } from '@angular/core';
import AirbrakeClient from 'airbrake-js';

export class AirbrakeErrorHandler implements ErrorHandler {
  airbrake: AirbrakeClient;

  constructor() {
    this.airbrake = new AirbrakeClient({
      projectId: <Your project ID>,
      projectKey: '<Your project API Key>'
    });
  }

  handleError(error: any): void {
    this.airbrake.notify(error);
  }
}

Step 3: Add the error handler to your AppModule

The last step is adding the ErrorHandler to your AppModule, then your app will be ready to report errors to Airbrake.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ErrorHandler } from '@angular/core';

import { AppComponent } from './app.component';
import { AirbrakeErrorHandler } from './error_handler';

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

Visit our official GitHub repo for more configuration options and an example for Angular apps.