Как мне сообщить SentryWebpackPlugin имя моей исходной карты? - PullRequest
Новая
       18

Как мне сообщить SentryWebpackPlugin имя моей исходной карты?

0 голосов
/ 05 апреля 2020

1) Код для моей веб-страницы написан на TypeScript, и я использую WebPack для объединения его в файл «main.min. js» для конечного пользователя. (Довольно стандартный материал.)

2) Я хочу использовать сервис Sentry.io , чтобы автоматически сообщать об ошибках в облако, поэтому я установил пакет @sentry/browser и инициализировал его в моей кодовой базе TypeScript. Пока все хорошо - моя веб-страница успешно сообщает об ошибках в Sentry.

3) Однако сообщенные ошибки не содержат реальных номеров строк, например, исходных карт. Чтобы исправить это, в документации Sentry сказано, что вам нужно использовать 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;

Это чрезвычайно базовая конфигурация c WebPack с одним исключением - имя файла пользовательской карты источника. По умолчанию большинство исходных карт используют имя файла "main.min. js .map" для файла "main.min. js". Однако обратите внимание, что в приведенном выше конфиге я изменил его на «main.min. js .1586110008375.map», чтобы обойти ошибку, когда Chrome кэширует исходные карты и не будет обновлять их даже после аппаратного обновления sh.

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 здесь , а документы здесь , но они не кажется, упоминают, как сделать эту, казалось бы, тривиальную вещь.

...