Overview

If your front-end JavaScript source code is minified, upload your source maps to Datadog to de-obfuscate your different stack traces. For any given error, you can access the file path, line number, and code snippet for each frame of the related stack trace. Datadog can also link stack frames to your source code in your repository.

Instrument your code

Configure your JavaScript bundler such that when minifying your source code, it generates source maps that directly include the related source code in the sourcesContent attribute.

See the following configurations for popular JavaScript bundlers.

// ...
const webpack = require('webpack');

module.exports = {
  mode: 'production',
  devtool: false,
  plugins: [
    new webpack.SourceMapDevToolPlugin({
      noSources: false,
      filename: '[file].map'
    }),
    // ...
  ],
  optimization: {
    minimize: true,
    // ...
  },
  // ...
};

After building your application, bundlers generate a directory (typically named dist) with minified JavaScript files co-located with their corresponding source maps.

See the following example:

./dist
    javascript.364758.min.js
    javascript.364758.js.map
    ./subdirectory
        javascript.464388.min.js
        javascript.464388.js.map

Upload your source maps

The best way to upload source maps is to add an extra step in your CI pipeline and run the dedicated command from the Datadog CLI. It scans the dist directory and subdirectories to automatically upload source maps with relevant minified files.

To minimize overhead on your CI’s performance, the CLI is optimized to upload as many source maps as you need in a short amount of time (typically a few seconds).

Note: Re-uploading a source map does not override the existing one if the version has not changed.

The --service and --release-version parameters must match the service and version tags on your RUM events and browser logs. For more information on how to setup these tags, refer to the Browser RUM SDK initialization documentation or Browser Logs Collection documentation.

By running the command against the example dist directory, Datadog expects your server or CDN to deliver the JavaScript files at https://hostname.com/static/js/javascript.364758.min.js and https://hostname.com/static/js/subdirectory/javascript.464388.min.js.

Only source maps with the .js.map extension work to correctly unminify stack traces. Source maps with other extensions such as .mjs.map are accepted but do not unminify stack traces.

Link stack frames to your source code

If you run datadog-ci sourcemaps upload within a Git working directory, Datadog collects repository metadata. The datadog-ci command collects the repository URL, the current commit hash, and the list of file paths in the repository that relate to your source maps. For more details about Git metadata collection, refer to the datadog-ci documentation.

Datadog displays links to your source code on unminified stack frames.

Troubleshoot errors with ease

Without access to the file path and the line number, a minified stack trace is not helpful in troubleshooting your code base. Also, the code snippet is minified (which means there is one long line of transformed code), making the troubleshooting process more difficult.

The following example displays a minified stack trace:

On the other hand, an unminified stack trace provides you with all the context you need for quick, seamless troubleshooting. For stack frames that relate to your source code, Datadog also generates a direct link to your repository:

Further Reading

Additional helpful documentation, links, and articles:

Get started with Error TrackingDOCUMENTATION Visualize your Error Tracking data in the ExplorerDOCUMENTATION