如何告诉 SentryWebpackPlugin 我的源映射的名称？答案

【问题标题】：How do I tell the SentryWebpackPlugin the name of my source map?如何告诉 SentryWebpackPlugin 我的源映射的名称？
【发布时间】：2020-07-17 17:16:59
【问题描述】：

1) 我的网页代码是用 TypeScript 编写的，我使用 WebPack 将其捆绑到最终用户的“main.min.js”文件中。（相当标准的东西。）

2) 我想利用Sentry.io 服务自动向云端报告错误，所以我安装了@sentry/browser 包并在我的TypeScript 代码库中对其进行了初始化。到目前为止一切顺利 - 我的网页成功向 Sentry 报告错误。

3) 但是，报告的错误不包含实际的行号，例如源地图。为了解决这个问题，the Sentry documentation 说你需要使用SentryWebpackPlugin。所以，我已经安装了它，并将我的 WebPack 配置更改为以下内容：

import SentryWebpackPlugin from '@sentry/webpack-plugin';
import * as path from 'path';
import * as webpack from 'webpack';

// Constants
const epoch = new Date().getTime();

const config: webpack.Configuration = {
    // The entry file to bundle
    entry: path.join(__dirname, 'src', 'main.ts'),

    // Where to put the bundled file
    output: {
        path: __dirname, // By default, Webpack will output the file to a "dist" subdirectory
        filename: 'main.min.js',
        // Chrome caches source maps and will not update them even after a hard-refresh
        // Work around this by putting the epoch timestamp in the source map filename
        sourceMapFilename: `main.min.js.${epoch}.map`,
    },

    resolve: {
        extensions: ['.js', '.ts', '.json'],
    },

    module: {
        rules: [
            // All files with a ".ts" extension (TypeScript files) will be handled by "ts-loader"
            {
                test: /\.ts$/,
                include: path.join(__dirname, 'src'),
                loader: 'ts-loader',
            },
        ],
    },

    plugins: [
        new SentryWebpackPlugin({
            include: './main.min.js',
        }),
    ],

    // Enable source maps
    devtool: 'source-map',
};

export default config;

这是一个非常基本的 WebPack 配置，但有一个例外 - 自定义源映射文件名。默认情况下，大多数源映射采用“main.min.js.map”作为“main.min.js”文件的文件名。但是，请注意，在上面的配置中，我将其更改为“main.min.js.1586110008375.map”以解决 Chrome 缓存源映射并且即使在硬刷新后也不会更新它们的错误。

4) 现在，当我告诉 WebPack 捆绑我的代码时，新的 Sentry 插件抱怨它找不到源映射：

Source Map Upload Report
  Minified Scripts
    ~/main.min.js (sourcemap at backend.js.map)
      - warning: could not determine a source map reference (Could not auto-detect referenced sourcemap for ~/main.min.js.)

如何告诉 SentryWebpackPlugin 我的自定义源映射的名称是什么？

GitHub页面是here，文档是here，但他们似乎没有提到如何做这个看似微不足道的事情。

【问题讨论】：

您找到解决方案了吗？

标签： typescript webpack sentry

【解决方案1】：

检查你的productionSourceMap: true，如果是真的，你可以得到sourcemap

【讨论】：