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.

Step 1: Add script

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

<script type="text/javascript">
  h&&h(b,c,d,f,g),g||(g=new Error(b)),a[e].q=a[e].q||[],a[e].q.push({

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.

Step 2: Configure Raygun

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);

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

Step 3: Setup a custom error handler

For errors to be sent to Raygun, we need to setup a custom error handler by setting a method on the Vue.config.errorHandler property.

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

Step 4: Track route changes

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.

Vue Router:

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

Step 5: Add user tracking (optional)

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: '',
  firstName: 'Firstname',
  fullName: 'Firstname Lastname'

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

View your data in 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.