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
- Log into your Rollbar account dashboard.
- Go to Settings → Project Access Tokens.
- 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
- 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');
- 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
}
}
}
});
- 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'
}
}
}
});
For more information on rollbar.js, please see the docs here.
Updated about a month ago