To get started with browser monitoring, you'll need to add our browser agent, a customized JavaScript code snippet, to your webpage HTML. Then the browser agent will monitor your app's performance and send that data to New Relic.
Follow the steps below to create a browser app in our UI, configure the browser agent, and then instrument your webpages with the agent.
Before you begin
Check to see if your browser app meets these compatibility requirements:
Create a browser app in our UI
First, create a browser app in our UI by going to one.newrelic.com. Click Add data, then under Data sources select Browser monitoring.
ヒント
Need to use an API to create a browser app? Check out this NerdGraph tutorial.
Choose a deployment method
When it comes to adding the browser agent to your webpages, you have two deployment methods:
Method 1: Enable via New Relic APM (recommended for non-SPA apps)
If you're using an
(application performance monitoring) agent to monitor the backend-side of your browser app, then you should use this APM option. 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.
または
Method 2: Copy/Paste JavaScript code (recommended for SPA apps)
- Use this method if you can't use the first option, due to reasons like you have a SPA app or your APM agent isn't supported for auto-injection ( Node.js, Java agents). If you choose this option, you'll copy the customized JavaScript snippet at the final step in the UI, once all configurations have been made, and paste it into your app's HTML.
In the UI, select a deployment method and move on to the next step.
(Optional) Enable distributed tracing
Next, you can choose to enable distributed tracing to help understand how your app's frontend and backend activity are connected. Read more about distributed tracing here.
Name your browser app
When selecting a name for your browser app, you've got two options:
Select an existing app already monitored by an APM agent.
Create a new name for a standalone browser app.
Choose one of these options and click Enable.
(For copy/paste method only) Inject the JavaScript snippet
If you selected the copy/paste option, it's time to add the JavaScript snippet to your browser app's HTML.
In the UI, copy the JavaScript snippet that's been customized for your app instrumentation, and paste it into the <head> tag for your web app.
ヒント
The head tag typically handles third party scripts, fonts, etc., that load on all your app pages, so you'll only need to paste it into one place. Make sure to 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 information on the snippet placement, see JavaScript placement requirements.
The JavaScript snippet is blurred in this screenshot because it contains sensitive data (account ID, license key, etc.). You must copy and paste your own unique JavaScript snippet from the UI.
Generate traffic for your app
Congratulations, you're done installing the browser agent! Now you'll need to generate traffic for your app and wait a few minutes for data to appear in New Relic.
ヒント
Not seeing data?
It may take several minutes after enabling the browser monitoring agent before your webpage data appear in New Relic. If you're still not seeing data, check out common browser installation problems and solutions.
次のステップ
- View your app data on the Summary page.
- Learn how to optimize your browser monitoring experience with our best practices guide for browser monitoring.
- Change your browser agent type from browser Lite to Pro or Pro+SPA.