Vue Storefront is now Alokai! Learn More
NewRelic application config for Alokai Cloud

NewRelic application config for Alokai Cloud

Alokai when hosted on Alokai cloud can be configured to support the following features of New Relic;

  • Application Performance Monitoring (APM)
  • Browser monitoring
  • Log ingestion

Prerequisites

Installation & Configuration

  1. Setup License keys and APM
  2. Setup Log Management (Fluentd)
  3. Setup Browser Agent (optional)

Setup License keys and APM

As Alokai is deployed in a Docker Container we will instrument Alokai this way.

  1. Add newrelic to your package.json:
"newrelic": "latest",
  1. Select some application name you will use for communicating with NewRelic services and prepare your license key

Update your environment via Farmer API to add new environment variables Use either PATCH or PUT requests

and ensure that env_var field in payload contains at least

{
   [...]
   "env_var": [
      {
        "is_secret": true,
        "name": "NEW_RELIC_LICENSE_KEY",
        "value": "some_key"
      },
      {
        "name": "NEW_RELIC_APP_NAME",
        "value": "some_key"
      },
      {
        "name": "NEW_RELIC_NO_CONFIG_FILE",
        "value": "true"
      }
    ],
    [...]
}

you can optionally enable distributed tracing by adding this environment variable:

      {
        "name": "NEW_RELIC_DISTRIBUTED_TRACING_ENABLED",
        "value": "true"
      },

Setup Log Management (Fluentd)

  1. Install required packages:
  • @newrelic/winston-enricher
  • nuxt-winston-log

Make changes to nuxt.config.js:


add the following imports and variables at the top:

import { transports, format } from 'winston'
import path from 'path'

const newrelicFormatter = require('@newrelic/winston-enricher')
const { combine, timestamp, prettyPrint } = format
const logFile = path.resolve(process.cwd(), './logs', 'app.log');

Add nuxt-winston-log to the top of the modules array:

export default {
  modules: [
    'nuxt-winston-log',
  ],

...and add a winstonLog object into the bottom of the default object:

  winstonLog: {
    loggerOptions: {
      transports: [
        new transports.Console(),
        new transports.File(
          {
            filename: logFile,
            handleExceptions: true,
            format: combine(
              timestamp(),
              prettyPrint(),
              newrelicFormatter()
            ),
          }
        )
      ]
    }
  }

Push these changes, wait for the site to build and deploy and then visit the site. Logs in New Relic should now have data.

Setup Browser Agent (optional)

  1. Visit https://one.newrelic.com/nr1-core/browser-nr1/browser-new-application
    Step 1: Select Copy/Paste Javascript code
    Step 3: Select Yes and search for your APM application name (as set in NEW_RELIC_APP_NAME above), click Enable
    Copy the script to clipboard
  2. Create a new file /static/newrelic.js and paste the content (removing <script> tags)
  3. In nuxt.config.js within the head object, add a script array (or prepend if existing):
script: [
  {
    src: "/newrelic.js",
    async: true
  }
]

Push these changes, wait for the site to build and deploy and then visit the site. Browser monitoring in New Relic should now have data.