Make Debugging Easy with Airbrake Angular

Create Your Free Dev Account

Angular Error & Performance Monitoring

Use Airbrake with Angular

Create an error handler

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

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

Add the error handler to your [.c-text-code]AppModule[.c-text-code]

The last step is adding the [.c-text-code]AirbrakeErrorHandler[.c-text-code] to your [.c-text-code]AppModule[.c-text-code], 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

While you’re monitoring your servers and apps, 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 Angular Error Monitoring 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’ll receive general information about your app's performance, as well as:

Detailed stack traces - making it easy to drill down and catch troublesome errors
  • Airbrake tells you where an error occurred, right down to the line of code that broke.
  • Keep an eye on error-prone files with hotspots.
  • Airbrake Angular provides a detailed overview of each error, including the date it first occurred, the date it was last seen, how many occurrences there have been of a particular error, and more.
Deploy tracking - see the impact of a deploy on your error volumes and types
  • You can track who deployed what via the deploy tab in the Airbrake application.
  • Quickly spot trends in error occurrences with easy-to-understand graphs.
  • Depending on which paid plan you’re on, deployment history is available for up to 90 days.
Aggregated error data - identify affected users, browsers, URLs, and more
  • Airbrake aggregations are available for every single error.
  • The aggregation tab includes information about the error, remote addresses and countries, affected users and their IP addresses, browsers the error showed up on, etc.
  • Airbrake also allows for custom aggregations.
Other amazing Airbrake features
  • It takes less than three minutes to install Airbrake.
  • Unlimited On-Demand Errors and Events.
  • Airbrake integrates with popular applications such as Slack, Trello, GitHub, JIRA, and so much more.
  • One Airbrake account can have unlimited users.
  • There’s no limit on how many applications and projects you can monitor using Airbrake.

The AngularJS notifier is easy to install and works well with all frameworks. Airbrake Angular Error Monitoring and Reporting is immediate and delivers notification about errors 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? Try Airbrake with a free trial; no credit card required!

This will make the text black in colour with the font, Inconsolata.
This will make the text pink in colour with the font, Inconsolata.
This is the h6 heading.
This will make the text black in colour with the font, Inconsolata; size 20px.
This will make the text yellow in colour with the font, Inconsolata; size 20px.
  • 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, 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.