1. Home
  2. Language Guides
  3. JavaScript
  4. Crash Reporting
  5. Vue.js

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

Package Manager
CDN
npm install raygun4js

yarn add raygun4js

bun add raygun4js

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

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

Add the following snippet to the beginning of the <head> tag within your markup. Please include this snippet before any other <script> tag references are made to ensure that Raygun has the best chance to capture all error events on the page.

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

The above snippet will fetch 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.

Alternatively, you can download the production script (minified) or the development script (full source). Note: If you encounter a situation where no events are appearing within Raygun, you may need to hard code the protocol so that the CDN matches your hosting environment. This could look like one of the following:

  • https://cdn.raygun.io/raygun4js/raygun.min.js
  • http://cdn.raygun.io/raygun4js/raygun.min.js

This will be in replacement of //cdn.raygun.io/raygun4js/raygun.min.js.

In your main app setup code, paste the following to configure Raygun:

rg4js('apiKey', 'paste_your_api_key_here');
rg4js('enableCrashReporting', true);

In order for errors to be sent to Raygun, we need to setup a custom error handler. Modify your main app setup code 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');

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

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

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

On this page: