Nest JS with Puppeteer

[formal cedar]

I am using puppeter in my nest js application, does anyone know the solution to solve this problem? It occurs an error when running generate pdf on OKD server but on my windows, and I also use docker when running it it works.

Failed to launch the browser process!\nchrome_crashpad_handler: --database is required\nTry 'chrome_crashpad_handler --help' for more information.\n\n\nTROUBLESHOOTING: https://pptr.dev/troubleshooting\n

# Use a Node.js base image
FROM node:18-alpine

# Install additional dependencies needed for Chrome
RUN apk update && apk add --no-cache \
    chromium \
    nss \
    freetype \
    harfbuzz \
    ca-certificates \
    ttf-freefont 

# Set environment variable PATH for Node.js
ENV PATH="/app/node_modules/.bin:${PATH}"

ENV PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium-browser
ENV XDG_CONFIG_HOME=/tmp/.chromium
ENV XDG_CACHE_HOME=/tmp/.chromium
ENV CHROME_BIN="/usr/bin/chromium-browser" 
ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD="true"

# Set the working directory in the container to /app
WORKDIR /app

# Copy the package.json and package-lock.json files into the container
COPY package*.json ./

RUN mkdir -vp ./uploads
RUN mkdir -vp ./tmp

RUN chmod -R g+rwX ./tmp/

# Install the dependencies
RUN npm install

# Copy the rest of the application code into the container
COPY . .

# Build the NestJS application for production
RUN npm run build

# Expose the port that the application listens on
EXPOSE 3000

# Start the application
CMD ["node", "dist/main"]

I'm using the puppeter version "puppeteer": "^21.7.0",

this is my puppeter launch configuration code

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

[copper finch]

Tried with latest puppeter version? P.S. In latest version headless from "new" comes to "true"

Also i would try build without skipping chromium download, to check if reproduce same error

[formal cedar]

i use "puppeteer": "^21.7.0", the latest version is 22.0.0, and 'new' option was available in version 21.7.0, https://stackoverflow.com/questions/77084092/puppeteer-old-headless-deprecation-warning

[formal cedar]

did you successfully run puppeter in docker?

[copper finch]

Yes in node:21-alpine3.18 nests pnpm

But didn't try skipping chromium download

[formal cedar]

If you don't mind, could you share the docker file and the puppeter.launch() code snippet?

[copper finch]

Yeah sure, you don't use monorepo/Workspaces/microservices right? Because my docker file is multistage build based on microservice. Btw how big your builded docker image is?

[formal cedar]

No, I'm not using microservices, just a regular nest js application, around 1.14GB

[copper finch]

Sec, i will try create docker file for you

[formal cedar]

thank you so much🫡

[copper finch]

You prefer use node:18-alpine or node:21-alpine?

[formal cedar]

I prefer use node:18-alpine

[copper finch]

# Use a Node.js base image
FROM node:18-alpine AS base
ARG USER_NAME=nestjs

ENV PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium-browser
ENV XDG_CONFIG_HOME=/tmp/.chromium
ENV XDG_CACHE_HOME=/tmp/.chromium
ENV CHROME_BIN="/usr/bin/chromium-browser" 
ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD="true"

ARG APP_DIR=/app
WORKDIR $APP_DIR

FROM base AS resources
# Don't know your required resources files for build, so copying all
COPY . .
# I'm using this: + copying shared modules
# COPY jest.config.js package.json tsconfig.json tsconfig.build.json pnpm-workspace.yaml pnpm-lock.yaml .npmrc ./

FROM resources AS build
RUN npm install
RUN npm run build

FROM build AS prod-deps
RUN npm prune --production

FROM base
# Install additional dependencies needed for Chrome
RUN apk update && apk add --no-cache \
    chromium \
    nss \
    freetype \
    harfbuzz \
    ca-certificates \
    ttf-freefont 

RUN addgroup --system --gid 1001 nodejs && \
    adduser --system --uid 1001 $USER_NAME

RUN DIRECTORY_PATH=./uploads && \
    mkdir -p $DIRECTORY_PATH && \
    chown -R $USER_NAME:nodejs $DIRECTORY_PATH;

RUN DIRECTORY_PATH=./tmp && \
    mkdir -p $DIRECTORY_PATH && \
    chown -R $USER_NAME:nodejs $DIRECTORY_PATH;

# Copy all files required for project
COPY --chown=$USER_NAME:nodejs --from=prod-deps $APP_DIR/node_modules ./node_modules
COPY --chown=$USER_NAME:nodejs --from=build $APP_DIR/dist ./dist

USER $USER_NAME

CMD [ "node", "dist/main.js"]

import { Injectable } from '@nestjs/common';
import puppeteer from 'puppeteer'; // Also take look to puppeteer-extra package

@Injectable()
export class AppService {
  async getHello() {
    const browser = await puppeteer.launch({
      headless: true,
      args: ['--no-sandbox', '--disable-setuid-sandbox'], // Also check for other args like --disable-gpu
    });

    const page = await browser.newPage();
    await page.setViewport({ width: 800, height: 600 });
    await page.setCacheEnabled(false);

    console.log(`Trying screenshot..`);
    await page.goto('https://bot.sannysoft.com');
    // await page.waitForTimeout(5000);
    await new Promise((r) => setTimeout(r, 5000));
    const imageBuffer = await page.screenshot({ path: 'uploads/sannysoft.png', fullPage: true });

    await browser.close();

    console.log('check the screenshot in ./uploads ✨');
  
    return imageBuffer;
  }
}

import { Controller, Get, Res } from '@nestjs/common';
import { AppService } from './app.service';

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}

  @Get()
  async getHello(@Res() res) {
    const screenshot = await this.appService.getHello();
    res.set('Content-Type', 'image/png');
    res.send(screenshot);
  }
}

Okay with my slow internet 😄 I was curious why builded image is so big, when i also use puppeteer in my app, but getting docker image size ~300Mb instead >1.1Gb. But all space takes separately chromium download, not in npm install scripts, but separately download, reduces time for javascript files build.

Also double check your .dockerignore by nestjs recommendations
Used: "puppeteer": "^22.0.0",

[formal cedar]

Thank you so much, i will try it

[formal cedar]

I also don't know why the image size is large, to be honest this is my first time working with docker.

[copper finch]

It's by "Install additional dependencies needed for Chrome" makes + ~800Mb, Without PUPPETEER_SKIP_CHROMIUM_DOWNLOAD, image will be ~300-400Mb, but on code change will run download scripts each time

[copper finch]

In my first time work with docker, my images was >2Gb, while now same images 200Mb 😅

[copper finch]

Also if your app most based on puppeteer, this native download maybe adds more benefits

[formal cedar]

i see

[formal cedar]

Cool, why does that happen? Of course, the fewer images the better, right?

[formal cedar]

oh yeah, that's why PUPPETEER_SKIP_CHROMIUM_DOWNLOAD is true.

btw what container platform are you using? are you using OKD too? https://www.okd.io/

[copper finch]

Just bad docker files config when using same docker file development and release, goal was use development mode with hot reloads in docker container + mono repo microservices

[copper finch]

Fewer size or image count?

[formal cedar]

i mean, fewer image size

[copper finch]

First time hearing about OKD, for local development & build using latest docker desktop on mac m1 pro

[copper finch]

I think it's only takes more time for deployment, but in your case as you also say, better stay with native chromium, so i think all good with this image size

[formal cedar]

i see okay okay, thank you very much for the help, it works on my desktop docker, and I'm just waiting for the results if it works if it runs on OKD 😊🙌

btw I use pupppeter to create pdf

[copper finch]

Also i think "RUN DIRECTORY_PATH=./tmp ..." not required in your Docker file, because XDG uses different tmp path, I just copied mkdir ./tmp based on your Dockerfile