How to Monitor Redom with Vigilmon

Redom fits in 2KB and gives you a simple, fast API for building DOM trees without a virtual DOM. That minimalism is its strength — but it doesn't give you visibility into your production environment. When your server goes down or your deploy breaks, you need an external monitor to catch it.

This tutorial covers:

• A /health endpoint for your Redom app's server
• An HTTP uptime monitor in Vigilmon
• A keyword monitor that confirms your app mounts and renders
• Slack or email alerts when something fails

Full setup takes about 15 minutes.

Step 1: Add a health endpoint to your server

Redom is purely client-side, so you need a server to host it. A minimal Express setup:

// server.js
import express from 'express';

const app = express();

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

app.use(express.static('dist'));

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

Test it locally:

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

For a deeper health check that tests any backend services your Redom app fetches from:

app.get('/health', async (req, res) => {
  const checks = {};
  let healthy = true;

  try {
    // e.g. ping the API your Redom components fetch
    const response = await fetch(process.env.API_URL + '/ping');
    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(),
  });
});

Returning 503 on failure means Vigilmon detects the outage without parsing the body.

Step 2: Set up an HTTP monitor in Vigilmon

Deploy your Redom app, 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 global regions. If /health returns anything other than 200 or times out, you get alerted immediately.

Step 3: Add a keyword monitor for the app page

Your health endpoint catches server-level failures. A keyword monitor catches client-side failures — broken bundles, CDN errors, or a misconfigured mount point that leaves Redom never rendering.

In Vigilmon:

1. Click New Monitor → Keyword
2. URL: https://yourapp.example.com/
3. Keyword: a static string in your HTML that's always present when Redom mounts (e.g. id="app" or your app's title tag)
4. Match type: Contains
5. Expected status: 200
6. Save

If a deploy breaks the Redom bundle but the server keeps running, only the keyword monitor catches it.

Step 4: Configure alerts

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

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 monitors

Email:

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

When your Redom app goes down:

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

When it recovers:

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

For production apps, enable both Slack (immediate notification) and email (audit trail).

Step 5: Heartbeat monitoring for data-fetching jobs

If your Redom app is backed by a scheduled data-fetch, cache-warm, or static generation job, HTTP monitoring won't catch a silent failure there. Use a Vigilmon heartbeat:

// scripts/fetch-data.js
async function fetchAndCache() {
  const data = await fetch(process.env.DATA_URL).then(r => r.json());

  // write data to a local cache your Redom app reads at boot
  await writeCache(data);

  const heartbeatUrl = process.env.VIGILMON_DATA_HEARTBEAT;
  if (heartbeatUrl) {
    await fetch(heartbeatUrl);
    console.log('Heartbeat sent');
  }
}

async function writeCache(data) {
  // your cache logic
}

fetchAndCache().catch((err) => {
  console.error('Data fetch failed:', err);
  process.exit(1);
});

In Vigilmon:

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

If the job misses an interval or throws, Vigilmon alerts you.

Step 6: Public status page

Go to Status Pages → New Status Page in Vigilmon, add your monitors, and publish. Include the link in your error handling or README:

App unavailable. Check our status: 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 | Express route at /health | | HTTP uptime check | Vigilmon HTTP monitor | | Render check | Vigilmon keyword monitor | | Slack/email alerts | Vigilmon notification channels | | Job monitoring | Heartbeat ping in data-fetch script | | Status page | Vigilmon public status page |

Redom is tiny by design. Your monitoring footprint is just as lean.

Next steps

• Add monitors for any REST endpoints your Redom app fetches data from
• Watch response time trends — Vigilmon charts latency over time, and gradual slowdowns often appear before a full outage
• Add a heartbeat for each background job that feeds your app's data layer

Get started free at vigilmon.online.