Angular

Installing Airbrake in an Angular application

Key Features

  • Easy and flexible installation options including npm and Yarn
  • Send uncaught errors to Airbrake or manually using a try/catch
  • Add custom parameters to your errors for more context
  • Private source map support
  • Control which errors you send with customizable filtering options

Installation & Configuration

Installation

Using npm

npm install @airbrake/browser

Using Yarn

yarn add @airbrake/browser

Using CDN

Using <script> tag via jsdelivr:

<script src="https://cdn.jsdelivr.net/npm/@airbrake/browser"></script>

Using <script> tag via unpkg:

<script src="https://unpkg.com/@airbrake/browser"></script>

Configuration

Create an error handler

The first step is to create an error handler with a Notifier initialized with your projectId and projectKey. In this example the handler will be in a file called airbrake-error-handler.ts.

// src/app/airbrake-error-handler.ts

import { ErrorHandler } from '@angular/core';
import { Notifier } from '@airbrake/browser';

export class AirbrakeErrorHandler implements ErrorHandler {
  airbrake: Notifier;

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

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

Add the error handler to your AppModule

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

// src/app/app.module.ts

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

import { AppComponent } from './app.component';
import { AirbrakeErrorHandler } from './airbrake-error-handler';

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

To test that Airbrake has been installed correctly in your Angular project, just open up the JavaScript console in your internet browser and paste in:

window.onerror("TestError: This is a test", "path/to/file.js", 123);

Troubleshoot

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.