Puppeteer unable to run on Heroku

Question

I deployed an app on heroku, and I added the Puppeteer Heroku buildpack.

After a succesful redeployment, I tried to run it and it fails. Using heroku logs -t, I get this error message:

2018-09-07T13:16:10.870497+00:00 app[web.1]: Error: Failed to launch chrome!
2018-09-07T13:16:10.870512+00:00 app[web.1]: [0907/131610.045486:FATAL:zygote_ho
st_impl_linux.cc(116)] No usable sandbox! Update your kernel or see https://chro
mium.googlesource.com/chromium/src/+/master/docs/linux_suid_sandbox_development.
md for more information on developing with the SUID sandbox. If you want to live
 dangerously and need an immediate workaround, you can try using --no-sandbox.

Eyeopener

Answer 1

You should be able to solve this issue by passing the --no-sandbox and --disable-setuid-sandbox flags to puppeteer.launch():

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

If this does not work, you may want to read the official Puppeteer troubleshooting guide: Running Puppeteer on Heroku.

Haga

Installation of https://github.com/jontewks/puppeteer-heroku-buildpack buildpack on Heroku solved the issue. – Bakerman

Thank you @EugeneKarataev Worked for me by installing the package – Noncompliance

Answer 2

Here is what worked for me. First, I clear all my buildpacks and then I added the puppeteer-heroku-buildpack and the heroku/nodejs one:

$ heroku buildpacks:clear
$ heroku buildpacks:add --index 1 https://github.com/jontewks/puppeteer-heroku-buildpack
$ heroku buildpacks:add --index 1 heroku/nodejs

Then, add the following args to the puppeteer launch function:

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

Finally, deploy it back to Heroku:

$ git add .
$ git commit -m "Fixing deployment issue"
$ git push heroku master

Recrudesce

elements.heroku.com/buildpacks/jontewks/… – Establishmentarian

does this work on dockerized image pushed to heroku? Do i have to install buildpacks? – Klondike

after using the buildpacks , the deploy got stuck. solved it by clearing the build cache. this might help help.heroku.com/18PI5RSY/how-do-i-clear-the-build-cache – Carissacarita

i love you man. the '--disable-setuid-sandbox' was missing for me – Pittel

In addition to the steps above I had to use the info from here to fix the subsequent error message about Chrome/Chromium not being found. – Bantling

Answer 3

This answer is fantastic, but in the interests of a minimal, runnable example I thought I'd share my complete code and workflow for getting up and running with a Puppeteer-based web app.

See this answer for a simple scheduler and a clock process version (although all three approaches can coexist in one app without doing anything special).

package.json:

{
  "name": "test-puppeteer",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start": "node index.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1",
    "puppeteer": "^9.1.1"
  }
}

Procfile:

web: node index.js

index.js:

const express = require("express");
const puppeteer = require("puppeteer");

const app = express();
app.set("port", process.env.PORT || 5000);

const browserP = puppeteer.launch({
  args: ["--no-sandbox", "--disable-setuid-sandbox"]
});

app.get("/", (req, res) => {
  // FIXME move to a worker task; see https://devcenter.heroku.com/articles/node-redis-workers
  let page;
  (async () => {
    page = await (await browserP).newPage();
    await page.setContent(`<p>web running at ${Date()}</p>`);
    res.send(await page.content());
  })()
    .catch(err => res.sendStatus(500))
    .finally(() => page.close())
  ;
});

app.listen(app.get("port"), () => 
  console.log("app running on port", app.get("port"))
);

Set up

1. Install Heroku CLI and create a new app with Node and Puppeteer buildpacks (see this answer):

   heroku create
   heroku buildpacks:add --index 1 https://github.com/jontewks/puppeteer-heroku-buildpack -a cryptic-dawn-48835
   heroku buildpacks:add --index 1 heroku/nodejs -a cryptic-dawn-48835
   

   (replace cryptic-dawn-48835 with your app name)

2. Deploy:

   git init
   git add .
   git commit -m "initial commit"
   heroku git:remote -a cryptic-dawn-48835
   git push heroku master
   

3. Verify that it worked with curl https://cryptic-dawn-48835.herokuapp.com. You should see something like

   <html><head></head><body><p>web running at Wed May 19 2021 02:12:48 GMT+0000 (Coordinated Universal Time)</p></body></html>
   

Omarr

excellent solution, worked for me! if you need only add the pack, just run "heroku buildpacks:add --index 1 github.com/jontewks/puppeteer-heroku-buildpack -a your-app-name". Make a new comit in order to make a new release and that's all! – Florafloral

Thanks, man, It worked like a charm. Just remove that Heroku create cmd as if you know your app name, you won't need to crate a new app. – Audley

@VibhuPandey Glad it worked. I don't see the harm in leaving it in. Just ignore it if it doesn't apply to you. – Omarr

Answer 4

I have been able to solve the problem installing puppeteer v19.7.2 in Heroku by adding the following file to be base directory of my project: ".puppeteerrc.cjs"

const {join} = require('path');

/**
 * @type {import("puppeteer").Configuration}
 */
module.exports = {
  // Changes the cache location for Puppeteer.
  cacheDirectory: join(__dirname, '.cache', 'puppeteer'),
};

Puppeteer v19 moved the cache directory and what this file does is tell the npm installer to move the cache directory from $HOME/.cache/puppeteer to the current-working-directory/.cache/puppeteer. This file is also read by puppeteer when launched so it knows where to find the cached files. I have tested this on Heroku22 and worked perfect. Remember to add .cache to your .gitignore.

Heins