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 errors faced by the users of your application. To improve performance, JavaScript is often transformed when it's deployed into production within web applications. A common transformation is minification, which removes unnecessary and repetitive code without affecting how the JavaScript code is processed by the browser. 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 the sources 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

Analyze a JavaScript error using a source map

  1. In the Dynatrace menu, go to Web.

  2. On the Applications page, select the application that you want to analyze.

  3. Select the Errors section of the infographic to view the Top errors.

  4. Select any JavaScript error in the JavaScript error tab or select Analyze errors.

    top javascript errors

  5. From the list of Top JavaScript errors, click the error that you want to analyze.

  6. In 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.

  7. To open stack frames for analysis, click the corresponding Analysis expand buttons.

    error details

  8. Dynatrace attempts to download available source maps related to the error automatically. When a source map is found, the origin of the detected source map and the location of the error in the original JavaScript file are highlighted. If the source map isn't detected, select Upload source map and manually upload the corresponding source map.

    upload source map

  9. 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.

    upload source files

    If the source map doesn't include the original JavaScript code, click the Upload source files button to upload the original JavaScript 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 the 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.

Automatic download of source maps

Dynatrace attempts to download all available source map files automatically as follows:

  • Whenever an error is triggered, Dynatrace tries to download the responsible JavaScript file.
  • After the file is successfully downloaded, Dynatrace checks whether it contains a source map reference such as //# sourceMappingURL=http://example.com/path/to/your/sourcemap.map. Dynatrace can display the exact line number that caused the error in the successfully downloaded minified file.
  • If a source map contains a source map reference, Dynatrace automatically downloads it.
  • With both the minified file and the corresponding source map downloaded successfully, Dynatrace can display the readable JavaScript code and the exact line number that caused the error.

Notes

  • For the downloads to work, both files need to be publicly accessible.
  • All requests made by Dynatrace to download the files can be identified by looking at the User-agent string, which is ruxit server in both cases.
  • Upload the original source file if you're also interested in reading developer comments, which are usually stripped away in the process of minification and obfuscation.

Upload source maps and symbol files

All available source files are listed under Settings > Web and mobile monitoring > Source maps and 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 using the decode.sh utility that is provided with the OneAgent for iOS installer.

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. In the Dynatrace menu, go to Web.
  2. Select the application that you want to configure.
  3. Under Top errors, go to the JavaScript tab.
  4. From the list of JavaScript errors, select the error that you want to analyze, and scroll down to Stacktrace.
  5. Select a stackframe to expand it, and click the corresponding Upload source map button.

upload source map