How to Monitor Nanocomponent with Vigilmon

Nanocomponent is a tiny library for building performant HTML elements using reusable JavaScript class components. Its lifecycle-driven, DOM-first approach keeps bundle sizes minimal — but a lightweight component model won't protect your app from server downtime or silently failing background jobs. 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 endpoint for your Nanocomponent app's backend
Vigilmon HTTP monitors for your app and API
A heartbeat for scheduled background tasks
Alert channels (email and Slack)
A status badge implemented as a Nanocomponent

Prerequisites

A Nanocomponent project (with a Node/Express or similar backend)
A free Vigilmon account

Step 1: Add a Health Endpoint

Nanocomponent apps are static assets backed by a separate server. Add a /health route to your backend:

// server.js
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;
  }

  // Third-party service check
  try {
    const response = await fetch("https://api.example.com/ping", {
      signal: AbortSignal.timeout(3000),
    });
    checks.externalApi = response.ok ? "ok" : `http_${response.status}`;
  } catch {
    checks.externalApi = "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","externalApi":"ok"}}

Step 2: Configure Vigilmon HTTP Monitors

Monitor 1: Nanocomponent App

| Field | Value | |---|---| | URL | https://yourapp.com/ | | Method | GET | | Expected status | 200 | | Expected body | A stable string from your HTML (e.g. app 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 |

Two monitors catch two failure classes: static file serving and backend data layer.

Step 3: Heartbeat for Background Tasks

Apps using Nanocomponent often pair with server-side workers for data sync, notifications, or report generation. A Vigilmon heartbeat detects silent failures.

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 job over monitoring
  }
}

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

async function processNotifications() {
  // Your scheduled task logic here
}

Set up the heartbeat in Vigilmon:

Monitors → New Heartbeat Monitor
Set Expected interval to 10 minutes (2× the cron interval)
Copy the ping URL into your environment:

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

Step 4: Build a Status Badge as a Nanocomponent

Nanocomponent's class-based lifecycle makes it clean to encapsulate external content like a status badge:

// components/StatusBadge.js
const Nanocomponent = require("nanocomponent");
const html = require("bel");

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

class StatusBadge extends Nanocomponent {
  createElement() {
    return html`
      <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>
    `;
  }

  update() {
    // Badge is static — no re-render needed
    return false;
  }
}

module.exports = StatusBadge;

Mount it in your app entry point:

// index.js
const StatusBadge = require("./components/StatusBadge");

const badge = new StatusBadge();

document.querySelector("footer").appendChild(badge.render());

Step 5: Configure Alert Channels

In Vigilmon's Alert Channels settings:

Email

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

Slack

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

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

# 3. Remove VIGILMON_HEARTBEAT_URL and let the scheduler run
# Expected: heartbeat alert after the grace window

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

Summary

| Monitor | What It Catches | |---|---| | HTTP app check | CDN failures, broken static deploys | | HTTP health API | Database, external API, and service failures | | Heartbeat | Silent scheduler failures, broken background jobs |

Next Steps

Create separate monitors for staging vs. production
Use Vigilmon's response time graphs to track latency trends across Nanocomponent lifecycle events
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.