Installing Airbrake in an Angular 2 application

Features

  • Easy and flexible installation options including NPM, Bower and a public CDN
  • Send uncaught errors to Airbrake or manually using a try/catch
  • Add custom parameters to your errors for more context
  • Private sourcemap support
  • Control which errors you send with customizable filtering options

Installation

Using npm

npm install airbrake-js

Using Bower

bower install airbrake-js-client

Configuration

Usage with Angular 2 & TypeScript

Create an error handler

The first 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.

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

export class AirbrakeErrorHandler implements ErrorHandler {
  airbrake: AirbrakeClient;

  constructor() {
    this.airbrake = new AirbrakeClient({
      projectId: 1,
      projectKey: 'FIXME'
    });
  }

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

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

Going Further

Installation and configuration is just the beginning. The airbrake-js notifier supports many other advanced uses and options including:

Please visit the airbrake-js GitHub repo for more usage and configuration examples.