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.

Step 1 - Installation

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

Use of __dangerouslyDisableSanitizersByTagID

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.

Step 2 - 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.

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.