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 does result in improved performance, it has a downside. Transformed JavaScript sources are not human-readable, and therefore 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 (1^st party or 3^rd 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 & symbol files

You’ll find all available source maps listed at Settings > Web and mobile monitoring > Source maps & symbol files.

Web application source maps

Dynatrace automatically attempts to download all available source maps and JavaScript source files from public CDNs. You can optionally upload source maps and source files from each JavaScript error details page, as explained above.

Mobile app source maps

Android: Proguard mapping source files are supported.

iOS: Before upload, dSYM files must be converted using the decode.sh utility that‘s provided with your OneAgent for iOS installer. Download OneAgent for iOS

To upload a source map

1. Go to Settings > Web and mobile monitoring > Source maps & symbol files.
2. Click the Upload source map button.