How do I tell the SentryWebpackPlugin the name of my source map?

Viewed 2702

1) The code for my webpage is written in TypeScript and I use WebPack to bundle it into a "main.min.js" file for the end-user. (Pretty standard stuff.)

2) I want to utilize the Sentry.io service to automatically report errors to the cloud, so I've installed the @sentry/browser package and initialized it in my TypeScript codebase. So far so good - my webpage successfully reports errors to Sentry.

3) However, the reported errors do not contain the real line numbers, e.g. the source maps. In order to fix this, the Sentry documentation says that you need to use the SentryWebpackPlugin. So, I've installed that, and changed my WebPack config to be the following:

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;

This is an extremely basic WebPack configuration with one exception - a custom source map filename. By default, most source maps take the filename of "main.min.js.map" for a "main.min.js" file. However, notice that in the above config, I change it to be "main.min.js.1586110008375.map" to get around the bug where Chrome caches source maps and will not update them even after a hard-refresh.

4) Now, when I tell WebPack to bundle my code, the new Sentry plugin complains that it cannot find the source map:

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.)

How do I tell the SentryWebpackPlugin what the name of my custom source map is?

The GitHub page is here and the docs are here, but they do not seem to mention how to do this seemingly-trivial thing.

1 Answers

check your productionSourceMap: true, when it's true,you can get sourcemap

Related