JavaScript errors page: Detect and analyze errors

New Relic Browser's JS errors UI page shows you where your JavaScript errors are happening, and provides tools to help you figure out the root cause. You can also query and create dashboards of JS error data in Insights, or use the Browser API to monitor handled errors.

The Event log shows the browser interactions, AJAX calls, and traces that led up to an error.

Decode your minified JavaScript

If your JavaScript is minified, the errors on the JS errors page may not be very useful. To decode minified JavaScript and make these error stack traces more useful, you can upload JavaScript source maps to New Relic.

rpm.newrelic.com/browser > (select an app) > Browser application > JS errors: Use this page to group and filter errors, explore stack trace details, and examine trends. (If your UI page looks different, you may be using an older, deprecated UI.)

For example, if a JS error is occurring after an AJAX request that provides an error message, it could be that your AJAX request doesn't contain the right information. This results in a JS error due to a failed AJAX call.

Troubleshoot missing event logs

Some reasons for events in the event log not being present:

Agent version. To capture event log data your site must have SPA monitoring enabled (Browser agent version 1071 or higher).

JS error not part of a browser interaction. If the JS error occurs outside of an interaction, the related browser interaction details cannot be captured (for example: if an async JS file experiences an error).

A click triggered the JS error. In some cases if the error is a direct result of a click, no associated interactions are captured.

Without event logs or stack traces, you can use the error detail charts to analyze the impact the error has by browser type, device type, and URI.

View stack traces

Stack traces can show you if an error is breaking important functionality, or if it's a less important error. To view an error's stack trace (if available): go to rpm.newrelic.com/browser > (select an app) > Browser application > JS errors > (select an error) > Error instances.

Troubleshoot missing stack traces

Some reasons why you may not see a stack trace for an error:

If errors are not thrown, they will not produce a stack trace.

The JS script is hosted on a CDN or another external location, and New Relic can't see the errors originating from those scripts. This can be solved in some cases by using cross-origin resource sharing (CORS).

Use the JS errors UI page to get more information, including the event log. The JS errors page is designed to give you actionable information even without a stack trace.

Global and generic errors

New Relic wraps JavaScript functions to get information about thrown errors via the stack trace. If errors are not thrown, they will not be available. For example, if you have an AngularJS application, follow the troubleshooting procedures when AngularJS errors do not appear in the UI.

Unavailable errors include:

SyntaxError or Script error: These occur while the script is loading, so they do not produce a stack trace.

In-line JavaScript or event handler errors: These are unwrapped.

Errors thrown from third-party scripts that reside on another domain are not available.

Errors occurring on older browsers: These may not be able to provide a usable stack trace. In some cases, they may not provide a stack trace at all.

Error collection is done by wrapping JavaScript functions, so errors thrown by the browser at a lower level (such as cross-origin resource sharing errors) also are not available.

Deprecated JS errors UI

An older version of the JS errors UI page has been deprecated but will remain available for a limited time. To switch to this view: on the main JS errors page, select You're using the new JS errors, and then select Go back to classic version.

Use deprecated JS errors UI

The classic JS errors UI groups JS errors primarily by their stack traces, because errors with the same stack come from the same place in the code and thus, they likely have similar causes.

Stack trace details help isolate where an error occurred for specific browser types, including error stacks from browsers you may not have used during development. The stack trace includes the URL and an abbreviated location on the webpage and in the code.

Stack traces may vary between browsers, so the Browser agent converts each stack trace it collects into a "canonical stack trace" before grouping them together. Errors for which a stack trace is not available will also be grouped together, since no further stack information is available for more detailed grouping.

You may see Asian or other non-Latin characters in the displayed error messages. This can happen since messages appear in the browser in the local language, and this text will be captured by New Relic Browser. New Relic Browser chooses the most common error message for that stack trace from the time window to provide additional detail.