Your data. Anywhere you go.

New Relic for iOS or Android


Download on the App Store    Android App on Google play


New Relic Insights App for iOS


Download on the App Store


Learn more

Close icon

Browser’s New JS errors Page is a Game Changer

performance
errors
browser_agent
js-errors
frontend

#1

TL;DR
The refreshed JS errors page within Browser’s UI went GA yesterday (9/27/18). It removes pain and toil for users by offering deep context and actionability into:
A. the scope and magnitude of an error, “which error is most impactful to my digital business / where should I start?”

and

B. the granular details to reproduce the error, and identify the line of code responsible, “what’s the root cause?”

The overview:
Browser customers wanted more depth, context, and actionability when prioritizing and addressing JS errors. As a result, and after a great effort from the Browser engineering team, the refreshed JS errors page goes live today. If you’re new to Browser you can find it by clicking on the “JS errors” tab.

JS errors is a critical part of New Relic Browser. Often, especially after deployments, our customers will watch the JS errors tab to identify spikes in error rate. Our users need both context and actionability when errors occur. As a result, the refreshed JS errors page offers significant depth into understanding “where should we start,” and the details necessary to both reproduce the error locally and identify the line of code where an error was thrown, answering the question “what’s the root cause?”

WHAT’S NEW?:
In short, everything. The page is purpose-built to enable our users a faster and more actionable method when eliminating JS errors. The following is a walkthrough of the UI with additional context into the user, use cases, common challenges, and how the JS errors page adds value…

Use error messages, filters, and groups for quick context into errors
When you discover an error, you need to quickly understand its impact: Is the error occuring on your most widely trafficked browsers? 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 sort and group based on 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 graphs: 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.


The updated Javascript errors page allows deeper filtering and grouping capabilities of the top five errors and page loads, by a number of attributes.

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 has error occured and identify and view errors that are common across multiple page groups. Browser displays request URIs based on time window, and they are filterable.


Browser charts show details about error occurrence across browser and device type.

Reproduce errors from event log data, and dig to the root cause with stack traces and sourcemaps
Use the updated JavaScript errors page to quickly 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 occuring, 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 sourcemaps 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 sourcemaps to view uncompressed code is not new in Browser, using sourcemaps and stack traces in conjunction with event logs gives you a better surface area with which to reproduce an error locally.


Use the Event Log to examine the steps leading to an error.

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 encounter 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 sourcemaps and stack traces to find the exact line of code, method, or function that’s throwing the error.


2018 Review: New Relic's New Features
#2

The time picker only offers to show the last three days (last 7 days is in the menu, but not selectable). The classics view offers to view the last 7 days. Any plans to extend the time range?


#3

Hi Frank,

We have 3 days in the UI to provide a solid customer experience. We are considering adding more days, but so far the feedback is that 3 days provided enough detail to get the job done. Customers can go back farther in time by choosing custom dates. If they want to see more they can view the data in Insights.


#4

Are custom attributes available in the new JS Errors? It doesn’t look like it. Being able to see certain app-specific data as part of the error tied to it would be incredibly useful.


#5

Hi, @MikeTervela: Have you tried calling setCustomAttribute()? The docs say it “adds a user-defined attribute name and value to subsequent events on the page.” If that’s correct, it should include JavaScriptError events. If it’s not correct, we should update the docs. :slight_smile:


#6

@MikeTervela and @philweber - we can’t assign custom attributes to JS error events… yet. It’s something we’re working on though.


#7

Thanks, @hwilkalis. We should update the docs to indicate that.