How to Monitor Cloudflare Pages Sites with Vigilmon

Cloudflare Pages is a fast, globally distributed static site and JAMstack hosting platform. But even Cloudflare's CDN can have outages, deployment failures, or edge configuration issues. This guide covers monitoring your Cloudflare Pages site with Vigilmon.

Why Cloudflare Pages Needs Monitoring

Cloudflare Pages hosts your site on Cloudflare's global edge network — but you still need external monitoring because:

• Deployment failures — a Pages deployment can break your site without Cloudflare alerting you
• Edge configuration errors — Custom Domains, Workers bindings, or Redirects can break specific routes
• DNS misconfigurations — your CNAME/A records can get misconfigured after domain changes
• Third-party API outages — if your Astro/Next.js site calls external APIs at the edge, those can fail
• SSL issues — Cloudflare issues certificates automatically, but renewals can occasionally fail

Setting Up Uptime Monitoring for Cloudflare Pages

Monitor Your Main Domain

1. Log in to vigilmon.online
2. Click Add Monitor → HTTP(S)
3. URL: https://yourdomain.com (not the .pages.dev URL)
4. Interval: 60 seconds
5. Enable SSL monitoring for your domain

Always monitor your custom domain, not the your-project.pages.dev URL. Users hit your custom domain — that's the failure surface you care about.

Monitor Critical Routes

For sites with important dynamic routes or API endpoints:

# Add individual monitors for:
https://yourdomain.com                    # Main page
https://yourdomain.com/api/health         # API endpoints
https://yourdomain.com/products           # Key content pages

Adding a Health Endpoint to Cloudflare Pages

For Astro, Next.js, or SvelteKit sites on Cloudflare Pages, add a health endpoint:

Astro

// src/pages/health.json.ts
import type { APIRoute } from 'astro';

export const GET: APIRoute = async () => {
  return new Response(
    JSON.stringify({
      status: 'ok',
      timestamp: new Date().toISOString(),
    }),
    {
      headers: { 'Content-Type': 'application/json' },
    }
  );
};

Next.js (on Pages)

// app/api/health/route.ts
export async function GET() {
  return Response.json({
    status: 'ok',
    edge: true,
    timestamp: new Date().toISOString(),
  });
}

SvelteKit

// src/routes/health/+server.ts
import type { RequestHandler } from './$types';

export const GET: RequestHandler = async () => {
  return new Response(JSON.stringify({ status: 'ok' }), {
    headers: { 'Content-Type': 'application/json' },
  });
};

Monitor /health or /health.json in Vigilmon — this tests your Pages Function routing, not just static file serving.

Monitoring Cloudflare Workers (Functions)

If you use Pages Functions (the built-in Workers runtime):

// functions/api/health.ts
export const onRequest: PagesFunction = async (context) => {
  // Optional: check KV, D1, or other bindings
  let dbStatus = 'ok';
  try {
    await context.env.MY_KV.get('health-check-key');
  } catch {
    dbStatus = 'error';
  }

  const status = dbStatus === 'ok' ? 200 : 503;
  return new Response(
    JSON.stringify({ status: dbStatus === 'ok' ? 'ok' : 'degraded', kv: dbStatus }),
    { status, headers: { 'Content-Type': 'application/json' } }
  );
};

This health function tests:

• Pages Functions runtime is working
• KV Namespace bindings are functional
• The Worker is executing without errors

Monitoring D1 Database Connectivity

If your Pages site uses Cloudflare D1:

// functions/api/health.ts
export const onRequest: PagesFunction<{ DB: D1Database }> = async (context) => {
  try {
    const result = await context.env.DB.prepare('SELECT 1 as alive').first();
    return Response.json({ status: 'ok', db: result?.alive === 1 ? 'connected' : 'error' });
  } catch (e) {
    return new Response(
      JSON.stringify({ status: 'error', db: 'disconnected' }),
      { status: 503, headers: { 'Content-Type': 'application/json' } }
    );
  }
};

SSL Monitoring for Cloudflare Pages

Cloudflare manages SSL for Pages sites automatically, but:

• Universal SSL certificates renew automatically, but edge certificate errors can occur
• Custom certificates you've uploaded need manual renewal tracking

In Vigilmon:

1. Add an SSL Monitor for your custom domain
2. Set alert: 14 days before expiry
3. This catches any certificate delivery issues before users see browser errors

Status Page for Your Cloudflare Pages Project

1. In Vigilmon, create a Status Page
2. Add monitors: main site, API endpoints, critical routes
3. Publish at status.yourdomain.com
4. Point status.yourdomain.com CNAME to Vigilmon's status page host

Deployment Failure Detection

Cloudflare Pages doesn't notify you on deployment failure by default (unless you configure GitHub Actions alerts). Set up a post-deployment health check:

# .github/workflows/deploy-check.yml
name: Post-Deployment Health Check
on:
  deployment_status:
jobs:
  verify:
    if: github.event.deployment_status.state == 'success'
    runs-on: ubuntu-latest
    steps:
      - name: Wait for propagation
        run: sleep 30
      - name: Health check
        run: |
          STATUS=$(curl -s -o /dev/null -w "%{http_code}" https://yourdomain.com/health)
          if [ "$STATUS" != "200" ]; then
            echo "Health check failed: $STATUS"
            exit 1
          fi

Vigilmon will also catch any deployment-induced regressions within 60 seconds of your next probe.

Summary

Even on Cloudflare's reliable global network, you need external monitoring:

1. HTTP monitor on your custom domain (not .pages.dev)
2. Health endpoint that tests Functions and bindings
3. SSL certificate monitor for your custom domain
4. Status page for user communication
5. Post-deployment GitHub Action to catch regressions immediately

---

Vigilmon — uptime monitoring for Cloudflare Pages and Jamstack applications.