Einführung

Der Aufbau eines zuverlässigen Screenshot-Services ist schwieriger, als es aussieht. Als wir mit SiteSnapshot begannen, dachten wir, es wäre so einfach wie das Starten einiger Puppeteer-Instanzen. Wir lagen falsch.

Die Herausforderung

Das Rendern moderner Webseiten ist ressourcenintensiv.

• Speicherlecks (Memory Leaks) in Headless-Browsern.
• Umgang mit Timeouts und Zombie-Prozessen.
• Horizontale Skalierung über mehrere Regionen hinweg.

In diesem Beitrag tauchen wir ein, wie wir diese Probleme gelöst haben.

Unsere Architektur

Wir sind von einem monolithischen Cron-basierten System zu einem Verteilten Worker-Modell übergegangen.

// Beispiel für unsere Worker-Warteschlangen-Verarbeitung
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();
  }
}

Schlüsselkomponenten

1. Queue Manager: Verteilt Aufgaben fair.
2. Worker Nodes: Zustandslose Container, die Scans ausführen.
3. Storage Layer: Supabase für Metadaten, S3 für Bilder.

Fazit

Durch die Entkopplung des Schedulers von der Ausführungsebene haben wir eine Zuverlässigkeit von 99,9% erreicht.

Möchten Sie Ihre Website visuell überwachen? Starten Sie noch heute kostenlos.