Vue.js

Crash Reporting 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 then monitor JavaScript errors.

Once Raygun is installed Raygun4JS will automatically monitor your application for errors with Crash Reporting

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('enableCrashReporting', true);

Step 3 - Setup a custom error handler

In order errors to be sent to Raygun, we need to setup a custom error handler. Modify your main.js file, or where ever your main app setup is, to add the error handler like so:

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

Step 4 - Release

Deploy Raygun into your production environment for best results, or raise a test exception. Once we detect your first error event, the Raygun app will automatically update.

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.

Optional - Enable Real User Monitoring

Enable Real User Monitoring to also track your website's performance.

<script type="text/javascript">
  rg4js('enablePulse', true); // Enables Real User Monitoring
</script>