Page load timing in Node.js

To use page load timing (sometimes referred to as real user monitoring or RUM) with New Relic's Node.js agent, use the latest release of the Node.js agent.

To enable page load timing in the user interface, use the Browser settings. Then follow the procedures in this section to set up page load timing with New Relic's 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.

  1. 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.

  2. 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 page load timing with different frameworks and templates.

Express and jade

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:

    var newrelic = require('newrelic');
    var 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
Express and Swig

This example uses Express with Swig.

In your app.js:

    var newrelic = require('newrelic');

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

    var 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>
Hapi.js and handlebars

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:

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

    function homepage(request, reply) {
      var 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.

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

You can safely leave the API calls in place even if you are not using page load timing or the newrelic module.

  • If page load timing 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.

For more help

Additional documentation resources include:

Join the discussion about Node.js monitoring in the New Relic Online Technical Community! The Technical Community is a public platform to discuss and troubleshoot your New Relic toolset.

If you need additional help, get support at support.newrelic.com.