Browser Integration Guide

Installation

To use our hosted CDN, place the following code between the <head></head> tags of your page:

<script src="//js.honeybadger.io/v2.2/honeybadger.min.js" type="text/javascript"></script>

<script type="text/javascript">
  Honeybadger.configure({
    apiKey: 'project api key',
    environment: 'production',
    revision: 'git SHA/project version'
  });
</script>

Here's a video walkthrough of a basic, global installation:

Using Honeybadger with Javascript

Installing via NPM/YARN

# npm
npm install honeybadger-js --save

# yarn
yarn add honeybadger-js

You can include honeybadger-js from the node_modules directory.

Browserify/Webpack (CommonJS)

var Honeybadger = require("path/to/honeybadger");
Honeybadger.configure({
  apiKey: 'project api key',
  environment: 'production',
  revision: 'git SHA/project version'
});

RequireJS (AMD)

requirejs(["path/to/honeybadger"], function(Honeybadger) {
  Honeybadger.configure({
    apiKey: 'project api key',
    environment: 'production',
    revision: 'git SHA/project version'
  });
});

Reporting Errors

By default Honeybadger will report all uncaught exceptions automatically using our window.onerror handler.

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

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

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

Honeybadger can also keep track of application deployments, and link errors to the version which the error occurred in. 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 "https://api.honeybadger.io/v1/deploys?deploy[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:

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. Learn more about source maps.