Angular integration guide

Typical installation time: 5 minutes

Hi there! You’ve found Honeybadger’s guide to Angular error and exception tracking. Once installed, Honeybadger will automatically report errors from your Angular application.

Installation

First, install honeybadger.js:

# npm
npm add @honeybadger-io/js --save

# yarn
yarn add @honeybadger-io/js

Then, configure Angular’s @angular/core/ErrorHandler component to report errors to Honeybadger:

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

// Import honeybadger.js
import * as Honeybadger from '@honeybadger-io/js';

// Configure honeybadger.js
Honeybadger.configure({
  apiKey: 'PROJECT_API_KEY',
  environment: 'production',
  revision: 'git SHA/project version'
})

// Define error handler component
class HoneybadgerErrorHandler implements ErrorHandler {
  handleError(error) {
    Honeybadger.notify(error.originalError || error);
  }
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  // Include error handler component in providers
  providers: [{provide: ErrorHandler, useClass: HoneybadgerErrorHandler}],
  bootstrap: [AppComponent]
})
export class AppModule { }

Note

Errors that happen in development and test environments are not reported by default. To always report errors or to change the defaults, see Environments and Versions.

Reporting errors

In addition to Angular’s error handler component, Honeybadger will report all uncaught exceptions automatically using our window.onerror handler. To disable uncaught error reporting:

Honeybadger.configure({ enableUncaught: false });

You can also manually notify Honeybadger of errors and other events in your application code:

try {
  // ...error producing code...
} catch (error) {
  Honeybadger.notify(error);
}

See the Reporting Errors How-to Guide for more info.

Identifying users

Honeybadger can track what users have encountered each error. To identify the current user in error reports, add a user identifier and/or email address with Honeybadger.context:

Honeybadger.setContext({
  user_id: 123,
  user_email: "user@example.com",
});

Tracking deploys

As with vanilla JavaScript applications, you can notify Honeybadger when you’ve deployed a new build. Honeybadger will associate an error report with a specific revision number (matching the ‘revision’ field in your honeybadger.js configuration).

Here’s a simple curl script to record a deployment:

HONEYBADGER_ENV="production" \
HONEYBADGER_REVISION="$(git rev-parse HEAD)" \
HONEYBADGER_REPOSITORY="$(git config --get remote.origin.url)" \
HONEYBADGER_API_KEY="Your project API key" \
  && curl -g "https://api.honeybadger.io/v1/deploys?deploy[environment]=$HONEYBADGER_ENV&deploy[local_username]=$USER&deploy[revision]=$HONEYBADGER_REVISION&deploy[repository]=$HONEYBADGER_REPOSITORY&api_key=$HONEYBADGER_API_KEY"

Be sure that the same revision is also configured in the honeybadger.js library. Read more about deploy tracking in the API docs.

Tracking deploys from Netlify

If you are deploying your site to Netlify, you can notify Honeybadger of deployments via Netlify’s webhooks. Go to the Deploy notifications section of the Build & deploy tab for your site settings, and choose to add an Outgoing webhook notification. Choose Deploy succeeded as the event to listen for, and use this format for your URL:

https://api.honeybadger.io/v1/deploys/netlify?api_key=YOUR_HONEYBADGER_API_KEY_HERE

The environment that will be reported to Honeybadger defaults to the Netlify environment that was deployed, but you can override that with &environment=CUSTOM_ENV in the webhook URL, if you like.

Source map support

Honeybadger can automatically un-minify your code if you provide a source map along with your minified JavaScript files. See our Source Map Guide for details.

Collect user feedback

When an error occurs, a form can be shown to gather feedback from your users. Read more about this feature here.