Empty responses on second page visit in domain with setRequestInterception(true) on some SPA pages

Steps to reproduce

Tell us about your environment:

• Puppeteer version: 5.3.1
• Platform / OS version: Windows 10
• Node.js version: 12.16.3

What steps will reproduce the problem?

Attempting to use page.goto() on sites built in the sapper framework leads to null responses on second page visits, see sample code fetching from 2 different sapper sites.

const puppeteer = require('puppeteer');

(async() => {
    const browser = await puppeteer.launch()
    const page = await browser.newPage()
    await page.setRequestInterception(true);
    page.on('request', async interceptedRequest => {
        try {
            await interceptedRequest.continue();
        } catch (err) {
            console.log(err);
        }
    });

    let r = null
    console.log('Site 1 first page...')
    r = await page.goto('https://tamethebots.com/', { timeout: 20000, waitUntil: 'networkidle0' }).catch(e => console.error(e));
    console.log(r) // returns as expected
    console.log('Site 1 second page...')
    r = await page.goto('https://tamethebots.com/services', { timeout: 20000, waitUntil: 'networkidle0' }).catch(e => console.error(e));
    console.log(r) // always returns null
    console.log('Site 2 first page...')
    r = await page.goto('https://formvalidation.io/', { timeout: 20000, waitUntil: 'networkidle0' }).catch(e => console.error(e));
    console.log(r) // returns as expected
    console.log('Site 2 second page...')
    r = await page.goto('https://formvalidation.io/guide/validators', { timeout: 20000, waitUntil: 'networkidle0' }).catch(e => console.error(e));
    console.log(r) // always returns null
    browser.close();
})();

What is the expected result?

main resource response is returned for all four page.goto() calls

What happens instead? As per the comments, the second page.goto() for each site is always null, with no errors caught for page.goto() This only happens if await page.setRequestInterception(true); is set.

I can’t seem to find reason as to why this would happen?

EDIT: looking at server logs (the first site is mine) there is a request for the second page, and associated resources, which received a 200 status.

[ntgussoni]

OK, so this appears to be service worker related, adding: await page._client.send('Network.setBypassServiceWorker', { bypass: true }); solves the issue, here in context of the example:

const puppeteer = require('puppeteer');

(async() => {
    const browser = await puppeteer.launch()
    const page = await browser.newPage()
    await page._client.send('Network.setBypassServiceWorker', { bypass: true });
    await page.setRequestInterception(true);
    page.on('request', async interceptedRequest => {
        try {
            await interceptedRequest.continue();
        } catch (err) {
            console.log(err);
        }
    });

    let r = null
    console.log('Site 1 first page...')
    r = await page.goto('https://tamethebots.com/', { timeout: 20000, waitUntil: 'networkidle0' }).catch(e => console.error(e));
    console.log(r) // returns as expected
    console.log('Site 1 second page...')
    r = await page.goto('https://tamethebots.com/services', { timeout: 20000, waitUntil: 'networkidle0' }).catch(e => console.error(e));
    console.log(r) // now returns as expected
    console.log('Site 2 first page...')
    r = await page.goto('https://formvalidation.io/', { timeout: 20000, waitUntil: 'networkidle0' }).catch(e => console.error(e));
    console.log(r) // returns as expected
    console.log('Site 2 second page...')
    r = await page.goto('https://formvalidation.io/guide/validators', { timeout: 20000, waitUntil: 'networkidle0' }).catch(e => console.error(e));
    console.log(r) // now returns as expected
    browser.close();
})();

await page._client.send('Network.setBypassServiceWorker', { bypass: true });

worked in my case. Thanks!

[dwsmart]

OK, so this appears to be service worker related, adding: await page._client.send('Network.setBypassServiceWorker', { bypass: true }); solves the issue, here in context of the example:

const puppeteer = require('puppeteer');

(async() => {
    const browser = await puppeteer.launch()
    const page = await browser.newPage()
    await page._client.send('Network.setBypassServiceWorker', { bypass: true });
    await page.setRequestInterception(true);
    page.on('request', async interceptedRequest => {
        try {
            await interceptedRequest.continue();
        } catch (err) {
            console.log(err);
        }
    });

    let r = null
    console.log('Site 1 first page...')
    r = await page.goto('https://tamethebots.com/', { timeout: 20000, waitUntil: 'networkidle0' }).catch(e => console.error(e));
    console.log(r) // returns as expected
    console.log('Site 1 second page...')
    r = await page.goto('https://tamethebots.com/services', { timeout: 20000, waitUntil: 'networkidle0' }).catch(e => console.error(e));
    console.log(r) // now returns as expected
    console.log('Site 2 first page...')
    r = await page.goto('https://formvalidation.io/', { timeout: 20000, waitUntil: 'networkidle0' }).catch(e => console.error(e));
    console.log(r) // returns as expected
    console.log('Site 2 second page...')
    r = await page.goto('https://formvalidation.io/guide/validators', { timeout: 20000, waitUntil: 'networkidle0' }).catch(e => console.error(e));
    console.log(r) // now returns as expected
    browser.close();
})();