How to Monitor Hyperhtml with Vigilmon

HyperHTML is a fast, zero-dependency DOM renderer that uses native template literals to update only the parts of the DOM that actually change. It's a lightweight alternative to virtual DOM frameworks — ideal for high-performance web apps that prioritize bundle size and raw speed. But fast rendering doesn't protect you from server failures, deployment errors, or silent background job crashes. Vigilmon provides continuous HTTP monitoring, heartbeat checks, and alert delivery so you detect failures the moment they occur — not when users start filing tickets.

What You'll Build

• A /health endpoint for your hyperHTML Node.js backend
• Vigilmon HTTP monitors for your app and API
• A heartbeat monitor for background jobs
• Alert channels (email and Slack)
• An uptime badge rendered in your hyperHTML UI

Prerequisites

• A Node.js project using hyperHTML (with Express or a plain HTTP server)
• A free Vigilmon account

Step 1: Add a Health Endpoint

HyperHTML performs client-side DOM rendering, but your Node.js server needs a /health route that Vigilmon can probe at regular intervals:

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

const app = express();

app.get("/health", async (req, res) => {
  const checks = {};
  let degraded = false;

  // Database connectivity check
  try {
    // await db.query("SELECT 1");
    checks.database = "ok";
  } catch (err) {
    checks.database = `error: ${err.message}`;
    degraded = true;
  }

  // Cache check (e.g. Redis)
  try {
    // await redisClient.ping();
    checks.cache = "ok";
  } catch (err) {
    checks.cache = `error: ${err.message}`;
    degraded = true;
  }

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

// Serve your hyperHTML app's static files
app.use(express.static("public"));

app.listen(process.env.PORT ?? 3000, () => {
  console.log("Server running on port", process.env.PORT ?? 3000);
});

Test it locally:

curl http://localhost:3000/health | jq .
# {"status":"ok","timestamp":"2026-07-03T...","checks":{"database":"ok","cache":"ok"}}

Step 2: Configure Vigilmon HTTP Monitors

Log in to Vigilmon → Monitors → New Monitor:

Monitor 1: HyperHTML App (Frontend)

| Field | Value | |---|---| | URL | https://yourapp.com/ | | Method | GET | | Expected status | 200 | | Expected body | A stable string from your HTML shell | | Check interval | 1 minute |

Monitor 2: Health API

| Field | Value | |---|---| | URL | https://yourapp.com/health | | Method | GET | | Expected status | 200 | | Expected body | "status":"ok" | | Check interval | 1 minute |

Running two separate monitors means a CDN misconfiguration (frontend unreachable, API healthy) is distinct from a database failure (API degraded, frontend still cached by the CDN).

Step 3: Heartbeat for Background Tasks

HyperHTML apps often consume data produced by background processes — API polling, token refresh, or cache warming. A Vigilmon heartbeat monitor alerts you when these jobs stop executing silently:

// background.js
import cron from "node-cron";

const VIGILMON_HEARTBEAT_URL = process.env.VIGILMON_HEARTBEAT_URL ?? "";

async function pingHeartbeat() {
  if (!VIGILMON_HEARTBEAT_URL) return;
  try {
    await fetch(VIGILMON_HEARTBEAT_URL, { signal: AbortSignal.timeout(5000) });
  } catch {
    // Never let heartbeat failures crash the background job
  }
}

// Run every 15 minutes
cron.schedule("*/15 * * * *", async () => {
  try {
    await syncRemoteData();
    await pingHeartbeat(); // Only ping after successful execution
  } catch (err) {
    console.error("[background] Data sync failed:", err);
    // No ping → Vigilmon alerts after the grace window elapses
  }
});

async function syncRemoteData() {
  // Fetch and cache the data consumed by your hyperHTML UI
}

Set up the heartbeat in Vigilmon:

1. Monitors → New Heartbeat Monitor
2. Set Expected interval to 30 minutes (2× the cron interval)
3. Add the ping URL to your environment:

VIGILMON_HEARTBEAT_URL=https://vigilmon.online/api/heartbeat/xxxxxxxx

Step 4: Embed an Uptime Badge in Your HyperHTML UI

HyperHTML's hyper.wire or html tagged template functions make it straightforward to include a live Vigilmon status badge:

// app.js (client-side with hyperHTML)
import hyperHTML from "hyperhtml/esm";

const BADGE_URL = "https://vigilmon.online/api/badge/your-monitor-id.svg";
const STATUS_URL = "https://vigilmon.online/status/your-monitor-slug";

const render = hyperHTML.bind(document.getElementById("app"));

function update(data) {
  render`
    <div class="app">
      <main>${renderContent(data)}</main>
      <footer class="footer">
        <a
          href="${STATUS_URL}"
          target="_blank"
          rel="noopener noreferrer"
          aria-label="Service uptime status"
        >
          <img src="${BADGE_URL}" alt="Uptime" width="120" height="20" />
        </a>
      </footer>
    </div>
  `;
}

function renderContent(data) {
  return hyperHTML.wire(data)`<p>${data.message}</p>`;
}

update({ message: "Your app content here." });

Because hyperHTML only patches the DOM nodes that change between renders, the badge element is created once and left untouched on subsequent updates.

Step 5: Set Up Alert Channels

In Vigilmon's Alert Channels settings:

Email Alerts

1. Alert Channels → Email → add your on-call address
2. Attach the channel to both HTTP monitors and the heartbeat monitor

Slack Alerts

1. Create a Slack Incoming Webhook for your #alerts channel
2. Alert Channels → Webhook → paste the Slack webhook URL
3. Use this payload template:

{
  "text": "🚨 *{{ monitor.name }}* is DOWN\n{{ monitor.url }}\nStatus: {{ event.status }}\n<https://vigilmon.online|Open Vigilmon>"
}

Step 6: Verify Everything Works

# 1. Confirm health endpoint returns 200
curl -s https://yourapp.com/health | jq .status

# 2. Simulate a failure — break your DB connection string and redeploy
# Expected: health endpoint returns 503; Vigilmon alerts within ~2 minutes

# 3. Remove the heartbeat URL and let the scheduler run one cycle
# Expected: heartbeat alert fires after the grace window expires

# 4. In Vigilmon → "Test Alert" to confirm Slack/email delivery

Summary

| Monitor | What It Catches | |---|---| | HTTP app check | CDN failures, broken static file serving | | HTTP health API | Database, cache, and external dependency failures | | Heartbeat | Scheduler crashes, silent data refresh failures |

Next Steps

• Configure separate Vigilmon projects for staging and production
• Use Vigilmon's response time graphs to detect latency regressions as your hyperHTML component tree scales
• Set up escalating alerts: email for recoveries, Slack for active outages

Ready to get started? Sign up for Vigilmon free — have your first monitor running in under 5 minutes.