How to Monitor Nanomorph with Vigilmon

Nanomorph is a tiny DOM diffing library that efficiently morphs one DOM tree into another with minimal changes. It compares two DOM nodes and surgically applies only the differences — making it a popular choice for apps that need fast, framework-free UI updates. But when Nanomorph-powered views silently fail to update, or your server feeding those views goes down, you won't know unless you're watching. Vigilmon catches those failures before your users do. This tutorial shows you how.

What You'll Build

• A health endpoint for the server powering your Nanomorph app
• Vigilmon HTTP monitors for your app URL and health API
• A heartbeat for any background jobs or scheduled render tasks
• Email and Slack alerts when something breaks
• A status badge embedded in your app's footer

Prerequisites

• A Node.js app using Nanomorph for DOM updates
• A free Vigilmon account

Step 1: Add a Health Endpoint to Your Server

Nanomorph apps typically have a server delivering the initial HTML and data. Add a /health route that exposes the status of your key dependencies:

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 data source (e.g. a REST API or database proxy)
  try {
    const response = await fetch(process.env.DATA_API_URL + "/ping", {
      signal: AbortSignal.timeout(3000),
    });
    checks.dataApi = response.ok ? "ok" : `http_${response.status}`;
    if (!response.ok) degraded = true;
  } catch (err) {
    checks.dataApi = `error: ${err.message}`;
    degraded = true;
  }

  // Check any external service your views depend on
  try {
    const res = await fetch(process.env.EXTERNAL_SERVICE_URL, {
      signal: AbortSignal.timeout(3000),
    });
    checks.externalService = res.status < 500 ? "ok" : `http_${res.status}`;
  } catch {
    checks.externalService = "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 the endpoint:

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

Step 2: Create Vigilmon HTTP Monitors

Log in to Vigilmon and set up 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. your app title) | | Check interval | 1 minute |

This catches CDN outages, broken deployments, and server crashes that leave your Nanomorph UI unreachable.

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 Render Jobs

If you run scheduled tasks that feed data into your Nanomorph views — data prefetch jobs, cache warmers, or periodic polling scripts — add a Vigilmon heartbeat so you're alerted if they silently stop.

npm install node-cron

// scheduler.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 scheduler on monitoring failure
  }
}

async function refreshViewData() {
  console.log("[scheduler] Refreshing view data...");
  // Your data refresh logic here
  console.log("[scheduler] Refresh complete");
}

cron.schedule("*/5 * * * *", async () => {
  try {
    await refreshViewData();
    await pingHeartbeat(); // Ping only on success
  } catch (err) {
    console.error("[scheduler] Data refresh failed:", err);
    // Vigilmon alerts when the heartbeat window expires
  }
});

In Vigilmon:

1. Monitors → New Heartbeat Monitor
2. Set the interval to match your cron schedule (e.g. 10 minutes for a 5-minute job)
3. Copy the ping URL to your .env:

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

Step 4: Embed a Status Badge

Show your live uptime status directly in your Nanomorph-rendered UI:

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

  const link = document.createElement("a");
  link.href = MONITOR_URL;
  link.target = "_blank";
  link.rel = "noopener noreferrer";

  const img = document.createElement("img");
  img.src = BADGE_URL;
  img.alt = "Uptime status";
  img.width = 120;
  img.height = 20;

  link.appendChild(img);
  return link;
}

// Mount into your Nanomorph-managed footer
const footer = document.querySelector("#app-footer");
if (footer) {
  footer.appendChild(createStatusBadge());
}

Because Nanomorph diffs the DOM rather than replacing it wholesale, the badge stays mounted even as surrounding content updates — no need to re-inject it on every morph cycle.

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 your #ops-alerts channel
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 health endpoint
curl -s https://yourapp.com/health | jq .

# 2. Point the HTTP monitor at a broken URL, confirm Vigilmon alerts within 2 minutes

# 3. Temporarily clear VIGILMON_HEARTBEAT_URL, let the job run, confirm heartbeat alert fires

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

Summary

| Monitor | What It Catches | |---|---| | HTTP app check | Server crashes, bad deployments, CDN outages | | HTTP health API | Dependency failures, degraded data sources | | Heartbeat | Silent scheduler crashes, stalled data refresh jobs |

Next Steps

• Add separate monitors for staging and production
• Use Vigilmon's response time graphs to catch latency regressions after deploys
• Set up on-call escalation for critical monitors

Want uptime monitoring for your Nanomorph app in under 5 minutes? Sign up for Vigilmon free — no credit card required.