Table of contents

How to handle browser events in Puppeteer?

Puppeteer provides a powerful event-driven architecture that allows you to listen for and handle various browser and page events. Both page and browser objects emit events that you can subscribe to for monitoring, debugging, and controlling browser behavior.

Page Events

Console Events

Monitor all console output from the web page:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  page.on('console', (msg) => {
    console.log(`[${msg.type()}] ${msg.text()}`);
    // Handle different console levels
    if (msg.type() === 'error') {
      console.error('Page Error:', msg.text());
    }
  });

  await page.goto('https://example.com');
  await browser.close();
})();

Dialog Events

Handle JavaScript dialogs (alert, confirm, prompt):

page.on('dialog', async (dialog) => {
  console.log(`Dialog type: ${dialog.type()}`);
  console.log(`Dialog message: ${dialog.message()}`);

  // Handle different dialog types
  switch (dialog.type()) {
    case 'alert':
      await dialog.accept();
      break;
    case 'confirm':
      await dialog.accept(); // or dialog.dismiss()
      break;
    case 'prompt':
      await dialog.accept('Your input here');
      break;
    case 'beforeunload':
      await dialog.accept();
      break;
  }
});

Network Events

Monitor network requests and responses:

// Request event
page.on('request', (request) => {
  console.log(`→ ${request.method()} ${request.url()}`);

  // Filter by resource type
  if (request.resourceType() === 'image') {
    console.log('Image request:', request.url());
  }
});

// Response event
page.on('response', (response) => {
  console.log(`← ${response.status()} ${response.url()}`);

  // Handle failed requests
  if (!response.ok()) {
    console.error(`Failed request: ${response.status()} ${response.url()}`);
  }
});

// Request failed event
page.on('requestfailed', (request) => {
  console.error(`Request failed: ${request.url()} - ${request.failure().errorText}`);
});

Error Events

Handle uncaught page errors:

page.on('error', (error) => {
  console.error('Page crashed:', error.message);
});

page.on('pageerror', (error) => {
  console.error('Page error:', error.message);
});

Browser Events

Browser Close Events

Handle browser closure:

browser.on('disconnected', () => {
  console.log('Browser has been disconnected');
});

browser.on('targetcreated', (target) => {
  console.log('New target created:', target.url());
});

browser.on('targetdestroyed', (target) => {
  console.log('Target destroyed:', target.url());
});

Complete Example

Here's a comprehensive example that demonstrates multiple event handlers:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();

  // Set up all event listeners BEFORE navigation
  page.on('console', msg => {
    console.log(`[CONSOLE ${msg.type()}]:`, msg.text());
  });

  page.on('dialog', async dialog => {
    console.log(`[DIALOG ${dialog.type()}]:`, dialog.message());
    await dialog.accept();
  });

  page.on('request', request => {
    console.log(`[REQUEST]: ${request.method()} ${request.url()}`);
  });

  page.on('response', response => {
    if (!response.ok()) {
      console.error(`[RESPONSE ERROR]: ${response.status()} ${response.url()}`);
    }
  });

  page.on('requestfailed', request => {
    console.error(`[REQUEST FAILED]: ${request.url()}`);
  });

  page.on('error', error => {
    console.error('[PAGE ERROR]:', error.message);
  });

  page.on('pageerror', error => {
    console.error('[PAGE SCRIPT ERROR]:', error.message);
  });

  // Navigate to page
  await page.goto('https://example.com');

  // Trigger some events for demonstration
  await page.evaluate(() => {
    console.log('Hello from the page!');
    console.error('This is an error message');
    // alert('This is an alert!'); // Uncomment to test dialog handling
  });

  await browser.close();
})();

Best Practices

  1. Add listeners before navigation: Always set up event listeners before calling page.goto() to capture all events from the initial page load.

  2. Handle async operations: Dialog events require async handling, so always use async/await when accepting or dismissing dialogs.

  3. Filter events: Use conditional logic to handle only relevant events, especially for request/response monitoring.

  4. Error handling: Always include error event handlers to prevent crashes and get debugging information.

  5. Resource cleanup: Remove event listeners when they're no longer needed to prevent memory leaks:

const handler = (msg) => console.log(msg.text());
page.on('console', handler);

// Later...
page.off('console', handler);

Event Timing

Events fire in this typical order: 1. request - When a request is initiated 2. response - When a response is received 3. console - When page scripts log to console 4. dialog - When page shows a dialog 5. error/pageerror - When errors occur

Understanding this event flow helps you build robust web scraping and testing applications with Puppeteer.

Try WebScraping.AI for Your Web Scraping Needs

Looking for a powerful web scraping solution? WebScraping.AI provides an LLM-powered API that combines Chromium JavaScript rendering with rotating proxies for reliable data extraction.

Key Features:

  • AI-powered extraction: Ask questions about web pages or extract structured data fields
  • JavaScript rendering: Full Chromium browser support for dynamic content
  • Rotating proxies: Datacenter and residential proxies from multiple countries
  • Easy integration: Simple REST API with SDKs for Python, Ruby, PHP, and more
  • Reliable & scalable: Built for developers who need consistent results

Getting Started:

Get page content with AI analysis:

curl "https://api.webscraping.ai/ai/question?url=https://example.com&question=What is the main topic?&api_key=YOUR_API_KEY"

Extract structured data:

curl "https://api.webscraping.ai/ai/fields?url=https://example.com&fields[title]=Page title&fields[price]=Product price&api_key=YOUR_API_KEY"

Try in request builder

Related Questions

Get Started Now

WebScraping.AI provides rotating proxies, Chromium rendering and built-in HTML parser for web scraping
Icon