JavaScript errors page: Detect and analyze errors

Browser monitoring'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 the query builder, or use the Browser API to monitor handled errors.

View JavaScript errors

To examine JavaScript errors:

  1. Go to > Browser > (select an app) > 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 the query builder, 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.

browser_jserrors_overview.png > Browser > (select an app) > 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 the query builder. To run NRQL queries and create dashboards to view or share, query the JavaScriptError event type in the query builder.

Use API to monitor handled errors

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

Review event logs

SPA monitoring must be 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.

browser_jserror_log.png > Browser > (select an app) > 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 > Browser > (select an app) > 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 > Browser > (select an app) > 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.
  • If the error occurs during multiple harvest cycles in the same user visit, only error events reported during the first harvest cycle will have a stack trace recorded.

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 aren't thrown, they won't be available. For example, if you have an AngularJS application, follow the troubleshooting procedures when AngularJS errors do not appear in the UI.

For some older browsers, the following errors may be unavailable:

  • 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.

For more help

If you need more help, check out these support and learning resources: