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:

Copied
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:

webpack.config.js
Copied
const SentryWebpackPlugin = require("@sentry/webpack-plugin");

module.exports = {
  // other webpack configuration
  devtool = 'source-map',
  plugins: [
    new SentryWebpackPlugin({
      // sentry-cli configuration
      authToken: process.env.SENTRY_AUTH_TOKEN,
      org: "example-org",
      project: "example-project",

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

Advanced Usage

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

webpack.config.js
Copied
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.

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

Help improve this content
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) to suggesting an update ("yeah, this would be better").