Rollbar offers error monitoring integration for Vue apps through the vue-rollbar plugin and the Javascript SDK. This guide will show you how to add a global exception handler to catch all uncaught errors in your Vue app. It will also send helpful information from the request like the remote IP address.

For a more in-depth tutorial on using a Vue app with Rollbar, including a sample app, please read our blog article Error tracking with Vue.js.

Quick Start

1. Log into your Rollbar account dashboard.
2. Go to Settings → Project Access Tokens.
3. To install the vue-rollbar SDK in your project through npm, open the command prompt in the project root directory and run the command below.

npm install vue-rollbar --save

4. Add Rollbar in the main.js file. You can find main.js file under the src folder in your root project directory.

var Rollbar = require('vue-rollbar');

5. Next, you need to use Rollbar with a post_client_item access token and some optional parameters.

Vue.use(Rollbar, {
     accessToken: 'post_client_item_access_token_here',
     captureUncaught: true,
     captureUnhandledRejections: true,
     enabled: true,
     environment: 'production',
     payload: {
       client: {
            javascript: {
               code_version: '1.0',
               source_map_enabled: true,
               guess_uncaught_frames: true
            }
       }
   }
});

6. Finally, add the Rollbar error reporting method in the Vue.config.errorHandler.

Vue.rollbar.error(err);

Upload source maps to Rollbar

To upload the source maps, you need to add the Rollbar Source Maps API call, typically during the production build stage. Here is an using curl:

curl https://api.rollbar.com/api/1/sourcemap/ \
       -F access_token='post_server_item_access_token_here'\
       -F version=’1.0’ \
       -F minified_url=https://s3.us-east-2.amazonaws.com/rollbar-example/app.[hash].js \
       -F source_map=dist/static/js/app.[hash].js.map \
       -F App.vue=App.vue \
       -F HelloWorld.vue=HelloWorld.vue

Usage

In the installation section, we configured Rollbar to capture all unhandled exceptions. In addition, we have several methods to log items manually or add extra metadata.

Logging a Specific Message

You can log your own messages anywhere in your app. For example, to log a debug message:

Vue.rollbar.debug('Here is some debug message');

Adding Context Information

You can pass user information as context like this:

 Vue.use(Rollbar, {
     accessToken: 'post_client_item_access_token_here',
     captureUncaught: true,
     captureUnhandledRejections: true,
     enabled: true,
     environment: 'production',
     payload: {
       client: {
            javascript: {
               code_version: '1.0',
               source_map_enabled: true,
               guess_uncaught_frames: true
            }
      },
       person: {
           id: 456,
           username: 'foo',
           email: 'foo@example.com'
       }
    }
});

Exception Logging

If you wish to report errors to Rollbar inside a try/catch block, add the following:

try {
    JSON.parse(this.json)
} catch(e) {
     Vue.rollbar.error(e)
}

Configuration

Setting up a post_client_item access token should be enough for basic configuration. You can read more about the other options in the Configuration and Method Reference docs.

Vue.use(Rollbar, {
     accessToken: 'post_client_item_access_token',
     captureUncaught: true,
     captureUnhandledRejections: true,
     enabled: true,
     source_map_enabled: true,
     environment: 'production',
     payload: {
       client: {
            javascript: {
               code_version: '1.0'
            }
       }
     }
});