Webpack

Webpack is a powerful build tool that resolves, bundles, and compresses your JavaScript modules. It also supports various loaders to transpile higher-level languages, reference stylesheets, or include static assets.

Sentry provides a convenient Webpack plugin that configures source maps and uploads them to Sentry during the build. This process is the recommended one for uploading sources to Sentry:

npm install --save-dev @sentry/webpack-plugin

You may configure sentry-cli through it's documented mechanisms, or instead simply bind required parameters when initializing the plugin:

const SentryWebpackPlugin = require("@sentry/webpack-plugin");

module.exports = {
  // other configuration
  configureWebpack: {
    plugins: [
      new SentryWebpackPlugin({
        // sentry-cli configuration
        authToken: process.env.SENTRY_AUTH_TOKEN,
        org: "exmaple-org",
        project: "example-project",

        // webpack specific configuration
        include: ".",
        ignore: ["node_modules", "webpack.config.js"],
      }),
    ],
  },
};

Advanced Usage

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

module.exports = {
  output: {
    path: path.join(__dirname, "dist"),
    filename: "[name].js",
    sourceMapFilename: "[name].js.map",
  },
  // other 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.

Additionally, the Webpack plugin will automatically set window.SENTRY_RELEASE, so your Sentry.init call will not need to be updated.