Welcome!

Blog Feed Post

Source map support for JavaScript error analysis

Having all detail related to detected JavaScript errors immediately available makes it easy to analyze, reproduce, and ultimately fix errors that affect your users. The latest Dynatrace release takes JavaScript error analysis to the next level with the introduction of support for JavaScript source maps.

When JavaScript is deployed into production within modern web applications, it’s typically “minified” or transformed in some way to improve performance (see example minified JavaScript file highlighted in image below).

While this approach to JavaScript does result in improved performance, it has a downside. Transformed JavaScript sources are not human-readable, and so are difficult to debug. Dynatrace source maps can now be used to map such transformed JavaScript files back to their original sources (see example below) so that they can be read easily and debugged as necessary. For an explanation of the basic concepts involved to source maps, see the article Introduction to JavaScript Source Maps on HTML5.com.

Dynatrace JavaScript error analysis

Considering the wide range of mobile devices and web browsers that are in use today, JavaScript error detection and automated analysis is a crucial aspect of your application’s real user experience. This is why Dynatrace intelligently groups JavaScript errors, displays their Frequency, Origin (1st party or 3rd party), and the number of user actions that are affected by each error.

Let’s take a look at how Dynatrace tracks down and analyzes JavaScript errors using the new source map support.

To analyze a JavaScript error using source map support

  1. Select Applications from the navigation menu.
  2. On the Applications page, select the application you want to analyze.
  3. Click the JavaScript errors tile in the infographic to display the Top 10 JavaScript errors and click View full details.
  4. Click any error within the Top JavaScript errors list to view full details of the error. In the Error details section of each Top JavaScript errors page, you can now view the corresponding stack trace of the selected JavaScript error. Details are grouped by browser type. Notice that the individual stack frames have the status Not analyzed. To open these stack frames for analysis, click the Analysis expand buttons. 
  5.  As you can see below, Dynatrace attempts to automatically fetch any available source maps related to this error. If a source map is found, you’ll see the origin of the detected source map and the location of the error in the original JavaScript file. If a source map isn’t detected, click the Upload source map button and manually upload the corresponding source map.
  6. Source maps may include the original JavaScript code. When this is the case, you’ll see a stack trace with the line of code that generated the error highlighted (see example below). If the source map doesn’t include the original JavaScript code, click the Upload source files button to upload the original JavaScript files.

As you can see, JavaScript error analysis provides all the information you need to track down errors in your JavaScript files. Just step through the stack trace by expanding the individual stack frames.

Note: Following manual upload of a JavaScript file for analysis of a specific stack frame, you may notice that other related stack frames are then automatically mapped to the same file. This saves you time when stepping through stack frames. If you run into another error that doesn’t have a corresponding source map, just upload the required files as explained above.

And because Dynatrace JavaScript error analysis takes place on the server-side (rather than locally on the client-side), all insights can be effortlessly shared with your team members.

Upload source maps

To manage and upload source maps, go to Settings > Web and mobile monitoring > Source maps and symbol files.


The post Source map support for JavaScript error analysis appeared first on Dynatrace blog – monitoring redefined.

Read the original blog entry...

More Stories By Dynatrace Blog

Building a revolutionary approach to software performance monitoring takes an extraordinary team. With decades of combined experience and an impressive history of disruptive innovation, that’s exactly what we ruxit has.

Get to know ruxit, and get to know the future of data analytics.

Latest Stories
"We are still a relatively small software house and we are focusing on certain industries like FinTech, med tech, energy and utilities. We help our customers with their digital transformation," noted Piotr Stawinski, Founder and CEO of EARP Integration, in this SYS-CON.tv interview at 20th Cloud Expo, held June 6-8, 2017, at the Javits Center in New York City, NY.
"I think DevOps is now a rambunctious teenager – it’s starting to get a mind of its own, wanting to get its own things but it still needs some adult supervision," explained Thomas Hooker, VP of marketing at CollabNet, in this SYS-CON.tv interview at DevOps Summit at 20th Cloud Expo, held June 6-8, 2017, at the Javits Center in New York City, NY.
"DX encompasses the continuing technology revolution, and is addressing society's most important issues throughout the entire $78 trillion 21st-century global economy," said Roger Strukhoff, Conference Chair. "DX World Expo has organized these issues along 10 tracks with more than 150 of the world's top speakers coming to Istanbul to help change the world."
"We've been engaging with a lot of customers including Panasonic, we've been involved with Cisco and now we're working with the U.S. government - the Department of Homeland Security," explained Peter Jung, Chief Product Officer at Pulzze Systems, in this SYS-CON.tv interview at @ThingsExpo, held June 6-8, 2017, at the Javits Center in New York City, NY.
"We're here to tell the world about our cloud-scale infrastructure that we have at Juniper combined with the world-class security that we put into the cloud," explained Lisa Guess, VP of Systems Engineering at Juniper Networks, in this SYS-CON.tv interview at 20th Cloud Expo, held June 6-8, 2017, at the Javits Center in New York City, NY.
"I will be talking about ChatOps and ChatOps as a way to solve some problems in the DevOps space," explained Himanshu Chhetri, CTO of Addteq, in this SYS-CON.tv interview at @DevOpsSummit at 20th Cloud Expo, held June 6-8, 2017, at the Javits Center in New York City, NY.
"We are focused on SAP running in the clouds, to make this super easy because we believe in the tremendous value of those powerful worlds - SAP and the cloud," explained Frank Stienhans, CTO of Ocean9, Inc., in this SYS-CON.tv interview at 20th Cloud Expo, held June 6-8, 2017, at the Javits Center in New York City, NY.
Your homes and cars can be automated and self-serviced. Why can't your storage? From simply asking questions to analyze and troubleshoot your infrastructure, to provisioning storage with snapshots, recovery and replication, your wildest sci-fi dream has come true. In his session at @DevOpsSummit at 20th Cloud Expo, Dan Florea, Director of Product Management at Tintri, provided a ChatOps demo where you can talk to your storage and manage it from anywhere, through Slack and similar services with...
The financial services market is one of the most data-driven industries in the world, yet it’s bogged down by legacy CPU technologies that simply can’t keep up with the task of querying and visualizing billions of records. In his session at 20th Cloud Expo, Karthik Lalithraj, a Principal Solutions Architect at Kinetica, discussed how the advent of advanced in-database analytics on the GPU makes it possible to run sophisticated data science workloads on the same database that is housing the rich...
SYS-CON Events announced today that Massive Networks will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Massive Networks mission is simple. To help your business operate seamlessly with fast, reliable, and secure internet and network solutions. Improve your customer's experience with outstanding connections to your cloud.
"We are an IT services solution provider and we sell software to support those solutions. Our focus and key areas are around security, enterprise monitoring, and continuous delivery optimization," noted John Balsavage, President of A&I Solutions, in this SYS-CON.tv interview at 20th Cloud Expo, held June 6-8, 2017, at the Javits Center in New York City, NY.
Everything run by electricity will eventually be connected to the Internet. Get ahead of the Internet of Things revolution and join Akvelon expert and IoT industry leader, Sergey Grebnov, in his session at @ThingsExpo, for an educational dive into the world of managing your home, workplace and all the devices they contain with the power of machine-based AI and intelligent Bot services for a completely streamlined experience.
"We want to show that our solution is far less expensive with a much better total cost of ownership so we announced several key features. One is called geo-distributed erasure coding, another is support for KVM and we introduced a new capability called Multi-Part," explained Tim Desai, Senior Product Marketing Manager at Hitachi Data Systems, in this SYS-CON.tv interview at 20th Cloud Expo, held June 6-8, 2017, at the Javits Center in New York City, NY.
There is a huge demand for responsive, real-time mobile and web experiences, but current architectural patterns do not easily accommodate applications that respond to events in real time. Common solutions using message queues or HTTP long-polling quickly lead to resiliency, scalability and development velocity challenges. In his session at 21st Cloud Expo, Ryland Degnan, a Senior Software Engineer on the Netflix Edge Platform team, will discuss how by leveraging a reactive stream-based protocol,...
DevOps at Cloud Expo, taking place October 31 - November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA, is co-located with 21st Cloud Expo and will feature technical sessions from a rock star conference faculty and the leading industry players in the world. The widespread success of cloud computing is driving the DevOps revolution in enterprise IT. Now as never before, development teams must communicate and collaborate in a dynamic, 24/7/365 environment. There is no time to w...