Error tracking in VueJS with Rollbar

#vue #rollbar #javascript

So you just deployed your killer application which took a significant amount of effort to build, being forward-thinking you decided to use Vue JS in order to give your users a smooth and seamless experience using your application. You extensively tested your application and are feeling pretty confident about how it will perform but because you know users will be interacting with your application from a wide range of browsers and devices you need a way to track errors, seeing what your users see before they reach out to you about it.

Lucky for you, Vue JS provides a global error handler which you can use to catch all uncaught exceptions which thrown anywhere in your app. You can set it up like this:

    // main.js
    Vue.config.errorHandler = function (err, vm, info) {
      // handle error
      // or log error
    };

For a basic app, adding a few lines as shown in the snippet above may be enough to help you catch and handle exceptions so that your app does not crash unexpectedly and ruin your users’ experience.

However, applications used by many users across different devices, browsers, and network conditions require more precise error handling. This is where services like Sentry and Rollbar are useful.

I especially like Rollbar because it provides real-time visibility into errors along with the corresponding stack trace and all the data you need to debug, including request parameters, browsers, IPs as well as real-time notifications via Slack and email so we can fix errors as soon as they occur.

Rollbar provides a JavaScript SDK which you can manually include in your app but adding Rollbar to your app is even more trivial if you use the official vue-rollbar plugin, just include the package in your project by installing from npm.

yarn add vue-rollbar

Then import and initialize vue-rollbar in the project’s main entry point, replacing the accessToken with your own token.


// main.js

import Vue from 'vue';
import Rollbar from 'vue-rollbar';
import App from './App.vue';

Vue.use(Rollbar, {
  accessToken: 'post_client_item_token_secret',
  captureUncaught: true,
  captureUnhandledRejections: true,
  enabled: true,
  environment: 'production',
  payload: {
    client: {
      javascript: {
        code_version: 'version-1',
      },
    },
  },
});

new Vue({
  render: h => h(App),
}).$mount('#app');

Go ahead and force an error by adding the following line just before Vue is initialized.

// main.js
JSON.parse('invalid json string');

new Vue({
  render: h => h(App),
}).$mount('#app');

If all goes well, this error should show up in your Rollbar Dashboard as seen below.

Click on the error to drill down and get more information about that particular error such as browser version, device OS and a full stack trace so you can easily find and fix the issue.

You can also track errors you already handle gracefully in your app with vue-rollbar as it exposes a debug function which you can call manually anywhere in your app, for example:


<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
  name: 'app',
  components: {
    HelloWorld,
  },
  mounted() {
    try {
      JSON.parse('Can not parse');
    } catch (error) {
      this.rollbar.debug(error);
    }
  },
};
</script>

If you minify your JavaScript code for use in production, you need to upload the corresponding source maps for your JavaScript files so that Rollbar can make sense of your code and display meaningful stack traces.

Usually, uploading source maps requires us to log in to the Rollbar Dashboard and manually upload our sourcemap or make a POST request to Rollbar but since we use webpack, we can automatically do this using the rollbar-sourcemap-webpack-plugin

yarn add rollbar-sourcemap-webpack-plugin -D

And add it to the plugins block of your webpack configuration file


// vue.config.js

import RollbarSourceMapPlugin from 'rollbar-sourcemap-webpack-plugin';

module.exports = {
  configureWebpack: {
    plugins: [
      new RollbarSourceMapPlugin({
        accessToken: 'post_server_item_token',
        version: 'version-1',
        publicPath: 'https://mywebsite.com'
      })
    ]
  }
}

Now every time you build your app, source maps are automatically uploaded to Rollbar and any errors that occur after you deploy will be captured and reported to Rollbar with the proper stack trace.

You’ll be able to see errors as they occur, how often they occur, as well as additional information to debug and fix.