Track Vue.js Errors with Honeybadger

Vue.js. It's so hot right now. Hot like the sub-Saharan desert: a perfect climate for Honeybadgers.

Good news, 'badgers! We just shipped an official Vue.js integration for Honeybadger. When your Vue apps are on fire, Honeybadger alerts you of exceptions in real-time, helping to identify the root cause so that you can fix them—fast.

Set up Vue.js Error Reporting

Configuring your Vue app to report exceptions to Honeybadger is easy. Thanks to Vue's built-in error handler, setup is a simple two-step process.

1. Install the Honeybadger Vue package:

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

2. Configure Honeybadger:

   import HoneybadgerVue from '@honeybadger-io/vue'
   
   const config = {
       apiKey: 'project api key',
       environment: 'prod',
       revision: 'master'
   }
   
   Vue.use(HoneybadgerVue, config)
   

All unhandled exceptions will now be reported to Honeybadger. See our official Vue Integration Guide for more detailed instructions and documentation.

Don't Forget Your Source Map

Getting good stack traces for front-end errors can be tricky. A good stack trace points to the line number in the original source file where the error occurred in your Vue project.

Unfortunately, modern build processes have multiple stages where your original source code gets chopped up, optimized, and compressed to squeeze the best performance from it. That's great for performance, but bad for debugging (read: error reporting). Source maps are the answer.

If you're using Webpack to build your production JavaScript (this should be most of you), then you can automatically upload source maps to Honeybadger using our Webpack plugin.

1. Install the Honeybadger Webpack package:

   # npm
   npm add @honeybadger-io/webpack --save-dev
   
   # yarn
   yarn add @honeybadger-io/webpack
   

2. Add our plugin to your Webpack config:

   const HoneybadgerSourceMapPlugin = require('@honeybadger-io/webpack')
   
   // The base URL where you host your production assets
   const ASSETS_URL = 'https://cdn.example.com/assets'
   
   // Insert the HoneybadgerSourceMapPlugin in your existing
   // plugins array:
   const webpackConfig = {
     plugins: [new HoneybadgerSourceMapPlugin({
       apiKey: 'project api key',
       assetsUrl: ASSETS_URL,
       revision: 'master'
     })]
   }
   

Every time you build your Webpack project, the source map will be uploaded to Honeybadger. Check out the Honeybadger Webpack Plugin on GitHub for additional documentation.

Versioning Your Project

In the previous examples, we set the revision: 'master' option in both the Vue and Webpack config. In Honeybadger, the revision is a unique version for your project; it's what we use to match up the correct source map with the correct error. While "master" will technically work for your first build, you'll want to come up with a better way to version your project in Honeybadger—every build must be unique.

We leave versioning up to you, but we prefer Git commit SHAs, since they are always unique for the current build. According to Stack Overflow, here's a concise way to get the current Git SHA in Node.js:

const REVISION = require('child_process')
  .execSync('git rev-parse HEAD')
  .toString().trim()

// In your Vue/Webpack config:
{
  // ...
  revision: REVISION
}

Wrapping Up

We're stoked to launch official Vue.js support for Honeybadger, and this is only the beginning! It's our mission to make Honeybadger the best way to monitor your production Vue applications. To unlock the full power of Honeybadger and Vue.js, use it to monitor your back-end (Laravel, Rails, Express, etc.), background tasks and cron jobs, and external uptime.

Be the Honeybadger on Your Team — Start Your 30-day Free Trial