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

To allow the plugin to upload source maps automatically, create a .sentryclirc or configure environment variables as described in the CLI configuration docs. Then, add the plugin to your webpack.config.js:

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

module.exports = {
  // other configuration
  configureWebpack: {
    plugins: [
      new SentryWebpackPlugin({
        include: ".",
        ignoreFile: ".sentrycliignore",
        ignore: ["node_modules", "webpack.config.js"],
        configFile: "sentry.properties",
      }),
    ],
  },
};

Advanced Usage

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

Copied
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

You can edit this page on GitHub.
On this page