Website Monitoring with Automated Screenshots: Catch Downtime Visually

Traditional uptime monitoring checks if your server returns a 200 status code. But a 200 response doesn't mean your site looks right. Automated screenshot monitoring catches the issues that HTTP checks miss — broken layouts, missing images, error messages rendered in a 200 page, and even defacements.

What Screenshot Monitoring Catches

• Broken CSS/JS — The page loads but looks completely wrong
• CDN failures — Images and fonts fail to load
• API errors shown to users — "Internal Server Error" rendered in the page body
• Third-party widget failures — Chat widgets or embeds breaking the layout
• Content changes — Detect unauthorized modifications or defacements

Building a Screenshot Monitor

Set up a scheduled job that:

1. Captures a screenshot of each monitored URL
2. Compares it to the last known-good screenshot
3. Alerts if the visual difference exceeds a threshold

Implementation

async function monitorUrl(url: string) {
  const res = await fetch(
    `https://pxshot.dev/api/capture?url=${encodeURIComponent(url)}&width=1280&height=800&format=webp&quality=80&api_key=${API_KEY}`
  );

  if (!res.ok) {
    await sendAlert(`Screenshot capture failed for ${url}`);
    return;
  }

  const current = await res.arrayBuffer();
  const previous = await storage.get(`monitor/${hash(url)}.webp`);

  if (previous) {
    const diff = await compareImages(previous, current);
    if (diff > 0.15) {
      await sendAlert(`Visual change detected on ${url}: ${(diff * 100).toFixed(1)}%`);
    }
  }

  await storage.put(`monitor/${hash(url)}.webp`, current);
}

Alert Channels

• Slack webhook — Post before/after screenshots in a channel
• Email — With the diff image attached
• PagerDuty — For critical production pages

Monitoring Frequency

• Critical pages (homepage, checkout) — Every 5–15 minutes
• Important pages (pricing, docs) — Every hour
• Less critical pages (blog, about) — Every 6–24 hours

Start monitoring for free with PxShot's free tier.