Browser monitoring and the Node.js agent

With the Node.js agent, you can add browser instrumentation to your web pages. To use with your Node.js agent, ensure you have the latest release of the Node.js agent.

To enable browser monitoring in the user interface, follow the procedures to install the browser agent. Then follow the procedures in this section to set up the Node.js agent.

Insert the JavaScript header

Instrumentation for the Node.js agent can continue beyond your application into end users' browsers. The newrelic module can generate script headers which, when inserted into your HTML templates, will capture the end users' page load times. The headers must be manually injected, but no extra configuration is necessary.

At the beginning of your html page's head tag, insert the results of newrelic.getBrowserTimingHeader() after any CHARSET meta tags.
Exception: For maximum Internet Explorer compatibility, insert the results of newrelic.getBrowserTimingHeader() after any X-UA-COMPATIBLE HTTP-EQUIV meta tags.
Call the header once for every request. Do not cache the header.

Generating headers is fast, and it does not require your application to make extra requests to New Relic.

Framework examples

Here are some examples of how to set up browser monitoring with different frameworks and templates.

This example uses Express, a web application framework, and jade, a template module. Although the specifics are different with other frameworks, this general approach should work in most cases.

The simplest way to insert browser timing headings is to pass the newrelic module into your template, and then call newrelic.getBrowserTimingHeader() from within the template.

In your app.js:

const newrelic = require('newrelic');
const app = require('express')();
// in express, this lets you call newrelic from within a template
app.locals.newrelic = newrelic;

app.get('/user/:id', function (req, res) {
  res.render('user');
});
app.listen(process.env.PORT);

In your layout.jade:

doctype html
html
head
  != newrelic.getBrowserTimingHeader()
  title= title
  link(rel='stylesheet', href='stylesheets/style.css')
body
  block content

This example uses Express with Swig.

In your app.js:

const newrelic = require('newrelic');

const http = require('http')
const path = require('path')
const swig = require('swig')

const app = require('express')();

app.locals.newrelic = newrelic;

//taken from http://paularmstrong.github.io/swig/docs/#express
app.engine('html', swig.renderFile);
app.set('view engine', 'html');
app.set('views', __dirname + '/views');

app.get('/user/:id', function (req, res) {
  res.render('user');
});

app.listen(process.env.PORT);

In your views/user.html:

<!DOCTYPE html>
<html>
  <head>
    {{ newrelic.getBrowserTimingHeader() }}
    <title>Hello</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

This example uses hapi.js and handlebars. Other similar templating languages typically require triple brackets; for example, using mustache with hogan-express. This helps prevent escaping of the script content.

Using hapi, in your app.js:

const newrelic = require('newrelic');
const Hapi = require('hapi');
const server = new Hapi.Server(parseInt(PORT), '0.0.0.0', {
  views: {
    engines : {html: 'handlebars' },
    path : __dirname + '/templates'
  }
});

function homepage(request, reply) {
  const context = {
    // pass in the header each request
    nreum : newrelic.getBrowserTimingHeader(),
    content : ...
  };

  reply.view('homepage', context);
};

server.route({
  method : 'GET',
  path : '/',
  handler : homepage
});

server.start();

In your templates/homepage.html:

<!DOCTYPE html>
<html>
  <head>
    {{{ nreum }}}
    <title>Hello</title>
  </head>
  <body>
    {{ content }}
  </body>
</html>

Disable header generation

By default, calls to newrelic.getBrowserTimingHeader() should return valid headers. To disable header generation without removing your template code: In your newrelic.js file, add:

browser_monitoring : {
    enable : false
}

You can also set the environment variable NEW_RELIC_BROWSER_MONITOR_ENABLE=false.

Caution

Always leave ssl between the agent and the New Relic collector when using browser monitoring.

You can safely leave the API calls in place even if you are not using browser monitoring or the newrelic module.

If browser monitoring is disabled, or if there is an error so that working headers cannot be generated, the newrelic module generates an innocuous HTML comment.
If you disable the newrelic module completely, no content will be generated.

Browser monitoring and the Node.js agent

Insert the JavaScript header

Framework examples

Express and jade

Express and Swig

Hapi.js and handlebars

Disable header generation

Caution

Browser monitoring and the Node.js agent

Insert the JavaScript header .css-21sua1{background:none;border:none;width:0;padding:0;}

Framework examples

Express and Swig

Hapi.js and handlebars

Disable header generation

Caution

Insert the JavaScript header