Angular Integration Guide

Source CodeIssues


First, install honeybadger-js:

# npm
npm add honeybadger-js --save

# yarn
yarn add honeybadger-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-js'

// Configure honeybadger-js
  apiKey: 'Your Honeybadger API key',
  environment: 'production',
  revision: 'git SHA/project version'

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

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

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({ onerror: false })

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

try {
  // ...error producing code...
} catch(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:

  user_id: 123,
  user_email: ''

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 SHA/project version" \
HONEYBADGER_API_KEY="project api key" \
  curl -g "[environment]=$HONEYBADGER_ENV&deploy[local_username]=$USER&deploy[revision]=$HONEYBADGER_REVISION&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:

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 automatically translates your stack traces if you provide a source map along with your minified JavaScript files. Learn more about sending source maps to Honeybadger.