Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(Browser): browser doc audit #18935

Merged
merged 8 commits into from
Oct 15, 2024
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,13 @@ freshnessValidatedDate: never

## Problem

If you have just configured your application with <InlinePopover type="browser"/>, wait a few minutes for data to appear. If you have already waited a few minutes and you still do not see any data, try these troubleshooting tips. Some of these tips depend on whether you [deployed your app](/docs/browser/new-relic-browser/getting-started/adding-apps-new-relic-browser) by allowing browser monitoring to automatically insert the JavaScript snippet into your APM-monitored app or by inserting the JavaScript snippet yourself.
If you have just configured your application with <InlinePopover type="browser"/>, wait a few minutes for data to appear. If you have already waited a few minutes and you still do not see any data, try these troubleshooting tips. Some of these tips depend on whether you [deployed your app](/docs/browser/new-relic-browser/getting-started/adding-apps-new-relic-browser) by allowing browser monitoring to automatically insert the JavaScript snippet into your APM-monitored app or by inserting the JavaScript snippet through direct placement or the NPM package.

## Solution

Recommendation: Before following specific troubleshooting procedures, run the [Diagnostics browser checks](/docs/agents/manage-apm-agents/troubleshooting/new-relic-diagnostics). Once Diagnostics CLI is downloaded, target the browser checks by running the command-line options: `/nrdiag -browser-url YOUR-WEBSITE-URL -suites browser`. The information returned from Diagnostics CLI can be used when communicating with New Relic Support.
Recommendation: Once Diagnostics CLI is downloaded, target the browser checks by running the command-line options: `/nrdiag -browser-url YOUR-WEBSITE-URL -suites browser`. The information returned from Diagnostics CLI can be used when communicating with New Relic Support.

If your browser monitoring agent was deployed for an account monitored with an <InlinePopover type="apm"/> agent, see [APM deployments](#apm-tips). If your browser monitoring agent was deployed using the JavaScript copy/paste method, see [Copy/paste deployment](#manual-tips). If you are unsure which you have, the Diagnostics tool will return the deployment method.
If your browser monitoring agent was deployed for an account monitored with an <InlinePopover type="apm"/> agent, see [APM deployments](#apm-tips). If your browser monitoring agent was deployed using the JavaScript copy/paste method, see [Copy/paste deployment](#manual-tips). Installations via NPM will require self-troubleshooting as that depends and varies based on your project build and bundler. If you are unsure which you have, the Diagnostics tool will return the deployment method.

You can also troubleshoot situations where you are missing only [AJAX](/docs/browser/new-relic-browser/troubleshooting/troubleshooting-ajax-data-collection) or [session trace](/docs/browser/new-relic-browser/troubleshooting/troubleshooting-session-trace-collection) data.

Expand Down Expand Up @@ -69,30 +69,12 @@ These troubleshooting steps apply to problems when the browser monitoring agent

```html
<script type="text/javascript">
(window.NREUM||(NREUM={})).loader_config={xpid:"VRUGVVJS";window.NREUM||(NREUM={}),__nr_require=function a(b,c,d){ ...
;window.NREUM||(NREUM={});NREUM.init={ ...
Copy link
Contributor

@paperclypse paperclypse Oct 11, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jeff-colucci Are the JavaScript examples incomplete on purpose?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems to be the correct example based on the audit doc I got, the PR has been reviewed by the SMEs and it didn't come up but I will double check just to make sure before publishing

```

OR like this:
Also verify that a line like this exists somewhere in the HTML:

```html
<script type="text/javascript">
window.NREUM||(NREUM={}),__nr_require=function a (b,c,d){ ...
```

Also verify that a second script element exists in one of two locations, depending on the app server agent language.

* <DNT>**Go**</DNT>: n/a
* <DNT>**Java**</DNT>: Before the `</body>` tag (which must be added to the page if missing)
* <DNT>**.NET**</DNT>: Immediately before the first script element
* <DNT>**Node.js**</DNT>: Immediately before the first script element
* <DNT>**PHP**</DNT>: At the end of the body element
* <DNT>**Python**</DNT>: In the head element or at the end of the body element
* <DNT>**Ruby**</DNT>: Immediately before the first script element

The second tag contains configuration and timing data, and looks like this:

```html
<script type="text/javascript">
window.NREUM||(NREUM={});NREUM.info={"beacon":"bam.nr-data.net","errorBeacon":"bam.nr-data.net"...
```

Expand Down Expand Up @@ -191,7 +173,7 @@ These troubleshooting steps apply to problems when New Relic's browser monitorin

```html
<script type="text/javascript">
window.NREUM||(NREUM={}),__nr_require=function a (b,c,d){ ...
;window.NREUM||(NREUM={});NREUM.init={ ...
```

If the script element is missing, make sure that you have pasted it in and deployed your new code. If you have not yet pasted in the JavaScript snippet, you can copy it again from your browser app's [<DNT>**Settings**</DNT> page](/docs/browser/new-relic-browser/installation-configuration/browser-settings-ui-options-browser-monitoring). If applicable, restart the application serving these pages.
Expand Down Expand Up @@ -229,7 +211,7 @@ These troubleshooting steps apply to problems when New Relic's browser monitorin
</html>
```

If the Javascript is correctly placed, compare it with the original snippet you generated to ensure it is complete and identical. Incomplete or modified snippets may not report correctly.
If the Javascript is correctly placed, compare it in the final HTML served to your users with the original pasted snippet to ensure it's complete and identical. Incomplete or modified snippets may not report correctly. This could happen with frameworks that try to sanitize or alter raw javascript rendered without using the appropriate method.
jeff-colucci marked this conversation as resolved.
Show resolved Hide resolved
</Collapser>

<Collapser
Expand All @@ -243,7 +225,7 @@ These troubleshooting steps apply to problems when New Relic's browser monitorin
id="manual_network_access"
title="Verify end-user network access"
>
If your application is loaded primarily within a secured local network, ensure that your users can reach the necessary network endpoints to report browser data. This includes New Relic's [CDNs and beacon](/docs/browser/new-relic-browser/performance-quality/security-new-relic-browser#cdn).
If your application is loaded primarily within a secured local network, ensure that your users can reach the necessary network endpoints to report browser data. This includes New Relic's [CDNs and beacon](/docs/browser/new-relic-browser/performance-quality/security-new-relic-browser#traces).
</Collapser>

<Collapser
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -78,3 +78,7 @@ Some common reasons that this can occur are:
Your New Relic weekly performance report includes the number of page views. This is the total number of page loads that we have recorded over the time period. After an end user's browser loads a page that includes page load timing, the JavaScript loads and reports its timing data. If the user navigates away from the page before the JavaScript executes, data is not sent for that page, and it is not included in the total page views report.
</Collapser>
</CollapserGroup>

### Ad blockers

End users with ad blockers, either as a browser extension or plug-in or installed through their private DNS or router, will prevent the agent from loading and capturing page views. The only workaround to this is to use a [reverse proxy when fetching the agent code and sending data](/docs/browser/new-relic-browser/configuration/proxy-agent-requests/).
jeff-colucci marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,11 @@ Follow these troubleshooting steps for browser monitoring:

1. Check whether browser monitoring is properly installed in all of your application's pages.
2. If the JavaScript snippets are missing, or if users are unable to send data to New Relic, follow the steps for [troubleshooting browser monitoring installation](/docs/browser/new-relic-browser/installation-configuration/troubleshooting-browser-monitoring-installation).
3. If you have a single-page style application and are expecting to see your route changes as views, consider using [browser SPA monitoring](/docs/browser/single-page-app-monitoring/get-started/welcome-single-page-app-monitoring), which provides an integrated view of initial page loads and route changes.
3. If you have a single-page style application and are expecting to see your route changes as views, consider using [browser SPA monitoring](/docs/browser/single-page-app-monitoring/get-started/welcome-single-page-app-monitoring), which provides an integrated view of both initial page loads and route changes.

If browser monitoring is working properly, you may be seeing different results because New Relic collects and presents information differently from other analytics tools. For more information about how we collects data, see:
If browser monitoring is working properly, you may be seeing different results because New Relic collects and presents information differently from other analytics tools. For instance, `JavascriptErrors` and `AjaxRequest` are individually monitored and their data depends on when our agent observes them and what we can or decide to capture. For `BrowserInteraction`, we use our own custom instrumentation. And for vitals and metrics under `PageViewTiming` and `PageView`, the web-vitals library owned by Chrome team is the source of that data.
jeff-colucci marked this conversation as resolved.
Show resolved Hide resolved

For more information about how we collects data, see:
jeff-colucci marked this conversation as resolved.
Show resolved Hide resolved

* [Page load timing process](/docs/browser/new-relic-browser/page-load-timing-resources/page-load-timing-process)
* [Instrumentation for browser monitoring](/docs/browser/new-relic-browser/page-load-timing-resources/instrumentation-browser-monitoring)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ Our <InlinePopover type="browser"/> is inserting its JavaScript instrumentation

## Solution

New Relic agents attempt to inject the JavaScript in the optimum location, but if you encounter problems, try these troubleshooting steps.
New Relic agents attempt to inject the JavaScript in the best location, but if you encounter problems, try these troubleshooting steps.

1. Verify whether browser monitoring is the cause by [disabling browser monitoring](/docs/browser/new-relic-browser/installation/disable-browser-monitoring/).
2. If disabling browser monitoring solves the problem, investigate the source code for the page. Re-enable browser monitoring and check for the following possible issues:
Expand All @@ -25,4 +25,5 @@ New Relic agents attempt to inject the JavaScript in the optimum location, but i
* Occurrence of any `<head>` or `<body>` tags within the page's JavaScript.
* Use [http://validator.w3.org](http://validator.w3.org) to verify your page source, and check for serious markup validity issues or character encoding issues.
3. Eliminate any conflicts you find by revising the page structure, [disabling browser monitoring for that page,](/docs/browser/new-relic-browser/installation-configuration/disable-browser-monitoring-specific-pages) or switching to [manually instrumenting via agent API](/docs/browser/new-relic-browser/installation-configuration/browser-settings-ui-options-browser-monitoring#agent-instrumentation) for full control over script injection.
4. If you encounter other situations, contact [New Relic Support](https://support.newrelic.com/) and provide an accessible link to your page or the source code for it. Ensure browser monitoring is enabled in your link or source code.
4. Review our [compatibility list](/docs/browser/new-relic-browser/getting-started/compatibility-requirements-browser-monitoring/#frameworks-and-libraries) for known conflicts with other libraries that your site may be using.
5. If you encounter other situations, contact [New Relic Support](https://support.newrelic.com/) and provide an accessible link to your page or the source code for it. Ensure browser monitoring is enabled in your link or source code.
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,10 @@ freshnessValidatedDate: never

JavaScript (JS) error events are compiled on the [<InlinePopover type="browser"/> JS errors page](/docs/browser/new-relic-browser/browser-pro-features/javascript-errors-page-examining-errors-over-time). By default, they're grouped by error message. When you select a single error event, you'll see more detail in its <DNT>**Error Instances**</DNT> list. In some cases, one or more of the instances may not have a stack trace.

<Callout variant="tip">
Instead, you'll see the message, "<DNT>**This error is likely coming from a third-party site and no stack trace is available**</DNT>."
</Callout>

## Solution

First, see if you're able to reproduce the error on your site, and if so, verify that it shows a stack trace on your dev console or web inspector when it's open before the error occurs.

Enabling cross-origin resource sharing (CORS) can eliminate this issue, exposing the full details of the JS error to your application and allowing the error's stack trace to be captured by the browser agent.

There are many online resources that provide information on CORS enabling and settings. This MDN article has a [detailed description of CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS), with a section on [configuring response headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#The_HTTP_response_headers), and another on [CORS settings attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes). The Enable CORS website has information [how to enable CORS for various platforms](http://enable-cors.org/server.html).
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,30 +25,14 @@ If your application is instrumented with [<InlinePopover type="browser"/>](/docs

## Verify the page is instrumented [#verify-page-intrum]

Use your browser's dev console to verify page has been correctly instrumented. Enter `XMLHttpRequest` and/or `fetch` into the console.

If instrumentation has succeeded, the console should return something like:

```js
// XMLHttpRequest
ƒ (e){const t=new o(e),n=r.context...

// fetch
ƒ (){var t=3,n=(0,r().getTrace...
```

If instrumentation failed, you will see something like:
If you are using XMLHttpRequest, use your browser's dev console to verify page has been correctly instrumented. Enter `XMLHttpRequest` and/or `fetch` into the console. If instrumentation failed, you will see something like:

```js
// XMLHttpRequest
ƒ XMLHttpRequest() { [native code] }

// fetch
ƒ fetch() { [native code] }
```
<Callout variant="tip">
If you see this type of failure or you see a different response, AJAX instrumentation may be disabled or you may be using another script or library that is conflicting with New Relic instrumentation.
</Callout>

If you see anything else, then the verification has succeeded.

</Step>

Expand Down Expand Up @@ -95,7 +79,7 @@ If any of these items are not true, the AJAX instrumentation may not have initia

## Verify network access [#verify-network-access]

If the object is properly instrumented, try triggering an AJAX call in your application while monitoring network traffic in the browser's developer tools. Wait up to one minute, and look for a call to `bam.nr-data.net/jserrors` with an `xhr` parameter. If the call fails, check for network issues.
If the object is properly instrumented, try triggering an AJAX call in your application while monitoring network traffic in the browser's developer tools. Wait up to one minute, and look for a call to `bam.nr-data.net/jserrors` with an `xhr` parameter. If the call fails, check for network issues. Alternatively, look for a request to `bam.nr-data.net/events` with a payload that starts with `bel.7;2`.

If you don't see this call, if it fails with an error not related to network access, or if it succeeds but you still aren't seeing data, continue through the troubleshooting documentation.

Expand All @@ -109,7 +93,7 @@ If any of these items are not true, the AJAX instrumentation may not have initia

However, you can view them as assets within [session traces](/docs/browser/new-relic-browser/browser-pro-features/session-traces-exploring-webpages-life-cycle).

If you're using SPA monitoring, you can view them on the <DNT>**Breakdown**</DNT> tab of the <DNT>**Page views**</DNT> page.
If you're using SPA monitoring, you can view them on the <DNT>**AJAX**</DNT> tab of the <DNT>**Page views**</DNT> page.

Requirements for JSONP to be recognized:

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,4 +27,5 @@ Other reasons that you may not see session trace data include:

* The end users are not using browsers that support the [Resource Timing API](http://www.w3.org/TR/resource-timing/).
* The end users cannot post data to the `/resources` endpoint on `bam.nr-data.net`.
* The end users' clients don't allow the necessary [session cookies](/docs/browser/browser-monitoring/page-load-timing-resources/cookie-collection-session-tracking).
* The RUM response (very first agent request to `bam.nr-data.net`) returns a `st` OR `sts` flag of 0.
jeff-colucci marked this conversation as resolved.
Show resolved Hide resolved
* Session traces isn't enabled. Check the application settings page to ensure that you've enabled session traces and have made adjustments to your sample rates.
Loading