Nuxt.js

Nuxt.js is a full-stack framework for JavaScript and TypeScript web applications. This guide covers setting up Real User Monitoring for an existing Nuxt.js application using the Raygun4JS provider.

Step 1 - Integrating Ryaugn4JS into your application

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 two main things.

1. Fetches Raygun4JS from its CDN
2. Enables Raygun4Js and Real User Monitoring

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('enablePulse', true);
        `,
        type: 'text/javascript'
      }
    ],
    __dangerouslyDisableSanitizersByTagID: {
      raygun: ['innerHTML'],
      raygunConfig: ['innerHTML']
    }

  //Your other head config
  },

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.

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.