How to Monitor Waku with Vigilmon

Waku is a minimal React framework with first-class React Server Components (RSC) support — lightweight, opinionated, and built for the modern React model. When you deploy a Waku app, you get a Node.js server streaming RSC payloads, and that server can go down just like any other.

This tutorial walks through:

• A /health endpoint in your Waku application
• An HTTP uptime monitor in Vigilmon
• A keyword monitor that confirms your RSC pages are rendering
• Heartbeat monitoring for background jobs
• Slack or email alerts when anything breaks

Setup takes about 15 minutes.

Step 1: Add a health endpoint to your Waku app

Waku supports custom server middleware. Add a health route using Waku's middleware API or by extending the underlying Node.js server:

// src/middleware/health.ts
import type { Middleware } from 'waku/config';

export const healthMiddleware: Middleware = () => async (ctx, next) => {
  if (ctx.req.url === '/health') {
    ctx.res.status = 200;
    ctx.res.headers['content-type'] = 'application/json';
    ctx.res.body = JSON.stringify({
      status: 'ok',
      service: 'waku-app',
      timestamp: new Date().toISOString(),
    });
    return;
  }
  return next();
};

Register the middleware in your Waku config:

// waku.config.ts
import { defineConfig } from 'waku/config';
import { healthMiddleware } from './src/middleware/health';

export default defineConfig({
  middleware: [healthMiddleware],
});

For a deeper check that tests database connectivity:

// src/middleware/health.ts
import type { Middleware } from 'waku/config';
import { db } from '../lib/db';

export const healthMiddleware: Middleware = () => async (ctx, next) => {
  if (ctx.req.url === '/health') {
    const checks: Record<string, string> = {};
    let healthy = true;

    try {
      await db.execute('SELECT 1');
      checks.database = 'ok';
    } catch {
      checks.database = 'error';
      healthy = false;
    }

    ctx.res.status = healthy ? 200 : 503;
    ctx.res.headers['content-type'] = 'application/json';
    ctx.res.body = JSON.stringify({
      status: healthy ? 'ok' : 'degraded',
      checks,
      timestamp: new Date().toISOString(),
    });
    return;
  }
  return next();
};

Test it locally:

npm run dev
curl http://localhost:3000/health
# {"status":"ok","service":"waku-app","timestamp":"..."}

A 503 on failure ensures Vigilmon detects the outage without needing body parsing.

Step 2: Set up an HTTP monitor in Vigilmon

Deploy your Waku app (Node.js server, Docker container, or a platform like Railway or Render), then connect to Vigilmon:

1. Sign up at vigilmon.online — free, no card required
2. Click New Monitor → HTTP
3. URL: https://yourapp.example.com/health
4. Check interval: 1 minute (paid) or 5 minutes (free)
5. Expected status: 200
6. Save

Vigilmon probes from multiple global regions. If your Waku server goes down or RSC streaming breaks, you're alerted immediately.

Step 3: Add a keyword monitor for RSC page rendering

Waku renders pages via React Server Components — the server streams RSC payloads that hydrate on the client. A keyword monitor verifies that your pages are actually delivering rendered HTML content, catching broken deploys where the server starts but the RSC pipeline fails:

// src/pages/index.tsx
export default async function HomePage() {
  return (
    <main>
      <h1>Welcome to My Waku App</h1>
      <p>Built with React Server Components.</p>
    </main>
  );
}

In Vigilmon:

1. Click New Monitor → Keyword
2. URL: https://yourapp.example.com/
3. Keyword: Welcome to My Waku App (or any static string in your home page)
4. Match type: Contains
5. Expected status: 200
6. Save

This catches RSC rendering failures that leave the server healthy but pages empty or broken.

Step 4: Configure alerts

Go to Notifications → New Channel in Vigilmon:

Slack:

1. Create an incoming webhook at api.slack.com/apps
2. Paste the URL into Vigilmon's Slack channel config
3. Enable it on both your HTTP and keyword monitors

Email:

1. Add your email as a notification channel
2. Enable on both monitors

Down alert:

🔴 DOWN: yourapp.example.com/health
Status: 503
Region: EU-West
2 minutes ago

Recovery:

✅ RECOVERED: yourapp.example.com/health
Downtime: 5 minutes

Step 5: Heartbeat monitoring for background jobs

Waku apps often run data-fetching jobs or revalidation tasks alongside the RSC server. Monitor those with heartbeats:

// src/jobs/revalidate.ts
import { revalidatePage } from 'waku/server';

export async function runRevalidation() {
  await revalidatePage('/products');
  await revalidatePage('/blog');

  const heartbeatUrl = process.env.VIGILMON_HEARTBEAT_URL;
  if (heartbeatUrl) {
    await fetch(heartbeatUrl);
  }
}

Or in a standalone cron script:

// cron/daily-revalidate.ts
import { runRevalidation } from '../src/jobs/revalidate';

await runRevalidation().catch(console.error);

# Deploy platform cron (e.g., Railway cron job)
command: npx tsx cron/daily-revalidate.ts
schedule: "0 2 * * *"

In Vigilmon:

1. Click New Monitor → Heartbeat
2. Set the expected interval to match your job schedule
3. Copy the ping URL
4. Set VIGILMON_HEARTBEAT_URL=<url> in your environment

If the revalidation job silently stops running, you'll know within one missed interval.

Step 6: Public status page

Give users and your team visibility into your Waku app's health:

1. Go to Status Pages → New Status Page in Vigilmon
2. Add your HTTP monitor, keyword monitor, and any heartbeats
3. Publish and link from your app's footer or error pages

Status page link on error screens:

// src/pages/_error.tsx
export default function ErrorPage() {
  return (
    <div>
      <h1>Something went wrong</h1>
      <p>
        Check our{' '}
        <a href="https://status.yourapp.example.com">status page</a> for
        ongoing issues.
      </p>
    </div>
  );
}

Badge for your README:

![App Status](https://vigilmon.online/badge/your-monitor-slug)

What you've built

| What | How | |------|-----| | Health endpoint | Waku middleware at /health | | HTTP uptime check | Vigilmon HTTP monitor | | RSC rendering check | Vigilmon keyword monitor | | Background job monitoring | Heartbeat ping on completion | | Slack/email alerts | Vigilmon notification channels | | Status page | Vigilmon public status page |

Waku brings a minimal, modern RSC framework to your stack. Vigilmon ensures you know the moment it has a problem.

Next steps

• Add keyword monitors for each critical RSC page (product pages, checkout, dashboards)
• Track response time trends — RSC streaming latency affects Time to First Byte for every user
• Add a heartbeat for any ISR or cache revalidation scheduled task

Get started free at vigilmon.online.