New Relic Browser and the Node.js agent

With the Node.js agent, you can add New Relic Browser instrumentation to your webages. To use Browser with your Node.js agent, ensure you have the latest release of the Node.js agent.

To enable Browser in the user interface, use the Browser settings. 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.

  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 New Relic Browser 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 the New Relic collector when using browser monitoring.

You can safely leave the API calls in place even if you are not using New Relic Browser or the newrelic module.

  • If Browser 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.