DEV Community

Vigilmon
Vigilmon

Posted on

How to Monitor Your Astro.js Site with Vigilmon (Static, SSR, and Hybrid)

#astro #monitoring #webdev #uptime

Astro is increasingly the framework of choice for content-heavy sites and docs, but monitoring Astro apps requires understanding its rendering modes. A static Astro site (CDN-served) has different failure modes than a hybrid SSR Astro app with server islands. Here's how to monitor both.

Astro's Three Rendering Modes

Static (SSG): Built to HTML at build time, served from CDN

  • Can fail: CDN outage, DNS issue, SSL expiry, wrong build deployed

SSR (Server-rendered): Every request rendered on the server

  • Can fail: Server crash, memory leak, slow response, API failures

Hybrid: Mix of static pages and SSR routes (Astro's default since v3)

  • Can fail: Either of the above, depending on the route

Monitoring a Static Astro Site

Monitor 1: Homepage availability

  • URL: https://your-site.com
  • Type: HTTP
  • Expected status: 200
  • Keyword check: Your site's title or a unique string from the rendered HTML
  • Interval: 60 seconds, multi-region

Monitor 2: SSL certificate

  • Enable SSL monitoring in Vigilmon for your domain
  • Alert 14 days before expiry

This is enough for a pure static site — there's no server to crash.

Monitoring an SSR or Hybrid Astro Site

Create src/pages/api/health.ts:

import type { APIRoute } from 'astro'

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

This creates a route at /api/health that you can monitor with Vigilmon.

Monitoring Astro Server Islands

Astro's Server Islands let you embed dynamic server-rendered components in otherwise static pages. If a server island fails, the static page still loads — but the dynamic content shows nothing.

To detect server island failures:

  • URL: https://your-site.com/dashboard (page with server islands)
  • Keyword check: A string that's only present in the dynamic island output
  • If the keyword is missing, your server island is failing silently

Astro Build Health with Heartbeats

Add Vigilmon heartbeat monitoring to your CI pipeline:

# .github/workflows/deploy.yml
- name: Deploy to Cloudflare
  run: npx wrangler deploy

- name: Ping Vigilmon heartbeat
  run: curl -s https://vigilmon.online/api/heartbeat/YOUR_HEARTBEAT_ID
Enter fullscreen mode Exit fullscreen mode

If a deploy is skipped or fails silently, the heartbeat goes cold and Vigilmon alerts you.

Setting Up Vigilmon for Astro

  1. Create a free account at vigilmon.online
  2. For static sites: Add an HTTP monitor for your main URL with keyword check
  3. For SSR/hybrid: Add HTTP monitor targeting /api/health
  4. Enable multi-region checks to avoid false positives
  5. Set up a public status page for your users

Common Astro Failure Patterns

Failure How Vigilmon Detects It
CDN outage HTTP monitor reports non-200
Build deployed with broken HTML Keyword check fails
SSR server crash Health endpoint returns 500 or times out
SSL expiry SSL monitor alerts 14 days before
Server island failure Keyword missing from page content

Monitor your Astro.js site with Vigilmon for free →

Top comments (0)