How to Monitor DataFormsJS with Vigilmon

DataFormsJS is a lightweight JavaScript framework and library of standalone web components that lets you build data-driven SPAs with minimal code and zero build step. Whether you're fetching JSON from a REST API, rendering Handlebars templates, or wiring up reactive data bindings, DataFormsJS keeps things simple — but production still bites. Vigilmon gives you the visibility layer your DataFormsJS app needs: continuous HTTP uptime monitoring, heartbeat checks for background tasks, and instant alerts to email or Slack.

What You'll Build

• A /health endpoint for the backend your DataFormsJS app consumes
• Vigilmon HTTP monitors for the SPA host and the JSON API
• A heartbeat for scheduled data-sync jobs
• Alert channels (email and Slack)
• An uptime badge you can embed anywhere in your HTML

Prerequisites

• A DataFormsJS project (CDN-based or npm-based)
• A backend API (Node/Express, Python, PHP, or any HTTP server)
• A free Vigilmon account

Step 1: Add a Health Endpoint to Your API

DataFormsJS apps are typically backed by a REST or GraphQL API. Add a dedicated health route to that API so Vigilmon can verify it independently from the static HTML shell.

Node/Express example

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

const app = express();

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

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

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

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

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

PHP example

<?php
// health.php
header("Content-Type: application/json");

$checks = [];
$degraded = false;

// PDO database check
try {
    $pdo = new PDO($_ENV["DB_DSN"], $_ENV["DB_USER"], $_ENV["DB_PASS"]);
    $pdo->query("SELECT 1");
    $checks["database"] = "ok";
} catch (Exception $e) {
    $checks["database"] = "error: " . $e->getMessage();
    $degraded = true;
}

http_response_code($degraded ? 503 : 200);
echo json_encode([
    "status"    => $degraded ? "degraded" : "ok",
    "timestamp" => date("c"),
    "checks"    => $checks,
]);

Test it:

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

Step 2: Configure Vigilmon HTTP Monitors

Log in to Vigilmon → Monitors → New Monitor.

Monitor 1: Static SPA Host

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

Monitor 2: JSON API Health

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

With both monitors, you catch two distinct failure classes: the CDN/static host and the backend data layer.

Step 3: Heartbeat for Data-Sync Jobs

DataFormsJS apps frequently rely on scheduled jobs that pre-fetch or aggregate data for fast client-side rendering. A Vigilmon heartbeat catches silent job failures before users notice stale data.

// sync-job.js (Node cron example)
import cron from "node-cron";

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 itself
  }
}

cron.schedule("*/10 * * * *", async () => {
  try {
    await syncDataFromUpstream();
    await pingHeartbeat(); // ping only on success
  } catch (err) {
    console.error("[sync] Failed:", err);
    // No ping → Vigilmon alerts after the grace window
  }
});

async function syncDataFromUpstream() {
  // Your actual sync logic
}

Set up the heartbeat in Vigilmon:

1. Monitors → New Heartbeat Monitor
2. Expected interval: 20 minutes (2× the cron interval)
3. Copy the ping URL and add it to .env:

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

Step 4: Embed an Uptime Badge in Your DataFormsJS Page

DataFormsJS HTML pages are plain HTML — no build step required, so you can drop a badge directly into your markup:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My DataFormsJS App</title>
  <script src="https://cdn.jsdelivr.net/npm/dataformsjs@latest/js/DataFormsJS.min.js"></script>
</head>
<body>
  <!-- Your DataFormsJS content here -->

  <footer>
    <a href="https://vigilmon.online/status/your-monitor-slug"
       target="_blank"
       rel="noopener noreferrer"
       aria-label="Service uptime status">
      <img src="https://vigilmon.online/api/badge/your-monitor-id.svg"
           alt="Uptime"
           width="120"
           height="20">
    </a>
  </footer>
</body>
</html>

Replace your-monitor-id and your-monitor-slug with the values from your Vigilmon dashboard.

Step 5: Set Up Alert Channels

In Vigilmon → Alert Channels:

Email

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

Slack

1. Create a Slack Incoming Webhook for your #alerts channel
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 returns 200
curl -s https://yourapp.com/health | jq .

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

# 3. Stop the sync job → wait for heartbeat window to expire
# Expected: heartbeat alert fires

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

Summary

| Monitor | What It Catches | |---|---| | HTTP SPA check | CDN failures, broken static hosting | | HTTP API health | Database, upstream API, and config failures | | Heartbeat | Silent data-sync job failures |

Next Steps

• Add separate staging and production monitors with different alert thresholds
• Use Vigilmon's response time graphs to detect API latency regressions before users notice slow data loads
• Configure multi-channel alerting: email for warnings, Slack for critical outages

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