Find and Fix Errors Faster With The Updated New Relic Browser JavaScript Errors Page

If you run a website or web application, you know they constantly evolve. Development teams introduce new components, features, and services at a blistering rate in order to modernize their apps, bring new ideas to market, or simply improve based on customer feedback. While change is essential, it  can lead you to introduce new bugs and errors into your site, especially when you move fast. These bugs and errors can impact functionality and performance, and ultimately lead to customer dissatisfaction, abandonment, or lost revenue.

To help you avoid this fate we’ve updated the New Relic Browser JavaScript errors page (previously available in beta, and now generally available). The updated JS errors page helps find the most impactful errors and gives you the context to reproduce an error locally, or identify the exact line of code where the error occurred. You’ll now have more of the information you need to resolve your most problematic errors quickly.

Read on to learn about the improvements we’ve made in this update.

Use error messages, filters, and groups for quick context into errors

When you discover an error, you need to understand its impact: Is the error occurring on your most widely trafficked browsers? Is it present on the devices your customers use the most?

Previously, we grouped errors by stack trace, but now, by default, we group errors by error message. However, you can also sort and group errors based on the attributes that are most important to you; for example, you can group by device type, browser, or URI.

For context into the overall impact of an error, use New Relic Browser to filter and facet on the error. Select an attribute from the Group By list, and isolate errors by that particular attribute (for example, error message, device type, error class, request URI, or user agent name). Add a filter to your groups, and combine attributes and dimensions to segment errors by frequency of occurrence or based on the attributes most important to your digital business. Groups and filters provide quick and powerful means to gain context into your most critical errors, so you can decide which one to fix first.

We’ve also added two new charts: one displays the top five errors by error message (also sortable by attribute), and the other shows page loads with errors sorted by browser type. Additionally, error profiles, which use New Relic’s applied intelligence, identifies what’s unusual about an error or a set of errors.

Use charts to dive deeper into errors

When you select an error to investigate, New Relic Browser charts provide detailed information about error occurrence based on browser and device type and where the error is most common, helping you get a full understanding of the error.

For each error, we capture basic device and browser level attributes to show you why an error might be occurring on one browser or device and not another. Use the request URI to see the exact page where an error occurred, and identify and monitor errors that are common across multiple page groups. New Relic Browser displays request URIs based on time window, and they are filterable.

Reproduce errors  from event log data, and dig to the root cause with stack traces and source maps

Use the updated JavaScript errors page to determine the root cause of an error, and gain details on how to reproduce it locally. The Event Log shows you the steps a user took before hitting the error. If you’re debugging an error in situations where you didn’t create or haven’t maintained the code where the error is occurring, an event log might be more helpful in your debugging than a stack trace, which doesn’t show the steps a user took before encountering the error.

In addition to event logs, use stack traces and source maps to pinpoint the filename, line of code, function, or method that threw the error.

Errors caused by minified JavaScript are common in production environments and can be difficult to read. And while the ability to upload source maps to view the same code uncompressed is not new in Browser, using source maps and stack traces in conjunction with event logs gives you a better surface area with which to reproduce an error locally.

New depth and flexibility for debugging JavaScript errors

You’re always changing and updating your websites and web applications. Whether you’re migrating from a standard webpage to a single-page app built with React, deploying a new site, or releasing a new feature built from JavaScript components, you’re always going to discover errors.

The improved JavaScript errors page is built to give you deeper context and a path to action, so you can speed your time to error resolution. Use this page to

1. Filter and group errors, and review error profiles to narrow down the scope of an error.
2. Use Browser charts to learn about affected browsers and device types and determine the request URI to isolate the error.
3. Finally, use the Event Log to reproduce the error locally, and use source maps and stack traces to find the exact line of code, method, or function that’s throwing the error.

We plan to remove our legacy JavaScript errors page by the end of the year—a perfect reason to get up to speed with the new, improved version today.