With the Node.js agent, you can add browser instrumentation to your web pages. To use browser monitoring 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 ofnewrelic.getBrowserTimingHeader()
after anyCHARSET
meta tags.Exception: For maximum Internet Explorer compatibility, insert the results of
newrelic.getBrowserTimingHeader()
after anyX-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.
- 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 callnewrelic.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 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.