Sourcemaps in puppeteer?

Question

I'm puppeteering (could this be a verb?) an app built with webpack and on page.on('error') I get errors like this:

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

Is there a way, and if so how could I get these errors correctly sourcemapped?

(I know for sure I'm generating the sourcemaps)

Answer 1

I did it in the following way... A bit delayed but someone might find it useful.

Once you have navigated to the page throwing the error you inject this lib: https://github.com/novocaine/sourcemapped-stacktrace

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

Then you listen for the error events:

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

In the logStackTrace function you extract the sourcemapped stacktrace as follows and log it:

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]);
  });
};

It only correctly maps the first line of the stack for me though. Still infinitely more useful.