Vue.js

Crash Reporting and Real User Monitoring for Vue.js applications is avaliable using the Raygun4JS provider.

Raygun4JS is a library you can easily add to your website and web applications which allows you to then monitor JavaScript errors and frontend performance issues affecting your users.

Once Raygun is installed, it will automatically start monitoring your application for errors with Crash Reporting, and complete user sessions with Real User Monitoring.


Add the following snippet to your markup, before the closing </head> tag:

<script type="text/javascript">
  !function(a,b,c,d,e,f,g,h){a.RaygunObject=e,a[e]=a[e]||function(){
  (a[e].o=a[e].o||[]).push(arguments)},f=b.createElement(c),g=b.getElementsByTagName(c)[0],
  f.async=1,f.src=d,g.parentNode.insertBefore(f,g),h=a.onerror,a.onerror=function(b,c,d,f,g){
  h&&h(b,c,d,f,g),g||(g=new Error(b)),a[e].q=a[e].q||[],a[e].q.push({
  e:g})}}(window,document,"script","//cdn.raygun.io/raygun4js/raygun.min.js","rg4js");
</script>

This snippet fetches the Raygun4JS script from our CDN asynchronously, so it doesn't block the page-load. It will also catch errors that are thrown while the page is loading, and send them when the script is ready.


After the snippet, add the following lines which configures raygun4js alongside the products you want to enable.

<script type="text/javascript">
  rg4js('apiKey', 'API_KEY');
  rg4js('enableCrashReporting', true);
  rg4js('enablePulse', true);
</script>

note: Make sure to replace the 'API_KEY' with the API key linked to your Application.


In order errors to be sent to raygun, we need to setup a custom error handler.

For Vue.js 2.x, this can be done by setting a global error handler on the Vue.config.errorHandler property.

// Vue 2.x example
Vue.config.errorHandler = function(err, vm, info) {
  rg4js('send', {
    error: err,
    customData: [{ info: info }]
  });
};

For Vue.js 3.x, the .config property is part of the application instance. You will need to create your application instance first before you can assign the errorHandler property

// Vue 3.x example
const app = Vue.createApp({});

app.config.errorHandler = function(err, vm, info) {
  rg4js('send', {
    error: err,
    customData: [{ info: info }]
  });
};

app.mount('#app');

To track route changes, the trackEvent method should be called when route change was successful.

rg4js('trackEvent', {
  type: 'pageView',
  path: location.pathname
});

note: More information about the trackEvent method can be found here.

If you are using Vue Router, you can register a Global After Hook to then call the trackEvent method automatically on each transition:

router.afterEach((to, from) => {
  rg4js('trackEvent', {
    type: 'pageView',
    path: to.path
  });
})

You can setup user tracking to have a better idea of who is using your web application. To do so call the setUser method after your authentication step succeeds.

rg4js('setUser', {
  identifier: 'users_email_address_or_unique_id',
  isAnonymous: false,
  email: 'users_email_address@domain.com',
  firstName: 'Firstname',
  fullName: 'Firstname Lastname'
});

note: The identifier field is the only mandatory field and is used to uniquely identify the user within Raygun.


Congratulations, you have successfully implemented Raygun into your application!

tip: We recommend raising a test exception from your application right now to view your dashboard and test that everything is wired up correctly. If your setup is not working get in touch.

The provider is open source and available at the Raygun4js repository.