I cannot screenshot with puppeteer in heroku

Question

I am trying to use a screenshot app to my portifolio using puppeteer in heroku server.

server.js

(async() => {
        const browser = await puppeteer.launch({
            args: ['--no-sandbox', '--disable-setuid-sandbox']
        });

        const page = await browser.newPage();

        await page.goto(urlToScreenshot,{timeout:60000});

        await page.waitFor(3000);


        await page.screenshot().then(function(buffer) {
            res.setHeader('Content-Disposition', 'attachment;filename="' + urlToScreenshot + '.png"');
            res.setHeader('Content-Type', 'image/png');
            res.send(buffer);
        });

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

testscreenshot.html

<div>

   <img class="port container-fluid lazy" style="height:226px;" src="https://url2screenshot-imm.herokuapp.com/?url=https://google.com/">

   <img class="port container-fluid lazy" style="height:226px;" src="https://url2screenshot-imm.herokuapp.com/?url=https://yahoo.com/">

   <img class="port container-fluid lazy" style="height:226px;" src="https://url2screenshot-imm.herokuapp.com/?url=https://facebook.com/">

   <img class="port container-fluid lazy" style="height:226px;" src="https://url2screenshot-imm.herokuapp.com/?url=https://twitter.com/">

   <img class="port container-fluid lazy" style="height:226px;" src="https://url2screenshot-imm.herokuapp.com/?url=https://reddit.com/">

   <img class="port container-fluid lazy" style="height:226px;" src="https://url2screenshot-imm.herokuapp.com/?url=https://youtube.com/">

   <img class="port container-fluid lazy" style="height:226px;" src="https://url2screenshot-imm.herokuapp.com/?url=https://vimeo.com/">

   <img class="port container-fluid lazy" style="height:226px;" src="https://url2screenshot-imm.herokuapp.com/?url=https://stackoverflow.com/">

   <img class="port container-fluid lazy" style="height:226px;" src="https://url2screenshot-imm.herokuapp.com/?url=https:/github.com/">

   <img class="port container-fluid lazy" style="height:226px;" src="https://url2screenshot-imm.herokuapp.com/?url=https://bbc.co.uk/">

</div>

but when I open testscreenshot.html, the server logs appears

at=error code=H12 desc="Request timeout" method=GET path="/?url=https://facebook.com/" host=url2screenshot-imm.herokuapp.com request_id=e37b3748-d543-4435-ae69-7460263e750a fwd="186.247.177.201" dyno=web.1 connect=25ms service=30000ms status=503 bytes=0 protocol=https

2018-04-30T15:15:30.216789+00:00 heroku[router]: at=error code=H12 desc="Request timeout" method=GET path="/?url=https://google.com/" host=url2screenshot-imm.herokuapp.com request_id=a2d17f7a-4988-4414-864b-f916d26f05e6 fwd="186.247.177.201" dyno=web.1 connect=1ms service=30000ms status=503 bytes=0 protocol=https

2018-04-30T15:15:30.283300+00:00 heroku[router]: at=error code=H12 desc="Request timeout" method=GET path="/?url=https://reddit.com/" host=url2screenshot-imm.herokuapp.com request_id=73b70dad-851f-4e8b-a06b-4c647b7aa02f fwd="186.247.177.201" dyno=web.1 connect=0ms service=30000ms status=503 bytes=0 protocol=https

2018-04-30T15:15:30.283055+00:00 heroku[router]: at=error code=H12 desc="Request timeout" method=GET path="/?url=https://twitter.com/" host=url2screenshot-imm.herokuapp.com request_id=786dc9a0-4048-4fce-b9a5-96c2caf63c8d fwd="186.247.177.201" dyno=web.1 connect=3ms service=30001ms status=503 bytes=0 protocol=https

2018-04-30T15:15:30.254133+00:00 heroku[router]: at=error code=H12 desc="Request timeout" method=GET path="/?url=https://yahoo.com/" host=url2screenshot-imm.herokuapp.com request_id=f5dc9005-f655-4ef9-9172-893d105480e4 fwd="186.247.177.201" dyno=web.1 connect=15ms service=30000ms status=503 bytes=0 protocol=https

2018-04-30T15:15:30.358536+00:00 heroku[router]: at=error code=H12 desc="Request timeout" method=GET path="/?url=https://youtube.com/" host=url2screenshot-imm.herokuapp.com request_id=926f7516-f270-4de1-9aa4-f2a9d63b36bc fwd="186.247.177.201" dyno=web.1 connect=0ms service=30000ms status=503 bytes=0 protocol=https

It works only when I make requests one by one

Answer 1

I found the answer here https://github.com/heroku/heroku-buildpack-google-chrome/issues/37. Heroku doesn't have any swap space thus resulting in crash. Adding the --disable-dev-shm-usage and --single-process flags fixed it.

const browser = await puppeteer.launch({
      headless: true,
      args: [
        '--no-sandbox',
        '--disable-setuid-sandbox',
        '--disable-dev-shm-usage',
        '--single-process'
      ],
    });