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 from your CDN
• API errors shown to users — "Internal Server Error" rendered in the page body
• Third-party widget failures — Chat widgets, analytics scripts, or embeds breaking the layout
• Content changes — Detect unauthorized modifications or defacements

Building a Screenshot Monitor

Architecture

Set up a scheduled job (cron, Cloudflare Workers cron trigger, or AWS EventBridge) 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 with PxShot

// Cloudflare Worker cron trigger
export default {
  async scheduled(controller, env) {
    const urls = ['https://yoursite.com', 'https://yoursite.com/pricing'];

    for (const url of urls) {
      const res = await fetch(
        `https://pxshot.dev/api/capture?url=${encodeURIComponent(url)}&width=1280&height=800&format=webp&quality=80&key=${env.PXSHOT_KEY}`
      );

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

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

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

      // Store current as the new baseline
      await env.R2.put(`monitor/${hash(url)}.webp`, currentScreenshot);
    }
  }
};

Alert Channels

Send alerts where your team will actually see them:

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

Monitoring Frequency

Balance thoroughness with API costs:

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

PxShot's edge-based architecture means fast captures from Cloudflare's global network. Start monitoring for free.