Source Maps

What Are Source Maps

When JavaScript is shipped to browsers it is typically bundled and minified — all variable names shortened and all code collapsed into a single line. This makes stack traces from production errors nearly impossible to act on. For example, an error in your monitoring may look like:

1
at onClick (https://example.com/static/js/main.b1510333.chunk.js:1:1559)

With source maps enabled, Dash0 automatically resolves this into the original source location:

1
at onClick (ProductDetails.js:26:11)

How It Works

Dash0 uses source maps to perform this translation. Source maps are files generated by your build tool that record a mapping from each position in a minified file back to the original source file, line, and column.

When Dash0 receives a web event containing a JavaScript stack trace, it:

1. Parses each line of the stack trace.
2. Downloads the referenced JavaScript file.
3. Reads the //# sourceMappingURL=Copy comment near the end of the file to locate the source map.
4. Downloads the source map file.
5. Resolves each minified line and column back to the original source location.

The original stack trace is always preserved unchanged. Translation happens automatically — no code changes are needed in your application.

Requirements

• You are using the Dash0 Web SDK to capture browser errors.
• Your build tool generates source maps and embeds a //# sourceMappingURL=Copy reference in the minified JavaScript output. This is the default for tools like Webpack, Vite, esbuild, and Rollup.
• Your JavaScript files and source maps are reachable via HTTP(S) either publicly or via a source map integration. Integrations let you configure credentials for private or authenticated assets — your end users will never have access to them.

If stack traces are not being translated, verify that all three requirements above are met. Per-frame errors are shown directly in the UI — see Partial Translations.

Setting Up a Source Map Integration

If your JavaScript files and source maps are publicly accessible, translation works out of the box — no additional configuration is needed beyond deploying the .js.mapCopy files alongside your JavaScript files.

Make sure the .js.mapCopy file is deployed at the URL referenced by sourceMappingURLCopy. Relative URLs are resolved against the JavaScript file's URL; absolute URLs and inline source maps (data:application/json;base64,...Copy) are also supported.

For private or authenticated assets, create a source map integration to provide Dash0 with the right credentials. Source maps do not need to be public — you can keep them behind authentication so your end users never have access to them.

Create an Integration

1. Navigate to Settings -> Integrations
2. Click on Add Integration and select Source Map
3. Give it a Display Name
4. Under URL Prefixes, add the base URL of your JavaScript assets — for example https://cdn.example.com/static/js/Copy. Every stack trace URL that starts with this prefix will use this integration's credentials.
5. Choose an Authentication method:
   • Basic Authentication — username and password.
   • Bearer Token — token value sent as Authorization: Bearer <token>Copy.
6. Optionally add Custom Headers for any additional request headers your CDN requires.

You can create multiple integrations to cover different environments or URL prefixes. For example, one integration for https://cdn.example.com/Copy and another for https://staging.example.com/Copy.

Viewing Translations

When a stack trace is translated, Dash0 displays the translated version by default in the attributes list. You can switch between the translated and original stack trace at any time using the toggle next to the attribute name.

The original stack trace is always preserved, so you never lose access to the raw minified output.

Partial Translations

If a frame could not be translated, the original minified line is kept in the output and a warning icon is shown next to it. Hovering over the icon shows the reason the translation failed.