Vue.js

Real User Monitoring for Vue.js applications is available using the Raygun4JS provider.

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

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

Step 1 - Install the Raygun4JS provider

Install the raygun4js library with NPM:

npm install raygun4js --save

Or with Yarn:

yarn add raygun4js

Step 2 - Configure Raygun

In your main.js file, or where ever your main app setup is, paste the following code to configure Raygun.

import rg4js from 'raygun4js';

rg4js('apiKey', 'paste_your_api_key_here');
rg4js('enablePulse', true); // Enables Real User Monitoring
rg4js('enableCrashReporting', true); // Optional, Enables Crash Reporting

Step 3 - Track route changes

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

Track route changes

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

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

Advanced Setup

For advanced setup instructions please refer to the Advanced Features documentation page.

Troubleshooting

For troubleshooting tips please refer to the Troubleshooting documentation page.