获取更多动态,关注公众号:黑客下午茶

Webpack

Webpack 是一个强大的构建工具,可以解析、捆绑和压缩 JavaScript 模块。它还支持各种 loaders 来转换高级语言、引用样式表或包含静态资源。

Sentry 提供了一个方便的 Webpack plugin,可以配置 source maps,并在构建时将它们上传到 Sentry。对于上传源到 Sentry,推荐使用这个过程:

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

您可以通过其 documented mechanisms 来配置 sentry-cli,或者在初始化插件时仅绑定必需的参数:

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

如果您希望手动上传 source maps,请将 Webpack 配置为输出 source maps:

Copied
module.exports = {
  output: {
    path: path.join(__dirname, "dist"),
    filename: "[name].js",
    sourceMapFilename: "[name].js.map",
  },
  // other configuration
};

如果使用 SourceMapDevToolPlugin 进行 source map 生成的更细粒度控制,请关闭 noSources,以便 Sentry 在事件堆栈跟踪中显示正确的源代码上下文。

此外,Webpack 插件将自动设置 window.SENTRY_RELEASE,因此您的 Sentry.init 调用将不需要更新。

You can edit this page on GitHub.