Vue integration guide

Add Bugsnag to your Vue projects to automatically capture and report errors in production.

New to Bugsnag? Create an account

Installation

npm

Install Bugsnag and the Bugsnag / Vue integration from the npm registry using npm or yarn:

npm install --save @bugsnag/js @bugsnag/plugin-vue
# or
yarn add @bugsnag/js @bugsnag/plugin-vue

Basic configuration

This documentation is for version 7 of the Bugsnag JavaScript notifier. If you are using older versions, we recommend upgrading to the latest release using our Upgrade guide. Documentation for the previous release can be found on our legacy pages.

Depending on which module system you are using, you’ll need to include Bugsnag in one of the following ways:

// ES module-style import
import Bugsnag from '@bugsnag/js'
import BugsnagPluginVue from '@bugsnag/plugin-vue'

// commonjs/node-style require
var Bugsnag = require('@bugsnag/js')
var BugsnagPluginVue = require('@bugsnag/plugin-vue')

To start Bugsnag with the Vue integration, instantiate the BugsnagPluginVue and pass it along with your API key to Bugsnag.start as configuration:

Bugsnag.start({
  apiKey: 'YOUR_API_KEY',
  plugins: [new BugsnagPluginVue()],
  otherOptions: value
})

When a reference to Vue is available, start handling errors by calling installVueErrorHandler(Vue):

Bugsnag.getPlugin('vue')
  .installVueErrorHandler(Vue)

For information on values that can be set in the configuration object, see configuration options.

In the dashboard, you’ll see errors reported with extra debugging info in a “Vue” tab. For example:

Vue error information in the the dashboard

Reporting unhandled errors

After completing installation and basic configuration, unhandled exceptions and unhandled promise rejections will be automatically reported.

Unhandled errors in Vue components will be reported with the component name, lifecycle phase and props.

Reporting handled errors

Sometimes it is useful to manually notify Bugsnag of a problem. To do this, call Bugsnag.notify() with an Error object. For example:

try {
  something.risky()
} catch (e) {
  Bugsnag.notify(e)
}

See reporting handled errors for more information.

TypeScript support

Type definitions are provided and will be picked up automatically by the TypeScript compiler when you import any of the top-level @bugsnag/* packages.

Sending diagnostic data

Automatically captured diagnostics

Bugsnag will automatically capture the following data for every exception:

  • The current URL
  • Script content (if the error originated in an inline <script/> tag)
  • Browser name, version, user agent, locale and time
  • Operating system
  • Release stage (production, beta, staging, etc)

Custom diagnostics

Custom data can be capture by adding metadata to the Bugsnag client, for all errors, or an individual event.

The following adds a map of data to the “company” tab on the Bugsnag dashboard for all captured events:

Bugsnag.addMetadata('company', {
  name: "Acme Co.",
  country: "uk"
})

For additional options on attaching custom metadata, see customizing error reports.

Leaving breadcrumbs

Breadcrumbs allow you to see a log of actions that led up to an error. By default, error reports automatically include breadcrumbs for the last 25 events which occurred.

Automatically captured breadcrumbs

By default, Bugsnag captures the following events as breadcrumbs.

  • Clicks
  • Errors
  • Console logs, warnings, and errors
  • Page load, hide, and show
  • DOMContentLoaded events
  • Pop state
  • History push state and replace state
  • Hash change
  • HTTP requests

For more information or to disable particular classes of automatic breadcrumb generation see configuration options.

Attaching custom breadcrumbs

You can can use the leaveBreadcrumb(message, metadata) method to log potentially useful events in your own applications:

Bugsnag.leaveBreadcrumb('User clicked a button')

The time and order of breadcrumbs will be recorded and shown in the dashboard.

The metadata argument is optional and can be used to attach to additional information to a breadcrumb:

Bugsnag.leaveBreadcrumb('Order summary requested', {
  amount: 4500,
  currency: 'EUR',
  nItems: 21
})

Identifying users

In order to correlate errors with customer reports, or to see a list of users who experienced each error, it is helpful to capture and display user information on your Bugsnag dashboard.

You can set the user information of an error report using the user configuration property when Bugsnag starts or via an onError callback.

Bugsnag.start({
  onError: function (event) {
    event.setUser('3', 'bugs.nag@bugsnag.com', 'Bugs Nag')
  }
})

For information on doing so, see Adding user data.

Tracking releases

Configure your app version to see the release that each error was introduced in.

Bugsnag.start({ appVersion: '4.10.0' })

Then set up a build tool integration to enable linking to code in your source control provider from the releases dashboard, timeline annotations, and stack traces.

Session tracking

Bugsnag tracks the number of “sessions” that happen within your application. This allows you to compare stability scores between releases and helps you to understand the quality of your releases.

Sessions are captured and reported by default. This behavior can be disabled using the autoTrackSessions configuration option.

In the browser, Bugsnag will automatically report a session each time:

  • The page loads
  • The URL changes via history.pushState() or history.replaceState()

For more information about manually controlling session tracking, see Capturing sessions.

Next steps

  • View @bugsnag/js, the library powering Bugsnag for JavaScript, on GitHub
  • Get support for your questions and feature requests