Generating Source Maps
Most modern JavaScript transpilers support source maps. Below are instructions for some common tools.
We recommend using Sentry's Webpack plugin to configure source maps and upload them automatically during the build.
source-map-support
To rely on Sentry's source map resolution, your code cannot use the source-map-support package. That package overwrites the captured stack trace in a way that prevents our processors from correctly parsing it.
Webpack
Sentry provides a convenient Webpack plugin that configures source maps and automatically uploads them to Sentry.
To use the plugin, you first need to install it:
npm install --save-dev @sentry/webpack-pluginThen, to configure it:
webpack.config.jsconst SentryWebpackPlugin = require("@sentry/webpack-plugin");
module.exports = {
// other webpack configuration
devtool: 'source-map',
plugins: [
new SentryWebpackPlugin({
// sentry-cli configuration - can also be done directly through sentry-cli
// see https://docs.sentry.io/product/cli/configuration/ for details
authToken: process.env.SENTRY_AUTH_TOKEN,
org: "example-org",
project: "example-project",
release: process.env.SENTRY_RELEASE,
// other SentryWebpackPlugin configuration
include: ".",
ignore: ["node_modules", "webpack.config.js"],
}),
],
};Additionally, the Webpack plugin will automatically set window.SENTRY_RELEASE, so your Sentry.init call does not need to include a release value.
Set up the Webpack plugin as the last running plugin; otherwise, the source maps the plugin receives may not be the final ones.
Advanced Usage
If you prefer to upload source maps manually, configure Webpack to output source maps:
webpack.config.jsmodule.exports = {
devtool: 'source-map',
output: {
// Make maps auto-detectable by sentry-cli
filename: "[name].js",
sourceMapFilename: "[name].js.map",
// Other `output` configuration
},
// Other webpack configuration
};If you use SourceMapDevToolPlugin for more fine-grained control of source map generation, turn off noSources so Sentry can display proper source code context in event stack traces.
Rollup
You can configure Rollup to generate source maps, which you can then upload using sentry-cli:
rollup.config.jsexport default {
entry: "./src/app.js",
output: {
file: "bundle.js",
format: "cjs",
sourceMap: true,
},
};SystemJS
SystemJS can be configured to output source maps, which you can then upload using sentry-cli:
builder.bundle("src/app.js", "dist/app.min.js", {
minify: true,
sourceMaps: true,
sourceMapContents: true,
});This example configuration will inline your original, un-transformed source code into the generated source map file. Sentry requires both source map(s) and your original source files to perform reverse transformations. If you choose NOT to inline your source files, you must make those source files available to Sentry in addition to your source maps (see below).
TypeScript
The TypeScript compiler can output source maps, which you can then upload using sentry-cli.
Configure the sourceRoot property as / to strip the build path prefix from generated source code references. This allows Sentry to match source files relative to your source root folder:
tsconfig.json{
"compilerOptions": {
"sourceMap": true,
"inlineSources": true,
"sourceRoot": "/"
}
}UglifyJS
We strongly encourage you to use a higher-level bundler (or transpiler), as UglifyJS configuration can get quite complicated, and it is difficult to achieve the desired results.
UglifyJS can be configured to output source maps, which you can then upload using sentry-cli:
uglifyjs app.js \
-o app.min.js.map \
--source-map url=app.min.js.map,includeSources- Package:
- npm:@sentry/browser
- Version:
- 8.24.0
- Repository:
- https://github.com/getsentry/sentry-javascript