Introduction

This a walk-through the way I implemented an system to get screenshots with 🔗Puppeteer (more specifically Puppeteer-core) for my leetcode stats card project, which links are:

• 🔗GitHub
• 🔗Website

As in this project (🔗LeetCodeStatsCard) i want people to share their own 🔗leetcode.com stats online though an image. To handle this I needed an way to generate an image through HTML, more precisely a 🔗react component as I already had a component for the card, and i only needed an efficient way to generate the image.

Requirements & Constraints

• Environment: A VPS with Dockerized services.

• Library choice: 🔗puppeteer-core instead of full Puppeteer (lighter, lets me control which Chromium build I install).

• Output: High-quality PNG/JPEG screenshots.

• Constraints:

  • Must run in headless mode.

  • Must not consume too much CPU/memory (since it runs alongside other containers).

Problem

Thus, there are another alternatives that i could do to approach the feature i wanted to add, i choose this one not because

Whtas was the problem i was encoutering?

I use an VPS to send to production my projects (being all contanerized), so an error was consistently appearing, one that