Website Monitoring and Change Detection with Screenshots

Visual Website Monitoring

Traditional uptime monitoring checks if a page returns HTTP 200. But a page can return 200 while showing a broken layout, error message, or completely wrong content. Visual monitoring catches what HTTP checks miss.

Periodic Screenshot Capture

Capture screenshots at regular intervals and compare against a baseline to detect visual changes:

// Run every 15 minutes via cron
async function monitorPage(url, baselineHash) {
  const res = await fetch(
    `https://apisnap.dev/api/screenshot?url=${encodeURIComponent(url)}&width=1280&height=800`,
    { headers: { Authorization: `Bearer ${process.env.SNAPAPI_KEY}` } }
  );

  const buffer = Buffer.from(await res.arrayBuffer());
  const hash = crypto.createHash('sha256').update(buffer).digest('hex');

  if (hash !== baselineHash) {
    console.log(`Change detected on ${url}`);
    // Send alert via Slack, email, PagerDuty, etc.
    await sendAlert(url, buffer);
    return hash; // New baseline
  }
  return baselineHash;
}

Change Detection Methods

Simple hash comparison detects any change. For more nuanced detection, use pixel-level comparison with a threshold to ignore minor rendering differences (anti-aliasing, ad rotations). Set thresholds between 0.5-2% for most pages.

Monitoring Dashboard

Build a dashboard showing the latest screenshot for each monitored page alongside its previous version. Store historical screenshots to track changes over time. This creates a visual audit trail of your website's appearance.

Alert Integration

Send alerts when visual changes exceed your threshold. Include the screenshot diff in the alert so your team can immediately see what changed without visiting the site.