puppeteer 中的源地图？

Question

我正在操纵一个使用 webpack 构建的应用程序（这可能是一个动词吗？）page.on('error') 我收到这样的错误：

TypeError: __WEBPACK_IMPORTED_MODULE_0_babel_runtime_core_js_promise___default.a.map is not a function
    at _default.<anonymous> (....../app.js:23858:89)
    at Generator.next (<anonymous>)
    at step (....../app.js:35041:30)
    at ....../app.js:35052:13

有没有办法，如果有的话，我怎样才能正确地对这些错误进行源映射？

（我确定我正在生成源地图）

Answer 1

我是按照下面的方式做的...有点延迟，但有人可能会觉得它有用。

导航到抛出错误的页面后，您将注入此库：https://github.com/novocaine/sourcemapped-stacktrace

await page.addScriptTag({
  url: 'https://cdn.jsdelivr.net/npm/sourcemapped-stacktrace@1.1.8/dist/sourcemapped-stacktrace.js',
});

然后你监听错误事件：

page.on('pageerror', logStackTrace);
page.on('error', logStackTrace);

在 logStackTrace 函数中，您按如下方式提取源映射堆栈跟踪并记录它：

const logStackTrace = async (error) => {
  page.evaluate(stack => new Promise(resolve =>
    window.sourceMappedStackTrace.mapStackTrace(stack, (newStack) => {
      resolve(newStack);
    })
  ), typeof error.stack === 'string' ? error.stack : error.stack.join('\n'))
  .then((result) => {
    console.log('ERROR:', error.message, result[0]);
  });
};

虽然它只为我正确地映射了堆栈的第一行。仍然更有用。

Answer 2

如果您为 webpack devtool 使用 eval 变体之一，那么 Puppeteer 应该选择它：

// webpack.config.js
module.exports = {
  // ...
  mode: 'development',
  devtool: 'eval-source-map',
};

puppeteer 中的源地图？

Sourcemaps in puppeteer?

node.js

source-maps

google-chrome-headless

puppeteer