Introduction

Construire un service de capture d'écran fiable est plus difficile qu'il n'y paraît. Lorsque nous avons lancé SiteSnapshot, nous pensions que ce serait aussi simple que de lancer quelques instances de Puppeteer. Nous avions tort.

Le Défi

Le rendu des pages web modernes est gourmand en ressources.

• Fuites de mémoire dans les navigateurs headless.
• Gestion des délais d'attente (timeouts) et des processus zombies.
• Mise à l'échelle horizontale (scaling horizontal) sur plusieurs régions.

Dans cet article, nous plongerons dans la manière dont nous avons résolu ces problèmes.

Notre Architecture

Nous sommes passés d'un système monolithique basé sur Cron à un Modèle de Travailleurs Distribués (Distributed Worker Model).

// Exemple de consommation de notre file d'attente
async function processQueue(jobId) {
  const browser = await getBrowserInstance();
  try {
    const page = await browser.newPage();
    await page.goto(job.url);
    await page.screenshot({ path: job.path });
  } finally {
    await browser.close();
  }
}

Composants Clés

1. Queue Manager (Gestionnaire de file) : Distribue les tâches équitablement.
2. Worker Nodes (Nœuds de travail) : Conteneurs sans état (stateless) qui exécutent les scans.
3. Storage Layer (Couche de stockage) : Supabase pour les métadonnées, S3 pour les images.

Conclusion

En découplant le planificateur de la couche d'exécution, nous avons atteint une fiabilité de 99,9 %.

Vous voulez surveiller votre site visuellement ? Commencez gratuitement dès aujourd'hui.