How to Monitor Superfine with Vigilmon

Superfine is one of the smallest React-like virtual DOM libraries available — a minimalist 1kB core that gives you JSX, hooks-style state, and diffing without the framework overhead. But a fast bundle means nothing when your app is unreachable, your API is silently failing, or your deployment pipeline broke without anyone noticing. Vigilmon adds the observability layer you need: continuous HTTP monitoring, heartbeat checks, and instant alerts routed to email or Slack.

What You'll Build

• A health API endpoint for your Superfine app's backend
• Vigilmon HTTP monitors for the SPA and its API
• A heartbeat for scheduled background tasks
• Alert channels (email and Slack)
• An uptime badge rendered with Superfine

Prerequisites

• A Superfine project (bundled with Parcel, esbuild, or Vite)
• A Node.js / Express backend serving your API
• A free Vigilmon account

Step 1: Add a Health Endpoint to Your Backend

Superfine apps are purely frontend — the backend is where health checks live. Add a /health route to your Express server:

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

const app = express();

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

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

  // Downstream API reachability
  try {
    const upstream = await fetch("https://api.example.com/ping", {
      signal: AbortSignal.timeout(3000),
    });
    checks.upstream = upstream.ok ? "ok" : `http_${upstream.status}`;
  } catch {
    checks.upstream = "unreachable";
    degraded = true;
  }

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

app.listen(process.env.PORT ?? 3000);

Test it locally:

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

Step 2: Configure Vigilmon HTTP Monitors

Log in to Vigilmon → Monitors → New Monitor:

Monitor 1: Superfine SPA

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

Monitor 2: Health API

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

These two monitors cover orthogonal failure modes: Monitor 1 catches CDN or static hosting outages; Monitor 2 catches backend or database failures.

Step 3: Heartbeat for Background Tasks

If your app syncs data, processes queues, or sends scheduled emails, use a Vigilmon heartbeat to detect silent failures:

// jobs/sync.js
const HEARTBEAT_URL = process.env.VIGILMON_HEARTBEAT_URL ?? "";

async function pingHeartbeat() {
  if (!HEARTBEAT_URL) return;
  try {
    await fetch(HEARTBEAT_URL, { signal: AbortSignal.timeout(5000) });
  } catch {
    // Monitoring must never crash the job
  }
}

export async function runDailySync() {
  try {
    await fetchAndStoreData();
    await pingHeartbeat(); // Only ping on success
  } catch (err) {
    console.error("[sync] Daily sync failed:", err);
    // Heartbeat won't be pinged — Vigilmon alerts after the grace window
  }
}

Set it up in Vigilmon:

1. Monitors → New Heartbeat Monitor
2. Set Expected interval to match your job schedule (e.g. 60 minutes for a hourly job)
3. Copy the ping URL to your environment:

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

Step 4: Display an Uptime Badge in Your Superfine App

Superfine uses hyperscript-style h() calls or JSX. Here is a status badge component in both styles:

Hyperscript style

// src/StatusBadge.js
import { h } from "superfine";

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

export function StatusBadge() {
  return h(
    "a",
    {
      href: STATUS_URL,
      target: "_blank",
      rel: "noopener noreferrer",
      "aria-label": "Service uptime status",
    },
    h("img", {
      src: BADGE_URL,
      alt: "Uptime",
      width: 120,
      height: 20,
    })
  );
}

JSX style (with a JSX transform configured)

// src/StatusBadge.jsx
/** @jsx h */
import { h } from "superfine";

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

export function StatusBadge() {
  return (
    <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>
  );
}

Add it to your root app render:

/** @jsx h */
import { h, patch } from "superfine";
import { StatusBadge } from "./StatusBadge";

function App() {
  return (
    <div>
      <main>{/* your app */}</main>
      <footer>
        <StatusBadge />
      </footer>
    </div>
  );
}

patch(document.getElementById("app"), <App />);

Step 5: Set Up Alert Channels

In Vigilmon's Alert Channels settings:

Email

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

Slack

1. Create a Slack Incoming Webhook for #alerts
2. Alert Channels → Webhook → paste the 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 the Setup

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

# 2. Force a failure — break the DB connection string, restart the server
# Expected: /health returns 503; Vigilmon alerts within 2 minutes

# 3. Stop the scheduled job without pinging the heartbeat
# Expected: alert fires after the heartbeat grace window

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

Summary

| Monitor | What It Catches | |---|---| | HTTP SPA check | CDN outages, broken static deployments | | HTTP health API | Database, upstream API, and backend failures | | Heartbeat | Silent job crashes, sync failures |

Next Steps

• Add separate Vigilmon monitors for staging vs. production
• Use response time graphs to correlate API latency with Superfine rendering performance
• Configure multi-channel alerting: email for low-severity, Slack for critical

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