Vue.js
Configuring Vue apps to use the Rollbar JavaScript SDK
To set up a Vue app with Rollbar, there are two key steps.
- 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.
- 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.
Updated about 1 year ago