puppeteer: Error: Protocol error (Page.captureScreenshot): Unable to capture screenshot when taking screenshot of a large viewport

Steps to reproduce

Tell us about your environment:

Puppeteer version: 2.0.0
Platform / OS version: Windows 10 1903 x64
Node.js version: 10.17

What steps will reproduce the problem?

Please include code that reproduces the issue.

Here is a code snippet that sets large viewport and is trying to take screenshot of that

// test.js
const puppeteer = require('puppeteer');

class Server {
    async setup() {
        if (!this.browser) {
            this.browser = await puppeteer.launch();
        }
    }
    
    async export() {
        try {
            await this.setup();
    
            const me = this;
    
            const page = await this.browser.newPage();
    
            page.on('error', e => {
                throw e;
            });
    
            await page.setContent('<html><head></head><body><h1>test</h1></body></html>');
    
            await page.setViewport({
                width : 10000,
                height : 50000
            });
            await page.emulateMedia('print');
    
            await page.screenshot({
                deviceScaleFactor : 4
            });
    
            await this.browser.close();
    
            console.log('browser closed');
        }
        catch (e) {
            await this.browser.close();
            
            throw e;
        }
    }
}

const srv = new Server();

srv.export()
    .then(() => process.exit())
    .catch(e => {
        process.exit(1);
    });

What is the expected result? Screenshot taken

What happens instead? Exception thrown

Error: Protocol error (Page.captureScreenshot): Unable to capture screenshot
 at Promise (...server\node_modules\puppeteer\lib\Connection.js:183:56) 
 at new Promise (<anonymous>)
 at CDPSession.send (...server\node_modules\puppeteer\lib\Connection.js:182:12)
 at Page._screenshotTask (...server\node_modules\puppeteer\lib\Page.js:951:39)
 at process._tickCallback (internal/process/next_tick.js:68:7) -- ASYNC --
 at Page.<anonymous> (...server\node_modules\puppeteer\lib\helper.js:111:15)
 at Server.export (...server\src\utils\screenshot.js:34:24)
 at process._tickCallback (internal/process/next_tick.js:68:7)

Initially I got that exception from a puppeteer which was launched from node express request handler. It failed to take a screenshot of size 700x25000 with same exception. So I tried to figure what’s going on and wrote this test script, which worked just fine with same html and same size of the viewport. Then I tried to increase viewport to some ridiculous number and reproduced the problem.

So screenshot fails inside node express request handler on a viewport 700x25000 and fails outside of the node express but at much higher viewport size, like 10000x50000

So questions are:

Is there a limit to screenshot size which can be taken?
If so, how can I calculate that limit?
Is there a safe value for viewport?
Can you suggest a way to take screenshots of large pages? What comes to my mind is to play with trasnform: scale() to fit content into some reasonable viewport, e.g. UHD

About this issue

Original URL
State: open
Created 4 years ago
Reactions: 42
Comments: 34

Most upvoted comments

I have the same problem, any updates?

NikolaiSilver on Aug 6, 2020

Hi everyone! Seems to be i found problem, as i understand for browser rendering important free space in temp directory for shared memory (on centos it’s /temp or /dev/shm dir). In puppeteer launch options add dumpio:true -option, and if in time when puppeteer open page/render you’ve got error, something like this:

[WARNING:discardable_shared_memory_manager.cc(197)] Less than 64MB of free space in temporary directory for shared memory files: 29

or ERROR:file_io.cc(140)] write: No space left on device (28)

It’s mean that you should increase tmp directory size. To check how much memory you`ve got type in terminal command “df -h” and take a look to tmp dirs available size.

Hope it will help you. Cheers.

ArtTkachenko on May 5, 2022

This doesn’t address the underlying issue but I was getting this error and found that when I removed the fullPage: true parameter from the screenshot call the error went away and I was able to take screenshots without issue.

alexlonginc on Jul 25, 2022

This issue is reported on the chrome dev community as well and it is still open. https://bugs.chromium.org/p/chromium/issues/detail?id=770769&desc=2

ki412412 on Nov 25, 2022

I believe there could be a limit on the browser side about how big a screenshot can be. We will need to investigate.

OrKoN on Sep 6, 2022

Same here.

caramdache on Jan 6, 2021

Seeing this error in long viewports as well.

whoisjuan on Oct 11, 2020

I am seeing similar issues. Any update on this ?

Puppeteer - latest version Executing on Headless Chrome

Error: Protocol error (Page.captureScreenshot): Cannot take screenshot with 0 width. at /mnt/tmp/local.prod/source/node_modules/puppeteer-core/lib/cjs/puppeteer/common/Connection.js:208:63 at CDPSession.send (/mnt/tmp/local.prod/source/node_modules/puppeteer-core/lib/cjs/puppeteer/common/Connection.js:207:16) at Page._screenshotTask (/mnt/tmp/local.prod/source/node_modules/puppeteer-core/lib/cjs/puppeteer/common/Page.js:1092:43)

snehalkulkarni20 on Oct 5, 2020