Vue Integration Guide

Source CodeIssues

Installation

If you're using Webpack, simply add honeybadger-vue as a dependency and configure.

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

# yarn
yarn add @honeybadger-io/vue

In your main.js:

import HoneybadgerVue from '@honeybadger-io/vue'

const config = {
    apiKey: 'project api key',
    environment: 'production',
    revision: 'git SHA/project version'
}

Vue.use(HoneybadgerVue, config)

Reporting errors

Using the example configuration above, you'll install honeybadger-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 { onerror: false } to the configuration you're passing to Vue.use.

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 resetContext:

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

Advanced usage

honeybadger-vue is built on honeybadger-js. Most configuration options can be passed in to the config object you pass to Vue.use(HoneybadgerVue, config). 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 passed to Vue.use).

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-vue library. Read more about deploy tracking in the API docs.

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.

Assuming you're building your Vue app with Webpack, you can automatically upload your source maps to honeybadger using the honeybadger-webpack plugin. The details for setting this up depend on whether you're building a standalone Vue project or using Webpack with another backend; check the honeybadger-webpack documentation for example configurations.

Sample application

A minimal implementation is included in the demo/ folder in the honeybadger-vue repository.

Aside from being located outside of the conventional path for a standalone Vue application, it is built using the webpack template, so you can use it as a guide for a quick integration.

To run it from the command line, enter the following command in your shell:

HONEYBADGER_API_KEY=yourkey npm run dev

To create your own standalone Vue application, simply run the following two commands from your shell.

vue-init webpack vuewolf

npm add honeybadger-vue --save  

Then, in your main.js, you can follow the pattern in the source code in demo/main.js

import Vue from 'vue'
import App from './App'
import router from './router'

// note the demo app uses a
import HoneyBadgerVue from '@honeybadger/vue'

// You can see that we set the api key via 
//   process.env.HONEYBADGER_API_KEY
// in our demo. If you set your api key at build time via an
// environment variable, you can use the same approach.
// For the purposes of this example, we'll just hard code it. 
Vue.install(HoneyBadgerVue, {apiKey: 'your_api_key'})
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})