Track Vue.js Errors with Honeybadger

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.

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 = ''
    // 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')

// 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

What to do next:
  1. Try Honeybadger for FREE
    Honeybadger helps you find and fix errors before your users can even report them. Get set up in minutes and check monitoring off your to-do list.
    Start free trial
    Easy 5-minute setup — No credit card required
  2. Get the Honeybadger newsletter
    Each month we share news, best practices, and stories from the DevOps & monitoring community—exclusively for developers like you.
    author photo

    Joshua Wood

    Josh started hacking on IRC scripts in the late nineties and has been hacking on computers (and businesses) ever since. As a co-founder of Honeybadger he works on the product, leads marketing and developer relations, and is involved in many open-source projects.

    More articles by Joshua Wood
    Stop wasting time manually checking logs for errors!

    Try the only application health monitoring tool that allows you to track application errors, uptime, and cron jobs in one simple platform.

    • Know when critical errors occur, and which customers are affected.
    • Respond instantly when your systems go down.
    • Improve the health of your systems over time.
    • Fix problems before your customers can report them!

    As developers ourselves, we hated wasting time tracking down errors—so we built the system we always wanted.

    Honeybadger tracks everything you need and nothing you don't, creating one simple solution to keep your application running and error free so you can do what you do best—release new code. Try it free and see for yourself.

    Start free trial
    Simple 5-minute setup — No credit card required

    Learn more

    "We've looked at a lot of error management systems. Honeybadger is head and shoulders above the rest and somehow gets better with every new release."
    — Michael Smith, Cofounder & CTO of YvesBlue

    Honeybadger is trusted by top companies like:

    “Everyone is in love with Honeybadger ... the UI is spot on.”
    Molly Struve, Sr. Site Reliability Engineer, Netflix
    Start free trial