JavaScript errors page: Examine errors over time

BETA

New Relic Browser's JS errors page shows the errors in your live production JavaScript over time, along with relevant browser data. You can investigate errors based on the number of times each one occurred and the number of unique page loads that encountered that error. This allows you to identify the errors that are impacting real users' experiences on your site.

Access to this feature depends on your subscription level.

Compare classic and Beta JS errors

New Relic Browser Pro offers two versions of the JS errors page.

  • The new JS errors page is available in the UI as a public Beta.
  • The original UI (referred to as the classic JS errors page) is also available in the UI.
Browser: JS errors Beta UI
rpm.newrelic.com/browser > (select an app) > Browser application > JS errors: Use the public Beta UI to group and filter errors, explore stack trace details, and examine trends with Error profiles.

Depending on which UI version you select, different features are available.

JS errors page New (Beta) Classic

Search through long lists of errors

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

[check icon]

Group and filter attributes

  • To add or remove a single grouping for a specific set of attributes, use the Group by function. This allows you to explore the UI chart results by specific attributes.
  • To examine the group of attributes at even more detailed levels, use the Filter dropdown.

Exception: You cannot change the Page loads with errors chart's grouping or filters.

[check icon]

Explore trends with errors

To view automatically generated comparisons of one set of events to another, use the Error profiles chart. Each error profile provides visual details about significant differences, such as browser versions or devices where errors commonly occur.

[check icon]

Examine error details

Select an error, then view detailed information about session traces, browser interactions, and more.

[check icon]
(enhanced)
[check icon]

Query your JavaScript errors data in Insights

To run NRQL queries and create dashboards to view or share, use JavaScriptError event attributes in New Relic Insights.

[check icon]

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.

[check icon] [check icon]

Use the Browser API for errors

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

[check icon] [check icon]

Change the time range

To adjust the time period for the JS error data that appears, use the UI's time picker.

Last 30 minutes Last 7 days

Compare data collection

New Relic Browser collects JavaScript error data differently for the Beta and classic versions.

JS errors page How New Relic Browser collects data for this version
New (Beta)
  • The JS errors Beta page uses events to report on JavaScript errors. Each event is a separate record, so you can use NRQL queries in New Relic Insights to find answers, as well as group and filter in the Browser UI.
  • New Relic Browser counts and displays each instance of an error, even if it occurs multiple times on the same page view. This provides more visibility into the number of errors that are occurring, compared to the summarized view on the classic page.
Classic
  • The classic JS errors page uses aggregated metrics to report on JavaScript errors by stack trace.
  • If one error occurs multiple times across multiple visitors on the same browser or device, New Relic Browser displays it as one occurrence.
  • If one error occurs multiple times on the same page view, the classic version counts it as one error occurrence.

Enable JavaScript error reporting

JavaScript error messages consist of arbitrary text, and typically they do not contain any confidential or sensitive information. However, it is possible for messages to be purposefully constructed with sensitive information. To ensure that your website does not expose any sensitive information in error messages, review New Relic Browser's security information before enabling JavaScript error reporting.

New Relic Browser does not automatically enable JavaScript error reporting. To turn on this Pro feature for an app:

  1. Go to rpm.newrelic.com/browser > (select an app) > Settings.
  2. From the Browser agent instrumentation options, select Pro or Pro + SPA.
  3. Select Save application settings.
  4. Generate some traffic for your app, then wait approximately five minutes for information to become available in the UI.
  5. Recommendation: If no data appears after five minutes, restart your agent.

You can also enable Pro features from the selected app's JS errors and Browser Overview pages.

View JavaScript errors

After you enable the JavaScript error reporting feature, the Browser Overview page will include the Page views with JS errors chart, and the JS errors page will show detailed information. Depending on which version you select, different charts and functions are available for the Beta UI and the classic UI.

To view JavaScript errors:

  1. Go to rpm.newrelic.com/browser > Browser application > (select an app) > JS Errors.

    OR

    To go directly to the JS errors page from the selected app's Browser Overview page, select the link in the Page views with JS errors chart's title.

  2. Select Preview JS Errors Beta or Go back to classic JS Errors.
  3. Use any of New Relic's standard user interface functions to drill down into detailed information.
  4. Beta UI: To change the criteria for errors that appear on the Top 5 errors chart, use the search, group by, and filter functions.
  5. To isolate any of the top color-coded errors in the Beta Top 5 errors chart or the classic JavaScript error instances chart, mouse over the corresponding error message.
  6. To examine the count of page loads when a JS error occurred by browser type, use the Page loads with errors chart.
  7. To view details about any error, including instance and stack trace details, select its name on the list.
  8. To view the selected error's details about error frequency, overall percentage of total errors, when the error first occurred, function names, browser types, stack traces, and other information, select Error instance details, then use the arrow buttons to page through the individual error instances.
  9. To see session traces containing this error, and view the error in the context of the user's experiences and actions, select a session trace link.

Switch between UI versions

To switch between either version directly from the UI:

  1. Go to rpm.newrelic.com/browser > (select an app) > Browser application > JS errors.

    OR

    To go directly to the JS errors page from the selected app's Browser Overview page, select the link in the Page views with JS errors chart's title.

  2. Select Preview JS Errors Beta or Go back to classic JS Errors.

Classic UI for JS errors

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.

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

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.

Classic UI page example
Browser: JS errors classic UI
rpm.newrelic.com/browser > (select an app) > Browser application > JS errors: Use the classic UI to examine JavaScript errors, stack trace details, and any available session traces.

Error instance details

Some JavaScript errors on your site may be showstoppers, but others may go unnoticed by users. You can examine the error instance details to see if the stack gives you an idea of whether an error may be breaking important functionality of your page, as well as getting the URL and browser used as a starting point to reproduce the error.

If applicable, the JavaScript Error instance details tab shows controller names, browser types, stack traces, and other information about the error. It also includes the number of errors you can page through to view details; for example, 1/11.

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

For more help

To send feedback about the JavaScript errors feature, visit New Relic's Explorers Hub page for the public Beta.

Recommendations for learning more: