How to get all console messages with puppeteer? including errors, CSP violations, failed resources, etc

Question

I am fetching a page with puppeteer that has some errors in the browser console but the puppeteer's console event is not being triggered by all of the console messages.

The puppeteer chromium browser shows multiple console messages

However, puppeteer only console logs one thing in node

Here is the script I am currently using:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  page.on('console', msg => console.log('PAGE LOG:', msg.text));
  await page.goto('https://pagewithsomeconsoleerrors.com');
  await browser.close();
})();

Edit: As stated in my comment below, I did try the page.waitFor(5000) command that Everettss recommended but that didn't work.

Edit2: removed spread operator from msg.text as it was there by accident.

Edit3: I opened an issue on github regarding this with similar but different example screenshots: https://github.com/GoogleChrome/puppeteer/issues/1512

Answer 1

The GitHub issue about capturing console erorrs includes a great comment about listening to console and network events. For example, you can register for console output and network responses and failures like this:

  page
    .on('console', message =>
      console.log(`${message.type().substr(0, 3).toUpperCase()} ${message.text()}`))
    .on('pageerror', ({ message }) => console.log(message))
    .on('response', response =>
      console.log(`${response.status()} ${response.url()}`))
    .on('requestfailed', request =>
      console.log(`${request.failure().errorText} ${request.url()}`))

And get the following output, for example:

200 'http://do.carlosesilva.com/puppeteer/'
LOG This is a standard console.log message
Error: This is an error we are forcibly throwing
    at http://do.carlosesilva.com/puppeteer/:22:11
net::ERR_CONNECTION_REFUSED https://do.carlosesilva.com/http-only/sample.png
404 'http://do.carlosesilva.com/puppeteer/this-image-does-not-exist.png'
ERR Failed to load resource: the server responded with a status of 404 (Not Found)

See also types of console messages received with the console event and response, request and failure objects received with other events.

If you want to pimp your output with some colours, you can add Chalk:

  const chalk = require('chalk')
  page
    .on('console', message => {
      const type = message.type().substr(0, 3).toUpperCase()
      const colors = {
        LOG: text => text,
        ERR: chalk.red,
        WAR: chalk.yellow,
        INF: chalk.cyan
      }
      const color = colors[type] || chalk.blue
      console.log(color(`${type} ${message.text()}`))
    })
    .on('pageerror', ({ message }) => console.log(chalk.red(message)))
    .on('response', response =>
      console.log(chalk.green(`${response.status()} ${response.url()}`)))
    .on('requestfailed', request =>
      console.log(chalk.magenta(`${request.failure().errorText} ${request.url()}`)))

The examples above use Puppeteer API v2.0.0.