Puppeteer throws "Protocol error (IO.read): Target closed." now and again - node.js

Question

This is driving me insane... I have the following code:
// Load a PUG template
const template = await loadTemplateRoute(pdfProps.layout);
// Generate HTML
const html = template(pdfProps);
// requirement for puppeteer to work locally, if using locally
const executablePath = process.env.EXECUTABLE_PATH || await chromium.executablePath;
console.log('executable path', executablePath);
// These are needed to run on WSL
chromium.args.push(['--disable-gpu', '--single-process']);
console.log('1');
const browser = await puppeteer.launch({
args: chromium.args,
defaultViewport: chromium.defaultViewport,
executablePath,
headless: true,
ignoreHTTPSErrors: true
});
console.log('2');
const page = await browser.newPage();
console.log('3');
// eslint-disable-next-line quote-props
await page.setContent(html, { 'waitUntil': 'networkidle2' });
console.log('4');
// here we can insert customizable features in the future using JSONB stored formats
const pdf = await page.pdf({
format: 'A4',
printBackground: true,
margin: {
top: '1cm',
right: '1cm',
bottom: '1cm',
left: '1cm'
}
});
await page.close();
console.log('5');
await browser.close();
console.log('6');
return pdf;
Running this gives me the PDF I want, but only like once in ten times. The other times I get either this after console.log('4'):
Protocol error (IO.read): Target closed.
at .../node_modules/puppeteer-core/lib/Connection.js:183:56
at new Promise (<anonymous>)
at CDPSession.send (.../node_modules/puppeteer-core/lib/Connection.js:182:12)
at Function.readProtocolStream (.../node_modules/puppeteer-core/lib/helper.js:254:37)
at processTicksAndRejections (internal/process/task_queues.js:94:5)
at Page.pdf (.../node_modules/puppeteer-core/lib/Page.js:1021:12)
Or other times (more seldom) this after console.log('3'):
Navigation failed because browser has disconnected!
at CDPSession.<anonymous> (.../node_modules/puppeteer-core/lib/LifecycleWatcher.js:46:107)
at CDPSession.emit (events.js:223:5)
at CDPSession.EventEmitter.emit (domain.js:475:20)
at CDPSession._onClosed (.../node_modules/puppeteer-core/lib/Connection.js:215:10)
at Connection._onClose (.../node_modules/puppeteer-core/lib/Connection.js:138:15)
at WebSocket.<anonymous> (.../node_modules/puppeteer-core/lib/WebSocketTransport.js:48:22)
at WebSocket.onClose (.../node_modules/puppeteer-core/node_modules/ws/lib/event-target.js:124:16)
at WebSocket.emit (events.js:223:5)
at WebSocket.EventEmitter.emit (domain.js:475:20)
at WebSocket.emitClose (.../node_modules/puppeteer-core/node_modules/ws/lib/websocket.js:191:10)
at Socket.socketOnClose (.../node_modules/puppeteer-core/node_modules/ws/lib/websocket.js:850:15)
at Socket.emit (events.js:223:5)
at Socket.EventEmitter.emit (domain.js:475:20)
at TCP.<anonymous> (net.js:664:12)
I run this on a WSL Ubuntu but running it on Mac gives errors too (but less frequently).
It seems to be working better if I wait like 5 minutes between tries but listing processes (ps -ef) shows nothing running/hanging...
EDIT: Logging out what's happening in /node_modules/puppeteer-core/lib/Connection.js:182:56 gives:
send(); Page.printToPDF {
transferMode: 'ReturnAsStream',
landscape: false,
displayHeaderFooter: false,
headerTemplate: '',
footerTemplate: '',
printBackground: true,
scale: 1,
paperWidth: 8.27,
paperHeight: 11.7,
marginTop: 0.39375,
marginBottom: 0.39375,
marginLeft: 0.39375,
marginRight: 0.39375,
pageRanges: '',
preferCSSPageSize: false
}
send(); IO.read { handle: '1' }
send(); IO.read { handle: '1' }
The Page.printToPDF works fine, the first IO.read also is working while the second IO.read throws the error...

Answer 1

After trying a bunch of things I started suspecting external sources as it worked fine with simple templates.
Reworking the templates to not load any external CSS and instead place all CSS in <style> tags and "pre-parse" all images to base64 (<img src="data:image/png;MIIlkaa3498asm..." />) it is no longer happening...
Clearly some load of resources that is messing with me...

Answer 2

I had the same issue and resolved it by
replacing page.pdf() with page.createPDFStream() (docs here)
adding a 60 seconds timeout to page.createPDFStream() and page.setContent (defaults to 30 sec)
waiting for ['load', 'domcontentloaded'] events to be fired
Example
await page.setContent(html, {
timeout: 60000,
waitUntil: ['load', 'domcontentloaded'],
});
await page.emulateMediaType('screen');
// const pdf = await page.pdf({
const pdfStream = await page.createPDFStream({
timeout: 60000,
format: 'A4',
margin: { top: '0.5cm', right: '1cm', bottom: '0.8cm', left: '1cm' },
printBackground: true,
});
// ...
// do something with the PDF stream, e.g. save to file
pdfStream
.on('end', () => console.log('pdfStream done'))
.on('error', (err) => console.log(err))
.pipe(fs.createWriteStream('my-form.pdf'));