Nuxt.js

Nuxt.js is a full-stack framework for JavaScript and TypeScript web applications. This guide covers setting up 'client-side' Crash Reporting for an existing Nuxt.js application using the Raygun4JS provider. For 'server-side' Crash Reporting, see the Raygun Node.JS provider for more information.


In order to include Raygun4JS on each page in your application, we'll need to update the nuxt.config.js file so that it will add the Raygun setup code into the <head/> of the rendered document.

Open your nuxt.config.js file, in the root of your project. Add a script section, and a __dangerouslyDisableSanitizersByTagID section inside the head object; like in the example below.

This snippet does three main things.

  1. Fetches Raygun4JS from its CDN
  2. Enables Raygun4Js and Crash Reporting
  3. Sets up a custom Vue error handler that catches unhandled exceptions and sends them to Raygun.

Your nuxt.config.js file should look similar to the following:

 head: {
    script: [
      {
        hid: 'raygun',
        innerHTML: `
          !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");`,
        type: 'text/javascript'
      },
      {
        hid: 'raygunConfig',
        innerHTML: `
          rg4js('apiKey', 'paste_your_api_key_here');
          rg4js('enableCrashReporting', true);
        `,
        type: 'text/javascript'
      }
    ],
    __dangerouslyDisableSanitizersByTagID: {
      raygun: ['innerHTML'],
      raygunConfig: ['innerHTML']
    }

  //Your other head config
  },
  vue: {
    config: {
      errorHandler(error, vm, info) {
          window.rg4js('send', error);
      }
    }
  },

It's necessary to use __dangerouslyDisableSanitizersByTagID to create an <script> tag with Nuxt.js. The primary risk from __dangerouslyDisableSanitizersByTagID occurs when including untrusted data in HTML. All of the provided examples are either static strings, or interpolate data directly from the process's environment variables. As such, there is no risk of these issues when using the examples as provided.


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.


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