To get started with , you'll need to 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 app/site and sends that data to New Relic. You can add that code manually to your site, or use our APM agents to inject that code for you.
Before you begin
Before starting, you may want to check that your browser app meets our compatibility requirements.
Want to use our API to programmatically monitor your applications? See Browser monitoring with NerdGraph.
Install the agent
To install the browser agent: Go to one.newrelic.com > Add data > Browser and mobile > Browser monitoring and follow the instructions.
If you have questions about the install process, see Install methods.
Look for your data in New Relic
When you're done installing 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 Troubleshooting.
What's next?
Ideas for next steps:
- View your app data on the Summary page.
- Now that you've instrumented with the browser agent, go deeper with your data with our Improve your website tutorial.
- Learn how to optimize your browser monitoring experience with our Best practices guide for browser monitoring.
Install methods
When it comes to adding the browser agent to your webpages, you have two deployment methods:
- APM + browser monitoring: Use one of our APM agents to auto-instrument browser monitoring
- Browser monitoring only: Add our browser agent manually as a JavaScript snippet to your front-end HTML
Here's some guidance on these two methods.
APM + browser monitoring
If you're using an APM (application performance monitoring) agent to monitor the backend of your browser app, then we'd recommend using this method. We recommend this option for non-SPA apps because the APM agent will automatically deploy the browser agent to every page of your website and you'll automatically get the latest version of the browser agent whenever you restart your APM agent.
If you want to customize APM agent behavior, you can use our APM agent APIs. Here are those docs:
Browser monitoring only
Use this method if you can't use APM for whatever reason, like if your APM agent isn't supported for auto-injection (as is true for Node.js and some Java apps). If you use this method, the UI provides you with a customized JavaScript snippet at the end of the install process that and you can add to the HTML of any pages you want to monitor on your site.
Paste the JavaScript snippet within the HTML <head>
tag of your page. The head tag typically handles third party scripts, fonts, and other elements that load on all your app pages, so you only need to paste it into one place. Paste it as close to the top of the <head>
as possible, but after any position-sensitive META tags (such as X-UA-Compatible and charset). For more about the snippet placement, see JavaScript placement requirements.
Alternatively, and while we STRONGLY recommend the inline script path, you can also use a src script to insert the agent in an async
or defer
manner. For caveats and details, continue below.
Delaying browser monitoring
Caution
Delaying instantiation causes the agent to miss information until it is 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 theasync
attribute. - Add a
script-src
tag with thedefer
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 }})