How to Monitor Hyperscript with Vigilmon

Hyperscript is a concise JavaScript DSL for creating HyperText — an alternative to JSX or raw HTML templates that lets you construct DOM elements with a fluent, readable API (h("div", { class: "app" }, [...children])). It pairs naturally with server-rendered HTML and progressive enhancement workflows. But no matter how clean your view layer is, your app can silently break when the server goes down, a background job stalls, or a third-party integration returns errors. Vigilmon monitors your app's uptime and alerts you the moment something goes wrong. This tutorial shows you how to integrate it.

What You'll Build

• A health endpoint for your Hyperscript app's server
• Vigilmon HTTP monitors for your app URL and health API
• A heartbeat for background tasks and scheduled jobs
• Email and Slack alerts when your app goes down
• A status badge created with Hyperscript in your footer

Prerequisites

• A Node.js app using Hyperscript (hyperscript npm package) for DOM creation
• A free Vigilmon account

Step 1: Add a Health Endpoint

Add a /health route to the server that powers your Hyperscript app:

npm install express

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

const app = express();
const PORT = process.env.HEALTH_PORT ?? 3001;

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

  // Check your primary API or database
  try {
    const response = await fetch(process.env.API_URL + "/ping", {
      signal: AbortSignal.timeout(3000),
    });
    checks.api = response.ok ? "ok" : `http_${response.status}`;
    if (!response.ok) degraded = true;
  } catch (err) {
    checks.api = `error: ${err.message}`;
    degraded = true;
  }

  // Check any external services
  try {
    const res = await fetch(process.env.EXTERNAL_API_URL, {
      method: "HEAD",
      signal: AbortSignal.timeout(3000),
    });
    checks.externalApi = res.status < 500 ? "ok" : `http_${res.status}`;
  } catch {
    checks.externalApi = "unreachable";
  }

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

app.listen(PORT, () => {
  console.log(`[health] Listening on :${PORT}`);
});

Test it:

curl http://localhost:3001/health | jq .
# {"status":"ok","timestamp":"2026-07-03T...","checks":{"api":"ok","externalApi":"ok"}}

Step 2: Set Up Vigilmon HTTP Monitors

Log in to Vigilmon and create two monitors.

Monitor 1: App URL

| Field | Value | |---|---| | URL | https://yourapp.com/ | | Method | GET | | Expected status | 200 | | Expected body | A stable string from your page (e.g. <title>) | | Check interval | 1 minute |

This detects server crashes, broken deployments, and CDN failures that prevent your Hyperscript-driven UI from loading.

Monitor 2: Health API

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

Step 3: Heartbeat for Background Jobs

Apps using Hyperscript for progressive enhancement often run background jobs — polling for data, processing queued events, or syncing state with an external service. Wire them to a Vigilmon heartbeat so silent failures get caught:

npm install node-cron

// background-jobs.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 crash the job runner on a monitoring failure
  }
}

async function pollAndSync() {
  console.log("[jobs] Polling external data source...");
  // Fetch updates and sync to your app's state
  console.log("[jobs] Sync complete");
}

cron.schedule("*/15 * * * *", async () => {
  try {
    await pollAndSync();
    await pingHeartbeat(); // Only ping on success
  } catch (err) {
    console.error("[jobs] Poll failed:", err);
    // Vigilmon will alert when the heartbeat window lapses
  }
});

In Vigilmon:

1. Monitors → New Heartbeat Monitor
2. Set the interval to 30 minutes (2× the cron period as grace)
3. Copy the ping URL to your .env:

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

Step 4: Create a Status Badge with Hyperscript

Hyperscript's h() function makes building a status badge element straightforward:

// components/status-badge.js
const h = require("hyperscript");

function statusBadge() {
  const BADGE_URL = "https://vigilmon.online/api/badge/your-monitor-id.svg";
  const MONITOR_URL = "https://vigilmon.online/status/your-monitor-slug";

  return h(
    "a",
    {
      href: MONITOR_URL,
      target: "_blank",
      rel: "noopener noreferrer",
      "aria-label": "Service status",
    },
    h("img", {
      src: BADGE_URL,
      alt: "Uptime status",
      width: "120",
      height: "20",
      loading: "lazy",
    })
  );
}

module.exports = statusBadge;

Mount it in your app's footer:

// main.js
const h = require("hyperscript");
const statusBadge = require("./components/status-badge");

function renderFooter() {
  return h("footer", { class: "app-footer" }, [
    h("p", "© 2026 Your App"),
    statusBadge(),
  ]);
}

// Mount when DOM is ready
document.addEventListener("DOMContentLoaded", () => {
  document.body.appendChild(renderFooter());
});

Because Hyperscript returns real DOM nodes, the badge composes cleanly with any other DOM manipulation approach in your stack — no framework adapter needed.

Step 5: Configure Alert Channels

In Vigilmon's Alert Channels settings:

Email Alerts

1. Alert Channels → Email → enter your ops email
2. Attach to both HTTP monitors and the heartbeat

Slack Webhook

1. Create a Slack Incoming Webhook for #ops-alerts
2. Alert Channels → Webhook → paste the webhook URL
3. Payload template:

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

Step 6: Test End-to-End

# 1. Verify the health endpoint
curl -s https://yourapp.com/health | jq .

# 2. Simulate a server failure: point the HTTP monitor at a broken URL
# Expected: Vigilmon alerts within 2 minutes

# 3. Clear VIGILMON_HEARTBEAT_URL and let the cron job run
# Expected: heartbeat alert fires after the grace window

# 4. Vigilmon → Test Alert → confirm email and Slack delivery

Summary

| Monitor | What It Catches | |---|---| | HTTP app check | Server crashes, deployment failures, CDN outages | | HTTP health API | API and external service failures | | Heartbeat | Silent background job failures, stalled pollers |

Next Steps

• Add monitors for staging and production as separate Vigilmon monitors
• Use Vigilmon's response time graphs to spot latency regressions after deploys
• Set up on-call escalation so critical alerts reach you day or night

Monitor your Hyperscript app with Vigilmon in minutes. Sign up free — no credit card required.