Automate Website Monitoring with Screenshots

Why Visual Monitoring?

Traditional uptime monitoring checks if a server responds with HTTP 200. But your site can return 200 while showing a broken layout, missing images, or even a defacement. Visual monitoring catches what status codes miss.

By taking periodic screenshots and comparing them, you can detect:

Architecture Overview

Cron Job (every 15 min)
    |
    v
Screenshot API  -->  Save to S3/R2
    |
    v
Compare with previous screenshot (pixel diff)
    |
    v
If diff > threshold --> Send alert (Slack/Email/PagerDuty)

Step 1: Take Periodic Screenshots

Set up a cron job that captures your website every 15 minutes.

const SCREENSHOT_API = 'https://screenshotapi-api-production.up.railway.app';
const API_KEY = process.env.SCREENSHOT_API_KEY;

async function captureScreenshot(url) {
  const params = new URLSearchParams({
    url,
    width: '1280',
    height: '800',
    format: 'png',
    fullpage: 'false',
  });

  const response = await fetch(
    `${SCREENSHOT_API}/v1/screenshot?${params}`,
    { headers: { Authorization: `Bearer ${API_KEY}` } }
  );

  if (!response.ok) throw new Error(`Screenshot failed: ${response.status}`);
  return Buffer.from(await response.arrayBuffer());
}

// Run every 15 minutes via cron
async function monitor() {
  const sites = [
    'https://your-app.com',
    'https://your-app.com/pricing',
    'https://your-app.com/docs',
  ];

  for (const url of sites) {
    const screenshot = await captureScreenshot(url);
    await saveToStorage(url, screenshot);
    await compareWithPrevious(url, screenshot);
  }
}

Step 2: Compare Screenshots

Use a pixel comparison library like pixelmatch to detect visual changes.

const pixelmatch = require('pixelmatch');
const { PNG } = require('pngjs');

async function compareWithPrevious(url, currentBuffer) {
  const previousBuffer = await getPreviousScreenshot(url);
  if (!previousBuffer) return; // first run

  const current = PNG.sync.read(currentBuffer);
  const previous = PNG.sync.read(previousBuffer);

  const { width, height } = current;
  const diff = new PNG({ width, height });

  const mismatchedPixels = pixelmatch(
    previous.data, current.data, diff.data,
    width, height, { threshold: 0.1 }
  );

  const totalPixels = width * height;
  const diffPercentage = (mismatchedPixels / totalPixels) * 100;

  if (diffPercentage > 5) { // 5% threshold
    await sendAlert(url, diffPercentage, diff);
  }
}

Step 3: Send Alerts

async function sendAlert(url, diffPercentage, diffImage) {
  // Slack webhook
  await fetch(process.env.SLACK_WEBHOOK_URL, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      text: `Visual change detected on ${url}\n` +
            `Change: ${diffPercentage.toFixed(1)}% of pixels differ\n` +
            `Time: ${new Date().toISOString()}`,
    }),
  });
}

Advanced: Multi-Device Monitoring

Monitor how your site looks on different devices by using our device presets endpoint.

const devices = [
  { name: 'desktop', width: 1280, height: 800 },
  { name: 'tablet', width: 768, height: 1024 },
  { name: 'mobile', width: 375, height: 812 },
];

for (const device of devices) {
  const params = new URLSearchParams({
    url: 'https://your-app.com',
    width: device.width.toString(),
    height: device.height.toString(),
    format: 'png',
  });
  // ... capture and compare for each device
}

Cost Analysis

Best Practices