Vue.js

To set up a Vue app with Rollbar, there are two key steps.

1. Add Rollbar to the Vue object prototype before creating the first Vue instance. This ensures the Rollbar instance will be available in all Vue contexts.
2. Add Rollbar to Vue’s global error handler. Uncaught exceptions within the Vue app are sent to this handler, and appear in the browser console, but are not sent to the browser’s global error handler. Adding Rollbar here ensures that these errors are reported.

First install the Rollbar npm package.

npm install --save rollbar

Or if using yarn

yarn add rollbar

In your src/main.js (where your root Vue instance is created):

import Rollbar from 'rollbar';

// Set the Rollbar instance in the Vue prototype
// before creating the first Vue instance.
// This ensures it is available in the same way for every
// instance in your app.
Vue.prototype.$rollbar = new Rollbar({
  accessToken: 'POST_CLIENT_ITEM_TOKEN',
  captureUncaught: true,
  captureUnhandledRejections: true,
  payload: {
    // Track your events to a specific version of code for better visibility into version health
    code_version: '1.0.0',
    // Add custom data to your events by adding custom key/value pairs like the one below
    custom_data: 'foo'
  }
});

// If you have already set up a global error handler,
// just add `vm.$rollbar.error(err)` to the top of it.
// If not, this simple example will preserve the app’s existing
// behavior while also reporting uncaught errors to Rollbar.
Vue.config.errorHandler = (err, vm, info) => {
  vm.$rollbar.error(err);
  throw err; // rethrow
};

// Create the Vue app instance after adding the Rollbar
// instance to the Vue prototype above. 
// Your app may pass different options here.
new Vue({
  render: h => h(App),
}).$mount('#app')

You can now use Rollbar logging in your Vue components:

this.$rollbar.info('Hello world.');

Usage

The above example enables logging, and reporting of uncaught errors. To learn more about Rollbar logging, and all available options, see the main Rollbar.js documentation.

Upload source maps to Rollbar

To upload source maps, see the Rollbar Source Maps doc.

📘

For help with importing or requiring Rollbar into your project with Typescript or a version of ECMAScript (ES5/ES6/ES7/ES8/ES9), please see this document here

📘

For more information on rollbar.js, please see the docs here.