Vigilmon

Posted on Aug 3

How to Monitor Your Gatsby Site with Vigilmon

#gatsby #monitoring #jamstack #webdev

Gatsby sites are static — but they still go down. CDN outages, Netlify incidents, broken API routes. This guide shows how to monitor your Gatsby site with Vigilmon.

Why Gatsby Sites Need Monitoring

Static sites have failure points:

CDN/hosting outages (Netlify, Vercel, Cloudflare Pages)
API routes that break (Gatsby Functions)
Third-party API dependencies that go down

Vigilmon checks from multiple regions every 60 seconds. If it's down anywhere, you know immediately.

Step 1: Set Up Basic Uptime Monitoring

Go to vigilmon.online and create a monitor:

URL: your Gatsby site URL (e.g., https://yoursite.com)
Check interval: 1 minute
Multi-region: enabled

That's the baseline. Your site is monitored.

Step 2: Monitor Gatsby API Routes (Gatsby Functions)

Add a health endpoint:

// src/api/health.js
export default function handler(req, res) {
  res.json({
    status: 'ok',
    timestamp: Date.now(),
    site: process.env.GATSBY_SITE_URL || 'unknown'
  });
}

This creates an API route at /api/health. Add a Vigilmon monitor pointing to https://yoursite.com/api/health.

Step 3: Monitor CMS Connectivity

If your Gatsby site pulls from Contentful, Sanity, or Ghost, monitor the CMS connection:

// src/api/cms-health.js
export default async function handler(req, res) {
  try {
    const response = await fetch(
      `https://cdn.contentful.com/spaces/${process.env.CONTENTFUL_SPACE_ID}/environments/master/entries?limit=1`,
      { headers: { Authorization: `Bearer ${process.env.CONTENTFUL_ACCESS_TOKEN}` } }
    );

    if (!response.ok) throw new Error(`CMS returned ${response.status}`);
    res.json({ status: 'ok', cms: 'contentful' });
  } catch (error) {
    res.status(503).json({ status: 'error', message: error.message });
  }
}

Step 4: Heartbeat Monitoring for Scheduled Builds

If you trigger Gatsby rebuilds on a schedule:

#!/bin/bash
gatsby build

if [ $? -eq 0 ]; then
  curl -s "$VIGILMON_HEARTBEAT_URL" > /dev/null
  echo "Heartbeat sent"
else
  echo "Build failed — Vigilmon will alert"
  exit 1
fi

Create a heartbeat monitor with a 25-hour period for daily builds.

Step 5: Set Up a Status Page

Go to Vigilmon → Status Pages. Add your monitors and share the URL with users. When there's an incident, they can check it themselves.

Gatsby + Netlify Tips

What	URL to monitor
Main site	`https://yoursite.com`
Netlify Functions	`https://yoursite.com/.netlify/functions/health`

Summary

Create an uptime monitor for your Gatsby site's main URL
Add a /api/health Gatsby Function and monitor it
Add heartbeat monitoring if you have scheduled builds
Set up a status page for your users

Vigilmon — uptime monitoring for Gatsby, Next.js, Astro, and every static site. Free plan available.

DEV Community