angular2

Angular Error Monitoring

Make Debugging Easy with Airbrake Angular

Use Airbrake with Angular

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);

Frictionless error monitoring for AngularJS

You monitor your servers and your apps. So who is monitoring your user experience? Your Angular app might be up and running, but your customers could still be seeing errors. That's where Airbrake comes in.

Airbrake silently monitors your Angular application, 24 hours/day, 7 days/week, alerting you in real-time to all new errors affecting your users. With Airbrake Angular error monitoring, you receive general information about your app's performance, as well as:

  • Detailed stack traces - making it easy to drill down and catch troublesome errors
  • Deploy tracking - see the impact of a deploy on your error volumes and types
  • Aggregated error data - identify affected users, browsers, URLs, and more

 

The AngularJS notifier is easy to install and works well with all frameworks. Airbrake Angular error monitoring and reporting is immediate and delivered via the communication tool of your choice, including Campfire, Webhooks, or email. Isn't it time you stop losing customers to a bad user experience? Airbrake can help.

KEY FEATURES: 

Blazing fast, real-time errors alerts

Lightweight notifier installs quickly and won't impact your app performance

Receive error notifications via email, Slack, or webhooks

Fast error search and filtering within your Airbrake dashboard

Advanced data security including SOC-2 Compliance and SAML Single Sign-On - included with all Airbrake plans

Integrates with GitHub, Trello, Slack, JIRA, Pivotal Tracker, GitHub Enterprise, GitLab, GitLab CE/EE, Bitbucket, Lighthouse, Flowdock, Campfire, Assembla, custom webhooks and other 3rd party apps

Dupe error detection

Customizable error filtering

Unlimited users and projects

Comprehensive read & write API

Deploy tracking to monitor code quality

Performance insight about your total app health including your code, production environment, and the user experience.