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 配置，只有一个异常(exception) - 自定义源映射文件名。默认情况下，大多数源映射采用“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 , 但他们似乎没有提到如何做这件看似微不足道的事情。

最佳答案

检查你的productionSourceMap: true，当它为true时，你可以得到sourcemap

https://stackoverflow.com/questions/61047414/