Vue.js 2.x integration guide

Typical installation time: 5 minutes

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

Installation

Add @honeybadger-io/js and @honeybadger-io/vue as dependencies and configure.

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

# yarn
yarn add @honeybadger-io/js @honeybadger-io/vue

In your main.js:

import Vue from "vue";
import HoneybadgerVue from "@honeybadger-io/vue";

const config = {
  apiKey: "PROJECT_API_KEY",
  environment: "production",
  revision: "git SHA/project version",
};

Vue.use(HoneybadgerVue, config);

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

Using the example configuration above, you’ll install @honeybadger-ui/vue as Vue’s error handler.

Depending on the Vue version you’re using, the errors that Vue propagates through its own error handler may vary. Generally, rendering errors are passed in Vue 2.0.0 and above, errors in component lifecycle hooks are handled in Vue 2.2.0 and above, and errors in Vue custom event handlers will be passed through to errorHandler in Vue 2.4.0 and above.

Additionally, by default, an error handler for all JavaScript errors will be attached to the window.onerror handler for JavaScript errors that may originate from Vue components or other JavaScript on the page.

Because Vue doesn’t intercept all errors that may occur within a Vue component, errors that bubble up to the window.onerror handler may be missing some Vue component contextual information, but the stack trace will be available.

If, for some reason, you do not wish to install Honeybadger’s error handler on the global window.onerror handler, you may add { enableUncaught: false } to the configuration when you’re registering HoneybadgerVue.

You may also manually report errors by directly invoking the honeybadger.js API.

Vue.$honeybadger.notify(error);

See the full documentation for more options.

Identifying users

Honeybadger can track which users have encountered each error. To identify the current user in error reports, add a user identifier and/or email address with Vue.$honeybadger.setContext:

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

Sending additional context

Sometimes additional application state may be helpful for diagnosing errors. You can arbitrarily specify additional key/value pairs when you invoke setContext.

Vue.$honeybadger.setContext({
  active_organization: 55,
  custom_configuration: false,
});

Clearing context

If your user logs out or if your context changes during the Vue component lifetime, you can set new values as appropriate by invoking setContext again.

Additionally, if needed, you can clear the context by invoking clear:

// Set the context to {}
Vue.$honeybadger.clear();

Advanced usage

@honeybadger-io/vue is built on honeybadger.js. Most configuration options can be passed in to the config object you pass when registering the HoneybadgerVue component with your Vue app instance. As of this release, there are no Vue-specific configuration options, but that may change as we learn more about Vue users’ unique needs.

In general, configuration and context options supported by the JavaScript version of the library should work as is, aside from needing to reference Vue.$honeybadger instead of a global Honeybadger variable.

See the Honeybadger JavaScript integration documentation for additional customization options.

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 the configuration when registering the HoneybadgerVue component).

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-io/vue 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.

Sample applications

Two sample applications are included in the examples/ folder in the honeybadger-vue repository, one for vue 2.x and one for vue 3.x.

You can follow the README.md inside each app to run them.