Source map support for JavaScript error analysis

JavaScript source maps provide immediate access to all the details of detected JavaScript errors, making it easy for you to analyze, reproduce, and fix JavaScript errors faced by the users of your application.

To improve performance, JavaScript is transformed when it's deployed into production within web applications.

The following image depicts a minified JavaScript file:

minified javascript

While this approach does improve performance, the disadvantage is that transformed JavaScript sources aren't human-readable. This makes them difficult to debug. Dynatrace source maps can be used to map these transformed JavaScript files back to their original sources so that they can be read easily and debugged.

mapping minified javascript

Javascript error detection and automated analysis is crucial for improving your application's real user experience. Dynatrace intelligently groups JavaScript errors, displays their Frequency, Origin (1st or 3rd party), and the number of user actions affected by each error.

Analyze a JavaScript error using a source map

  1. From the navigation menu, select Applications.
  2. On the Applications page, select the application that you want to analyze.
  3. Click the JavaScript errors tile in the infographic to view the Top 10 JavaScript errors.
  4. Click View full details.

top javascript errors

  1. From the list of Top JavaScript errors, click the error that you want to analyze.
  2. Under the Error details section, you can view the corresponding stack trace of the error. Error details are grouped by browser type. Individual stack frames have the Not analyzed status.
  3. To open stack frames for analysis, click the corresponding Analysis expand buttons.

error details

Dynatrace attempts to automatically fetch available source maps related to the error. When a source map is found, the origin of the detected source map and the location of the error in the original JavaScript file is highlighted.

If the source map isn't detected, click the Upload source map button and manually upload the corresponding source map.

upload source map

In most cases, the source maps include the original JavaScript code and you can see the stack trace with the line of code that generated the error highlighted. The following image is one such example.

If the source map doesn't include the original JavaScript code, click the Upload source files button to upload the original JavaScript files.

upload source files

JavaScript error analysis provides all the required information for tracking down errors in JavaScript files. You can navigate your way through the stack trace by expanding the individual stack frames.

Note: Following manual upload of a JavaScript file for the analysis of a specific stack frame, other related stack frames are automatically mapped to the same file. This saves time when you are navigating through stack frames. If you run into an error that doesn't have a corresponding source map, simply upload the required files.

Upload source maps and symbol files

All available source files are listed under Settings > Web and mobile monitoring > Source maps & symbol files.

Mobile app source maps

For Android: Proguard mapping source files are supported.

For iOS: Before they are uploaded, dSYM files must be converted by using the decode.sh utility that is provided with your OneAgent for iOS installer. Download OneAgent for iOS.

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.

To upload a source map

  1. Go to Applications > JavaScript errors.

  2. From the list of Top JavaScript errors, select the error that you want to analyze and scroll down to Stacktrace.

  3. Select a stackframe to expand it and click the corresponding Upload source map button.

upload source map