JavaScript errors page: Examining errors over time

New Relic Browser's JS errors page lets you see 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.

For information on how to upload source maps to un-minify minified JavaScript errors, see Upload source maps to Browser.

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. Before enabling JavaScript error reporting, ensure that your website does not expose any sensitive information in error messages. For more information, see Security for New Relic Browser.

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

  1. From the New Relic menu bar, select Browser > Browser apps > (selected app) > Settings.
  2. From the Browser agent instrumentation options, select Pro or Pro + SPA.
  3. Select Save application settings.
  4. Wait approximately five minutes for information to become available.
  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.

screen-browser-jserrors-dashboard.png
Browser > Browser apps > (selected app) > JS errors: This page shows JavaScript errors for browsers. The top ten JavaScript errors are color-coded in the list and the top chart.

To view JavaScript errors:

  1. From the New Relic menu bar, select Browser > Browser apps > (selected app) > JS errors.

    OR

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

  2. To isolate any of the top color-coded errors in the JavaScript error instances chart, mouse over the corresponding error message in the list.
  3. To view details about any error, select its name on the list.

The JavaScript error instances chart shows each error weighted by the number of unique page views that encountered it. For example, if an error happens in a click handler and the user clicks 100 times during a single page load, this chart records the user's experience as one click, not 100 individual clicks.

Examine JavaScript error details

Some JS 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.

screen-browser-jserrors-details.png
Browser > Browser apps > (selected app) > JS errors > (selected error): The selected JavaScript error record includes tabs for Overview charts and Error instance details if available.

Use any of New Relic's standard user interface functions and page functions to drill down into detailed information. Here is a summary of additional options with the JavaScript errors page.

  • To view details about any error, select its name on the list.
  • To view details about function names, browser types, stack traces, and other information about the error, select Error instance details, and then use the arrow buttons to page through the individual error instances.
  • 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.
  • To return to the JavaScript errors page, select X (Close).

Examine instance details and stack traces

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.

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. For a "real world" example of using stack traces and New Relic Browser to troubleshoot a JavaScript error, see this New Relic blog post.

screen-browser-jserrors-instance.png
Browser > Browser apps > (selected app) > JS errors > (selected error) > Error instance details: If applicable, Error instance details includes the number of errors you can page through to view details; for example, 1/7. This is an example of JavaScript errors found for multiple browser types, including iPhone Safari.

Upload source maps to un-minify JavaScript

If your JavaScript is minified, the errors on the JS errors may not be very useful. You can upload JavaScript source maps to New Relic to decode minified JavaScript and make these error stack traces more useful. See Source maps in Browser for more information.

Error grouping

New Relic Browser groups JavaScript errors primarily by their stack traces, since errors with the same stack come from the same place in the code and thus 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.

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. Unavailable errors include:

  • SyntaxError or Script error, which occur while the script is loading, so they do not produce a stack trace
  • In-line JavaScript or event handler errors, which are unwrapped
  • Errors thrown from third-party scripts that reside on another domain
  • Errors occurring on older browsers, which may not be able to provide a usable stack trace or, in some cases, will provide no stack trace at all

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

For more help

To discuss JavaScript error reporting in detail, visit the New Relic Online Technical Community.

Additional documentation resources include:

Discuss Browser monitoring in the New Relic Online Technical Community! Troubleshoot and ask questions, or discuss JavaScript error reporting or AJAX timing in detail.

If you need additional help, get support at support.newrelic.com.