| title | tags | translate | metaDescription | redirects | freshnessValidatedDate | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Instrumentation for browser monitoring |
|
|
For an overview of instrumentation for browser's page load timing and browser monitoring features, start here. |
|
never |
For standard page load timing, sometimes referred to as real user monitoring (RUM), we measure the overall time to load the entire webpage. Additional monitoring after page load provides details on in-page AJAX calls, JavaScript errors, and other events and interactions.
Our can leverage the New Relic agent to dynamically inject JavaScript into pages as they are built, in order to collect more detailed backend timing information. Browser can also monitor apps with single-page application (SPA) architectures.
To collect data, browser monitoring uses JavaScript elements pasted or injected into your webpages, typically as part of the HEAD of the page, containing configuration details and essential browser environment instrumentation. Once the page finishes loading, an additional script is downloaded from a CDN server. This additional script processes the collected data and reports it back to New Relic via bam.nr-data.net so that you can see the data in your New Relic account.
The script elements can be injected automatically or via the agent API by an APM agent installed in the backend application, or they can be inserted manually via copy/paste. Both API calls and the copy/paste method allow you to control when and where the script elements are inserted.
We use these methods to collect the page load timing information:
<th>
<DNT>
**Collecting page load timing information**
</DNT>
</th>
</tr>
<td>
For browsers that implement the [Navigation Timing Specification](http://www.w3.org/TR/navigation-timing/ "Link opens in a new window") API, page load timing information is read from the browser and reported to New Relic by the browser agent. The appropriate values simply are read from the webpage's performance timing object to capture the timing information.
* <DNT>**Navigation start**</DNT>: `navigationStart`
* <DNT>**First byte**</DNT>: `responseStart`
* <DNT>**DOM ready**</DNT>: `DOMContentLoadedEventEnd`
* <DNT>**Page ready**</DNT>: `loadEventEnd`
</td>
</tr>
<tr>
<td>
Browsers <DNT>**without**</DNT> Navigation Timing Specification API
</td>
<td>
For browsers that do not implement the Navigation Timing Specification API, we rely on the [NREUM cookie](/docs/browser/new-relic-browser/miscellaneous/new-relic-cookies#nreum) and the browser agent to collect timing information.
<Callout variant="important">For browser agent version 1220 and higher, [usage of session cookies has been deprecated](/docs/release-notes/new-relic-browser-release-notes/browser-agent-release-notes/browser-agent-v1220/#removed-3rd-party-cookies), so this information is only relevant if you're using browser agent version 1216 and lower.</Callout>
</td>
</tr>
<tr>
<td>
Additional instrumentation
</td>
<td>
Browser also uses:
* Instrumentation of the `XMLHttpRequest` object to collect [AJAX timing data](/docs/browser/new-relic-browser/browser-pro-features/ajax-dashboard-identifying-time-consuming-calls).
* Instrumentation of JavaScript functions to collect uncaught [JavaScript errors](/docs/errors-inbox/browser-tab/).
</td>
</tr>
<tr>
<td>
Resource Timing API
</td>
<td>
For browsers that implement the [Resource Timing API](http://www.w3.org/TR/resource-timing/), the browser agent reads and reports [session trace](/docs/browser/new-relic-browser/browser-pro-features/session-traces-exploring-webpages-life-cycle) details.
</td>
</tr>
<tr>
<td>
Single page app (SPA) monitoring
</td>
<td>
For [SPA monitoring](/docs/browser/new-relic-browser/getting-started/compatibility-requirements-browser-monitoring#spa), we require the [Navigation Timing Specification](http://www.w3.org/TR/navigation-timing/) API and the `addEventListener` API.
</td>
</tr>
| **Method** |
|---|
| Browsers **with** Navigation Timing Specification API |
Injecting the JavaScript inline in the HEAD is an unusual requirement for a JavaScript library, and different from how third-party scripts are typically included. We require this so that browser provides accurate information without impacting page load performance.
The injected browser JavaScript elements wrap many of the browser's built in APIs to record information about JavaScript errors or callback timings. The unusual placement of the code element is necessary for the following reasons:
- The inline HEAD placement ensures the instrumentation code is loaded before all other scripts so that wrapping will occur when other libraries are registered.
- Inline code placement also eliminates the network round trips caused by externally referenced scripts.
For both https and http webpages, we transmit data via https. This summarizes when the data is transmitted to and from the webpage.
New Relic requires support of the SHA256 hash function, which some older operating systems do not support. If an end user lacks SHA256, the browser agent will not connect to New Relic and data will not be sent. <th>
<DNT>
**Frequency**
</DNT>
</th>
</tr>
<td>
Once following page load via https
</td>
</tr>
<tr>
<td>
Send page load timing data
</td>
<td>
Once following page load via https
</td>
</tr>
<tr>
<td>
Send page view timing data (`PageViewTiming`)
</td>
<td>
Data is sent 10 seconds after the initial page load, and then every 30 seconds afterward. If the harvest payload size is greater than 16 KB, the data is sent early.
</td>
</tr>
<tr>
<td>
Send AJAX and JavaScript error data
</td>
<td>
Once every 10 seconds when there is activity via https
</td>
</tr>
<tr>
<td>
Send session trace data
</td>
<td>
Every ten seconds when there is activity and a session trace is occurring via https
</td>
</tr>
<tr>
<td>
Send SPA data
</td>
<td>
At the end of an interaction via https
</td>
</tr>
| **Data transmission** |
|---|
| Fetch the agent script |