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:
webpack.config.js
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"],
}),
],
},
};
Set up the SentryWebpackPlugin
as the last running plugin, otherwise, the resulting source maps the plugin receives may not be the final one.
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.
- Package:
- npm:@sentry/react
- Version:
- 5.29.0
- Repository:
- https://github.com/getsentry/sentry-javascript