How to automatically close Puppeteer pages on error events?

Other Questions Puppeteer
1

I’m working on a project using Puppeteer and I’ve encountered an issue. Occasionally, the pages I try to load crash, and the .close() method never gets called. I’m looking for a method that will ensure pages are closed automatically whenever an error is encountered.

Here’s an alternate version of my current approach:

async function capturePage(url, id) {
  const page = await browser.newPage();
  await page.setViewport({ width: 1280, height: 720 });
  try {
    await page.goto(url, { timeout: 60000 });
    await page.screenshot({ path: `./images/${id}.png`, fullPage: true });
  } catch (err) {
    console.error('Error loading page:', err);
  } finally {
    await page.close();
  }
}

Any suggestions on enhancing error handling to ensure the page closes properly in all cases would be greatly appreciated. Thanks!

2

yo, ive run into this too. what worked for me was using a timeout wrapper around the page operations. somethin like this:

const timeoutPromise = (ms, promise) => {
  return Promise.race([
    promise,
    new Promise((_, reject) => setTimeout(() => reject(new Error('Timeout')), ms))
  ]);
};

then just wrap ur page stuff in this. itll force close if it hangs too long. hope it helps!

3

I’ve encountered this issue before, and I found that implementing a global error handler for the browser instance can be quite effective. This approach ensures that all pages are closed, regardless of where the error occurs.

Here’s a snippet that demonstrates this technique:

browser.on('targetcreated', async (target) => {
  const page = await target.page();
  if (page) {
    page.on('error', (error) => {
      console.error(`Page Error: ${error}`);
      if (!page.isClosed()) page.close().catch(console.error);
    });
  }
});

By attaching this handler to the browser, you’re covered for all pages, including those created indirectly. It’s a set-it-and-forget-it solution that’s saved me countless headaches. Just make sure to implement it right after creating your browser instance.

4

I’ve dealt with similar issues in my Puppeteer projects. One effective approach I’ve found is to use the page.on(‘error’) event listener. This way, you can catch and handle errors that occur during page execution, ensuring the page closes even if an unexpected error occurs.

Here’s how I’ve implemented it:

async function capturePage(url, id) {
  const page = await browser.newPage();
  page.on('error', (err) => {
    console.error(`Page error: ${err}`);
    if (!page.isClosed()) page.close();
  });

  try {
    await page.setViewport({ width: 1280, height: 720 });
    await page.goto(url, { timeout: 60000 });
    await page.screenshot({ path: `./images/${id}.png`, fullPage: true });
  } catch (err) {
    console.error('Error during page capture:', err);
  } finally {
    if (!page.isClosed()) await page.close();
  }
}

This approach has worked well for me, ensuring pages close even when unexpected errors occur. Remember to remove the event listener if you’re reusing the browser instance to avoid memory leaks.