Получить реальную строку ошибки в минифицированом коде

Question

Имеется приложение написанное на React.

В development режиме в стэке ошибки я могу видеть файл и строку, но на production код минифицирован и эта информация ничего не несет. Возможно как-то программно узнать реальные номер строки и файл?

Наверное нужно использовать sourcemap, но как именно я не знаю.

Answer 1

Решено следующим образом:

С клиент отлавливается ошибка и ее стек передается на бэк.
На бэке с помощью source-map читается карта и узнается реальная строка.

const ENTRY = 'something/file.js:3:2415';
const [efile, eline, ecolumn] = ENTRY.split(':');

const SourceMapConsumer = require('source-map').SourceMapConsumer;
const map = fs.readFileSync('/path/to/sourcemap', 'utf8');
const consumer = await new SourceMapConsumer(map);

const {line, column} = consumer.originalPositionFor({
    line: Number(eline),
    column: Number(ecolumn),
});

Чтобы иметь sourcemap на проде необходимо в Webpack выставить devtool вне зависимости от режима сборки. Но чтобы sourcemap не подгружался в bundle, я использую на проде следующий хук:

(compiler) => {
    compiler.hooks.done.tap('webpack', () => {
        const file = 'path/to/bundle';
        let bundle = fs.readFileSync(file, 'utf8');
        bundle = bundle.replace('//# sourceMappingURL=bundle.js.map', '');
        fs.writeFileSync(file, bundle);
    });
}

БЛОГ НА HUSL

Получить реальную строку ошибки в минифицированом коде

Ответы (1 шт):