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.

Access to this feature depends on your subscription level.

View JavaScript errors

To examine JavaScript errors:

  1. Go to > (select an app) > Browser application > JS errors.
  2. Use the available options in the UI to examine what may be causing the errors.
  3. Optional: Review event logs or stack traces in the UI.
  4. Optional: Query and create dashboards for JS error data with Insights, or use the API to monitor or log errors.

Available options in the UI include:

If you want to... Do this
Search through long error lists

Use the Search [search icon] box so you can more quickly find and fix errors by keywords, URLs, etc.

Group and filter attributes
  • To change how your error data is grouped, use the Group by function. (The Page loads chart cannot be changed with grouping.)
  • To filter the data by only showing errors with specific attributes, use the Filter dropdown.
See notable anomalies and patterns

The Error profiles table shows notable statistical variations, such as browser versions or devices that have errors occurring more frequently than normal.

Examine error details
  • Select an error from the main page to view detailed information about that error, such as the top five browsers that error occurred on, the top five devices it occurred on, and associated URIs.
  • Select Error instances to see event logs and stack traces, if available.
Examine events leading up to error

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.

New Relic Browser JS errors UI page > (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.)

Query and visualize JS data

New Relic saves JS errors as event data. This allows you to query your error data in New Relic Insights. To run NRQL queries and create dashboards to view or share, query the JavaScriptError event type in Insights.

Use API to monitor handled errors

To notice or log your app's handled errors or other miscellaneous errors, use the New Relic Browser API's noticeError call.

Review event logs

Requires Pro subscription with SPA monitoring enabled.

The event log shows the browser interactions, AJAX calls, and traces that led up to a JS error. This can help you troubleshoot the root cause of errors.

New Relic Browser JS errors event log > (select an app) > Browser application > JS errors > (select an error) > Error instances: With SPA monitoring enabled, the event log shows you the activity leading up to an error.

To view the Event log (if available): Go to > (select an app) > Browser application > JS errors > (select an error) > Error instances. The event log will not be visible if there are no events in the event log.

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 > (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).
  • It is an AngularJS error. For more on this, see Missing Angular errors.
  • The error is a SyntaxError or Script error: These occur while the script is loading, so they do not produce a stack trace.
  • Some older browsers may generate errors without a stack trace, or may provide a stack trace that is not usable.
  • You've captured the error before the New Relic agent sees it.

Some solutions for reporting stack traces:

  • Use the noticeError API call.
  • Enable development mode.
  • 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.

For more help

Recommendations for learning more: