Monitoring Your Morphdom App with Vigilmon: Health Checks, Heartbeats & Uptime Alerts

Morphdom updates the real DOM by efficiently patching it from one state to another — no virtual DOM overhead, just fast node-by-node diffing. It powers server-side rendering workflows, AJAX partial updates, and progressive enhancement patterns. But even the fastest DOM patcher can't help you if your server is down or your rendering pipeline is broken. Vigilmon gives you 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 Morphdom-backed application
• Vigilmon HTTP monitors for your app and backend API
• A heartbeat for scheduled background tasks
• Alert channels (email and Slack)
• An uptime badge rendered via Morphdom on your page

Prerequisites

• An application using morphdom for DOM updates (any backend stack)
• Node.js backend for the health endpoint
• A free Vigilmon account

Step 1: Add a Health Endpoint

Morphdom lives on the client side; your server handles routing and rendering. Add a /health route to your backend:

// server.js (Express)
import express from "express";

const app = express();

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

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

  // Rendering service check (e.g., template engine)
  try {
    const response = await fetch("http://localhost:4000/render-ping", {
      signal: AbortSignal.timeout(3000),
    });
    checks.renderer = response.ok ? "ok" : `http_${response.status}`;
  } catch (err) {
    checks.renderer = "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:

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

Step 2: Configure Vigilmon HTTP Monitors

Log in to Vigilmon → Monitors → New Monitor:

Monitor 1: Application Page (server-rendered HTML)

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

Monitor 2: Backend Health API

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

Covering both the rendered page and the health endpoint ensures you detect CDN failures separately from backend data layer failures.

Step 3: Heartbeat for Background Tasks

Server-rendered apps often rely on background processes — page pre-rendering, cache warming, content syndication. Morphdom-driven AJAX refresh flows will silently break when these fail. A Vigilmon heartbeat catches the silence.

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 {
    // Monitoring must never crash the job
  }
}

cron.schedule("*/5 * * * *", async () => {
  try {
    await refreshContentCache();
    await pingHeartbeat();
  } catch (err) {
    console.error("[scheduler] Cache refresh failed:", err);
    // Vigilmon alerts after the heartbeat window expires with no ping
  }
});

async function refreshContentCache() {
  // Pre-render HTML fragments that Morphdom will patch into the page
}

Set up the heartbeat in Vigilmon:

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

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

Step 4: Display Uptime Status via Morphdom

Use Morphdom itself to inject the status badge into the page after it loads, keeping your server-rendered HTML clean:

// public/status-badge.js
import morphdom from "morphdom";

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

function buildBadgeHTML() {
  return `
    <div id="vigilmon-badge">
      <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>
    </div>
  `;
}

document.addEventListener("DOMContentLoaded", () => {
  const placeholder = document.getElementById("vigilmon-badge");
  if (!placeholder) return;

  const tmp = document.createElement("div");
  tmp.innerHTML = buildBadgeHTML();
  const newNode = tmp.firstElementChild;

  morphdom(placeholder, newNode);
});

Add the placeholder to your server-rendered template:

<!-- In your layout template -->
<footer>
  <div id="vigilmon-badge"></div>
</footer>
<script type="module" src="/status-badge.js"></script>

Step 5: Set Up Alert Channels

In Vigilmon's Alert Channels settings:

Email

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

Slack

1. Create a Slack Incoming Webhook for #alerts
2. Alert Channels → Webhook → paste the URL
3. 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. Health endpoint
curl -s https://yourapp.com/health | jq .

# 2. Break the DB connection string → confirm health returns 503
# Expected: Vigilmon alerts within 2 minutes

# 3. Remove VIGILMON_HEARTBEAT_URL → let the scheduler run without pinging
# Expected: heartbeat alert fires after the grace window

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

Summary

| Monitor | What It Catches | |---|---| | HTTP page check | CDN failures, broken server-side rendering | | HTTP health API | Database, renderer, and third-party API failures | | Heartbeat | Scheduler crashes, silent cache refresh failures |

Next Steps

• Create separate monitors for staging vs. production
• Use Vigilmon's response time graphs to detect rendering bottlenecks that slow your Morphdom patch payloads
• 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.