[Bug]: Header/Footer placeholders stopped working in chrome-headless-shell in Docker

[josiasmontag]

Minimal, reproducible example

const { writeFile } = require('fs/promises');
const { launch } = require('puppeteer');

const puppeteerOptions = {
    margin: { top: 100, bottom: 100, left: 100, right: 100 },
    format: 'a4',
    displayHeaderFooter: true,
    headerTemplate: '<div style="font-size:20px; padding-left: 20px;">Page: <span class="pageNumber"></span> / <span class="totalPages"></span></div>',
    footerTemplate: '<div style="font-size:20px; padding-left: 20px;">Page: <span class="pageNumber"></span> / <span class="totalPages"></span></div>',
};

async function main() {
    const browser = await launch({
        args: ['--no-sandbox', '--disable-dev-shm-usage'],
        headless: 'shell',
    });

    const page = await browser.newPage();
    await page.setContent('<div>Hello, World!</div>', { waitUntil: 'networkidle0' });

    const pdf = await page.pdf(puppeteerOptions);

    await browser.close();

    writeFile('./output/output.pdf', pdf);
}

 main();

Error string

no error

Bug behavior

• Flaky
• PDF

Background

Since Puppeteer v22, the magic CSS classes stopped working on Linux and old headless (shell) mode:

It works correctly:

• On Linux and new headless
• On MacOS and new headless
• On MacOS and old headless (shell)

Reproducer using Docker and the script above:

docker run -i --init --cap-add=SYS_ADMIN --rm -v .:/home/pptruser/output/ ghcr.io/puppeteer/puppeteer:latest node -e "$(cat test.js)"

Also see #10024 (last 2 comments)

Expectation

I expected to get the pageNumber and totalPages placeholder to be replaced.

Reality

It does not get replaced on Linux with headless shell.

Puppeteer configuration file (if used)

No response

Puppeteer version

22.6.2

Node version

20.11.1

Package manager

npm

Package manager version

10.2.4

Operating system

Linux

[github-actions]

This issue was not reproducible. Please check that your example runs locally and the following:

• Ensure the script does not rely on dependencies outside of puppeteer and puppeteer-core.
• Ensure the error string is just the error message.

  • Bad:

    Error: something went wrong
      at Object.<anonymous> (/Users/username/repository/script.js:2:1)
      at Module._compile (node:internal/modules/cjs/loader:1159:14)
      at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
      at Module.load (node:internal/modules/cjs/loader:1037:32)
      at Module._load (node:internal/modules/cjs/loader:878:12)
      at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
      at node:internal/main/run_main_module:23:47

  • Good: Error: something went wrong.

• Ensure your configuration file (if applicable) is valid.
• If the issue is flaky (does not reproduce all the time), make sure 'Flaky' is checked.
• If the issue is not expected to error, make sure to write 'no error'.

Once the above checks are satisfied, please edit your issue with the changes and we will
try to reproduce the bug again.

---

Analyzer run

[OrKoN]

I am able to reproduce in docker but not able to reproduce on a full Linux distro.

[outbackStack]

Maybe we are missing some additional packages to run on Linux? That's my current additional installs which was working before v22

• wget
• ca-certificates
• libnss3
• libatk1.0-0
• libatk-bridge2.0-0
• libcups2
• libdrm2
• libxkbcommon-x11-0
• libxcomposite1
• libxdamage1
• libgbm1
• libpangocairo-1.0-0
• libasound2
• libxfixes3
• libxrandr2

[Peque]

@josiasmontag Did you find any workaround? (apart from downgrading to v21)

I can confirm it is working just fine under Linux while developing, but when building the Docker image the header/footer are missing.

[OrKoN]

It has to be some missing packages (fonts maybe?), I tried a bunch and so far has not been able to identify it

[outbackStack]

I don't think it's the font as the word "Page" is showing. Must be a package of some sort.

<li>Page: <span class="pageNumber"></span>/<span class="totalPages"></span></li>

[OrKoN]

So in the browser the parameters for the footer/header are executed as a script https://source.chromium.org/chromium/chromium/src/+/main:components/printing/renderer/print_render_frame_helper.cc;l=680;drc=f0f5f3ceebb00da9363ccc7a1e2c0f17b6b383ba and that ends up on the page for the footer/header https://source.chromium.org/chromium/chromium/src/+/main:components/printing/resources/print_header_footer_template_page.html;l=83;drc=f6529c7990744370869e4ab2794caae6c46ba044

I do not see so far why the values could be empty so I currently assume that something happens with the rendering

[OrKoN]

Perhaps there is some sort of script execution error.

[outbackStack]

All fonts are embedded.

[outbackStack]

Do you know how I could I could log pageNumber number from this?

[OrKoN]

I don't think you can log from the footer/header frame

(at least not without adding some extra code to get console messages)

[OrKoN]

I have built a tip-of-trip headless shell and I am not able to reproduce an issue with it in Docker. Perhaps, something produced by the build is missing.

[outbackStack]

@OrKoN Would you be able to send us your docker file so we can test on our Linux VM?

[OrKoN]

The Dockerfile is here https://github.com/puppeteer/puppeteer/blob/main/docker/Dockerfile

[Peque]

@OrKoN Based on that Dockerfile, I tried using chrome@124.0.6367.60 plus headless: true in my own Dockerfile instead of chrome-headless-shell@124.0.6367.60 plus headless: "shell" (both with puppeteer-core@22.7.0) and that seems to work fine when it comes to the page numbers (just in case that helps narrowing down the issue).

Update: Removed unrelated comment about color issues when printing with non-shell headless Chrome (it yields the same output as when using the print dialog in headful Chrome)

[OrKoN]

@Peque this issue description already provides this information. As for color, sounds unrelated: in general, the printing with headless Chrome (not shell) should match printing using the print dialog in headful Chrome.

[dannybeckett]

This is probably unrelated but another time that page numbers broke on Docker installs (despite working fine on normal Linux installs), the solution was to copy the locales dir from Chromium in to the Docker image - per a chromedp/docker-headless-shell issue

I haven't tried this as I'm unsure as to where to copy the dir to for FROM ghcr.io/puppeteer/puppeteer:latest (the OP was using FROM chromedp/headless-shell:stable)

[dannybeckett]

From another user:

Ever since updating to version 22.2.0, the page number no longer appears. Is anyone else experiencing this issue on a Debian server? It seems to be working fine on a Mac.

Originally posted by @outbackStack in #5345 (comment)

[dannybeckett]

From myself on a new issue closed as a dupe of this one:

I am also experiencing lack of page numbers when using headless: 'shell'. I also tried adding --lang=en-US to the args of const browser = await puppeteer.launch() as suggested on #5345

The footer adds, but displays "Page of" instead of "Page 3 of 12" E.G.

Whereas without headless: 'shell' (using the default headless setting), the page numbers display without any problem.

Similar to the OP I am running Debian (latest). I am using Docker (latest) to install and run Puppeteer (latest).

Originally posted by @dannybeckett in #12361 (comment)

[OrKoN]

I filed an upstream issue https://crbug.com/337047877 as it does look like something is missing from chrome-headless-shell

[OrKoN]

I can confirm it is caused by locales (thanks for the hint). Copying locales from chromium seems to help but also setting export LANG=en_US.UTF-8 helps.

[outbackStack]

yah! thanks everyone! I can get my page number back! LOL

[dannybeckett]

Beautiful, I’m glad I could help @OrKoN. Thank you to everyone else too!

For anyone wanting to get the page numbers back before this makes the next release, the fix is in your Dockerfile, after FROM ghcr.io/puppeteer/puppeteer:latest put the following:

ENV LANG en_US.UTF-8

Per PR #12369

[OrKoN]

This was also fixed upstream to properly detect en_US.POSIX locale and https://crbug.com/338179885 filed to include locales into the headless shell distribution to support other locales. With this, I am closing the issue and the fix will be out with the next release.