Install the browser agent

To get started with , add our browser agent to the HTML of the views you want to monitor. The browser agent is a snippet of JavaScript code that monitors the performance of your site and sends that data to New Relic.

Before you begin

If you haven't done so, you may want to check that your browser app meets our compatibility and requirements.

There are four ways to install the browser agent. Depending on your specific needs, you can:

Go to one.newrelic.com > Integrations & Agents > Browser and mobile > Browser monitoring and follow the instructions to generate the browser JavaScript snippet in the UI.

Get your browser snippet

Once you have the snippet, paste it as close to the top of your <head> tag as possible, but after any position-sensitive META tags (such as X-UA-Compatible and charset).

For more detailed information about the placing the snippet, see JavaScript placement requirements.

(If you'd like to install the browser agent via npm, see our @newrelic/browser-agent package.)

Caution

Delaying instantiation causes the agent to miss information until it's fully loaded and initialized. The order of execution of these scripts does lead to some loss in instrumentation data from the start of page views.

For possible performance or other reasons, you may wish to delay the initialization of the browser agent from the start of the page load cycle. You won't be able to use the newrelic API until the agent is fully initialized. This delay also creates incomplete data in your browser monitoring UI.

Once the agent is fully initialized, it functions as expected. Any delay also affects when the agent wraps globals or subscribes to events relative to other libraries or code that affects captured data.

You can delay the agent initialization in these ways:

Add a script-src tag with the async attribute.
Add a script-src tag with the defer attribute.
Use dynamic import or chronologically late placement of the loader code.

Your page's src must point to a valid agent loader version in our CDN. For example, the URL that always contains our current Pro+SPA agent release is https://js-agent.newrelic.com/nr-loader-spa-current.min.js. CSP is required to load external third-party scripts.

To determine when you can start calling the newrelic API, subscribe to an event at the global scope:

window.addEventListener('newrelic', (evt) => {
  if (evt.detail.loaded) {
    // you can start using newrelic.interaction(), etc. now
  }
})

With an APM agent, you can deploy browser monitoring without manually adding the snippet to your code. When you restart the agent, it automatically uses the latest version of the browser agent.

If you're using an APM (application performance monitoring) agent to monitor the backend of your browser app and you've got a non-SPA app, then we recommend using this method.

There are specific steps for each APM agent:

If you'd prefer to create your browser snippet programmatically, you can do so via our NerdGraph, our GraphQL API.

For more on this, see our NerdGraph tutorial to create a browser snippet and configure it.

Once you have the snippet, add it to the <head> tag of your app.

If you want to automate browser monitoring deployment across multiple web apps, you can use NerdGraph and our browser agent npm package to configure and deploy the agent as part of your application build process.

For more on this, see instrument multiple apps with npm and NerdGraph.

What's next?

When you've installed the browser agent, wait a few minutes and look for the data in our browser monitoring UI.

If it's been more than 15 minutes and you're not seeing data, see troubleshoot your browser installation.

Once you're seeing browser data in the UI, here are some next steps on how you can get the most out that data:

Install the browser agent

Before you begin