Introducción

Construir un servicio de capturas de pantalla confiable es más difícil de lo que parece. Cuando comenzamos SiteSnapshot, pensamos que sería tan simple como iniciar algunas instancias de Puppeteer. Estábamos equivocados.

El Desafío

Renderizar páginas web modernas requiere muchos recursos.

• Fugas de memoria en navegadores headless.
• Manejo de tiempos de espera y procesos zombies.
• Escalado horizontal a través de múltiples regiones.

En esta publicación, profundizaremos en cómo resolvimos estos problemas.

Nuestra Arquitectura

Pasamos de un sistema monolítico basado en Cron a un Modelo de Trabajadores Distribuidos.

// Ejemplo de consumo de nuestra cola de trabajadores
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();
  }
}

Componentes Clave

1. Queue Manager (Gestor de Colas): Distribuye los trabajos de manera justa.
2. Worker Nodes (Nodos Trabajadores): Contenedores sin estado que ejecutan los escaneos.
3. Storage Layer (Capa de Almacenamiento): Supabase para metadatos, S3 para imágenes.

Conclusión

Al desacoplar el programador de la capa de ejecución, logramos una confiabilidad del 99.9%.

¿Desea monitorear su sitio visualmente? Comience gratis hoy.