Generating Source Maps

Most modern JavaScript transpilers support source maps. Below are instructions for some common tools.

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-plugin

Then, to configure it:

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

In Vue 2.x, you should use vue.config.js instead of webpack.config.js, and use include: "./dist" instead of include: "."

Advanced Usage

If you prefer to upload source maps manually, configure Webpack to output source maps:

module.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:

export 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,
});

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:

{
  "compilerOptions": {
    "sourceMap": true,
    "inlineSources": true,
    "sourceRoot": "/"
  }
}

UglifyJS

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