---
title: Browser monitoring and the Node.js agent
source: https://docs.newrelic.com/docs/apm/agents/nodejs-agent/extend-your-instrumentation/browser-monitoring-nodejs-agent
---
With the Node.js agent, you can add [browser instrumentation](https://docs.newrelic.com/docs/browser/new-relic-browser/getting-started/introduction-new-relic-browser) to your web pages. To use browser monitoring with your Node.js agent, ensure you have the [latest release](https://docs.newrelic.com/docs/agents/nodejs-agent/installation-configuration/installing-maintaining-nodejs#upgrading) of the Node.js agent.
To enable browser monitoring in the user interface, follow the procedures to [install the browser agent](https://docs.newrelic.com/docs/browser/new-relic-browser/installation/install-new-relic-browser-agent). Then follow the procedures in this section to set up the Node.js agent.
## Insert the JavaScript header [#procedures]
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 [#variables]
Here are some examples of how to set up browser monitoring with different frameworks and templates.
**Express and jade**
This example uses [Express](http://expressjs.com), a web application framework, and [jade](http://jade-lang.com), 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`:
````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`:
```pug
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](https://github.com/paularmstrong/swig "Link opens in a new window").
In your `app.js`:
````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`:
```html
{{ newrelic.getBrowserTimingHeader() }}
Hello
Hello World
```
````
**Hapi.js and handlebars**
This example uses [hapi.js](http://hapijs.com/) and [handlebars](http://handlebarsjs.com). Other similar templating languages typically require triple brackets; for example, using [mustache](https://mustache.github.io/mustache.5.html) with [hogan-express](https://github.com/vol4ok/hogan-express). This helps prevent escaping of the script content.
Using **hapi**, in your `app.js`:
````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`:
```html
{{{ nreum }}}
Hello
{{ content }}
```
````
## Disable header generation [#disabling]
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:
```js
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.