Using the NewRelic agent with Nuxt

newRelicNuxt.md

Install the Agent

npm i newrelic

---

Add the newrelic.js file to the root

This file is downloaded from the New Relic node.js set up process.

Use ENV variables in newrelic.js

app_name and license_key were replace with variables to separate staging/prod NewRelic logging, and to keep the key out of the repo.

File: ./newrelic.js

exports.config = {
  // ...
  
  app_name: [process.env.NEW_RELIC_APPLICATION_ID],

  license_key: process.env.NEW_RELIC_LICENSE_KEY,
  
  // ...
}

(Remember to update your .env with the new ENV variables as well as your CI/CD)

NEW_RELIC_APPLICATION_ID="This will be the application name in New Relic"
NEW_RELIC_LICENSE_KEY="12345kdjlksdjfalsjf"

Addition to newrelic.js to supress child_process error

The following was appended to the bottom of the newrelic.js file.

File: ./newrelic.js

// ...

// For child_process node error: https://github.com/nuxt/nuxt.js/discussions/9303#discussioncomment-747909
module.exports.node = {
  child_process: 'empty'
}

---

NewRelic nuxtServerInit action was added

In our case, store/index.js was blank and the code below is the full file.

File: store/index.js

import newrelic from 'newrelic'

// NewRelic logging - https://github.com/nuxt/nuxt.js/discussions/9303#discussioncomment-747903
export const actions = {
  // NewRelic server init - https://github.com/nuxt/nuxt.js/issues/7960#issuecomment-878618721
  nuxtServerInit (_, ctx) {
    let innerNrBrowserHtml = newrelic.getBrowserTimingHeader()
    const scriptTagRegexp = /(<script.*?>)|(<\/script>)/g
    const links = innerNrBrowserHtml.matchAll(scriptTagRegexp)

    for (const match of links) {
      innerNrBrowserHtml = innerNrBrowserHtml.replace(match?.[0], '')
    }
    ctx..head.script.push({
      hid: 'newrelic',
      innerHTML: innerNrBrowserHtml,
      type: 'text/javascript'
    })

    if (!ctx..head.__dangerouslyDisableSanitizersByTagID) {
      ctx..head.__dangerouslyDisableSanitizersByTagID = {}
    }
    ctx..head.__dangerouslyDisableSanitizersByTagID.newrelic = [
      'innerHTML'
    ]
  }
}

---

nuxt.config.js was updated to include the newrelic external

My understanding is the NewRelic agent was not built to work with Nuxt, so we need to prevent Nuxt from bundling newrelic. A Webpack External basically uses a JS module directly without trying to bundle it or anything.

File: ./nuxt.config.js

// ...

export default {
  // ...
  
  // Build Configuration (https://go.nuxtjs.dev/config-build)
  build: {
    extend (config) {
      // Add newrelic as an external webpack dependency
      // https://github.com/nuxt/nuxt.js/issues/6236#issuecomment-619935335
      config.externals = [
        { newrelic: 'newrelic' }
      ]
    }
  }
}

This gist was made to summarize some of the solutions provided in this GitHub discussion: nuxt/nuxt#9303