How to Monitor Readymade with Vigilmon

Readymade is a decorator-based library for building native web components with a TypeScript-first design. It lets you write expressive, type-safe components without a heavy framework — but well-typed components don't protect you from downtime. You still need an external monitor watching your production URL around the clock.

This tutorial walks through:

• A /health endpoint in your Readymade-backed server
• An HTTP uptime monitor in Vigilmon
• A keyword monitor that confirms your components are rendering
• Slack or email alerts when anything goes wrong

The full setup takes about 15 minutes.

Step 1: Add a health endpoint to your server

Readymade components are served from a standard web server. Add a /health route using Express or whichever server you're using:

// server.ts
import express from 'express';
import path from 'path';

const app = express();

app.use(express.static(path.join(__dirname, 'dist')));

app.get('/health', (_req, res) => {
  res.json({
    status: 'ok',
    service: 'readymade-app',
    timestamp: new Date().toISOString(),
  });
});

app.listen(3000, () => console.log('Server running on port 3000'));

For a deeper check that validates your dependencies:

app.get('/health', async (_req, res) => {
  const checks: Record<string, string> = {};
  let healthy = true;

  try {
    // Example: check an external API or database
    const response = await fetch(process.env.API_BASE_URL + '/ping', {
      signal: AbortSignal.timeout(3000),
    });
    checks.api = response.ok ? 'ok' : 'error';
    if (!response.ok) healthy = false;
  } catch {
    checks.api = 'error';
    healthy = false;
  }

  res.status(healthy ? 200 : 503).json({
    status: healthy ? 'ok' : 'degraded',
    checks,
    timestamp: new Date().toISOString(),
  });
});

A 503 on failure means Vigilmon immediately detects the outage without needing a body check.

Verify locally:

npx ts-node server.ts
curl http://localhost:3000/health
# {"status":"ok","service":"readymade-app","timestamp":"..."}

Step 2: Set up an HTTP monitor in Vigilmon

Deploy your app (Netlify, Vercel, a VPS, etc.) then connect it 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 regions. If your /health route returns anything other than 200 — or times out — you get alerted immediately.

Step 3: Add a keyword monitor for component rendering

Your health endpoint confirms the server is responding. A keyword monitor confirms that your Readymade components are actually present in the HTML — catching cases where a broken build ships the server but not the component scripts.

In Vigilmon:

1. Click New Monitor → Keyword
2. URL: https://yourapp.example.com/
3. Keyword: a string guaranteed to appear in a healthy render — your app title, a decorator-registered custom element tag, or a nav label
4. Match type: Contains
5. Expected status: 200
6. Save

If a TypeScript compilation error or bad deploy drops your component bundle, only the keyword monitor catches it.

Step 4: Configure alerts

Go to Notifications → New Channel in Vigilmon and pick your channel type:

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 monitors

Email:

1. Add your email address as a notification channel
2. Enable it on the monitors you want coverage for

When your app goes down, the alert lands within the check interval:

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

When it recovers:

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

For critical apps, enable both Slack (immediate) and email (paper trail).

Step 5: Heartbeat monitoring for build and CI jobs

If you run scheduled tasks — TypeScript compilation, asset bundling, content sync — HTTP monitoring won't catch a silent failure there.

Add a heartbeat ping at the end of each successful job:

// scripts/build.ts
import { execSync } from 'child_process';

async function build(): Promise<void> {
  execSync('tsc && rollup -c', { stdio: 'inherit' });

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

build().catch((err) => {
  console.error('Build failed:', err);
  process.exit(1);
});

In Vigilmon, create a Heartbeat Monitor:

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

If the build stops running or throws, Vigilmon alerts you after one missed interval.

Step 6: Public status page

Go to Status Pages → New Status Page in Vigilmon, add your monitors, and publish. Drop the URL in your README or on error pages:

Service unavailable. Check our status page: https://status.yourapp.example.com

Each monitor also generates a live badge:

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

What you've built

| What | How | |------|-----| | Health endpoint | /health route in Express server | | HTTP uptime check | Vigilmon HTTP monitor | | Component rendering check | Vigilmon keyword monitor on home page | | Slack/email alerts | Vigilmon notification channels | | Build job monitoring | Heartbeat ping in build scripts | | Status page | Vigilmon public status page |

Readymade gives you type-safe, decorator-driven web components. Vigilmon gives you visibility when those components stop reaching users.

Next steps

• Add monitors for API endpoints your components call at runtime
• Watch response time trends — Vigilmon charts latency over time, and gradual slowdowns are often visible before a full outage
• Add a heartbeat for every scheduled build or deployment job

Get started free at vigilmon.online.