How to Monitor Gluon with Vigilmon

Gluon is an experimental web components library exploring progressive enhancement patterns for modern browsers. It helps you build incrementally interactive pages — but progressive enhancement doesn't protect you from a server going offline or a deploy breaking your components. You need an external monitor watching your production URLs.

This tutorial walks through:

• A /health endpoint in your Gluon-backed server
• An HTTP uptime monitor in Vigilmon
• A keyword monitor that confirms your components are loading
• Slack or email alerts when anything goes wrong

The full setup takes about 15 minutes.

Step 1: Add a health endpoint to your server

Gluon components are served from a standard web server. Add a /health route to whatever server you're using — here's an example with Node's built-in HTTP module:

// server.js
import http from 'http';

const server = http.createServer((req, res) => {
  if (req.url === '/health' && req.method === 'GET') {
    res.writeHead(200, { 'Content-Type': 'application/json' });
    res.end(JSON.stringify({
      status: 'ok',
      service: 'gluon-app',
      timestamp: new Date().toISOString(),
    }));
    return;
  }

  // your normal request handling
  serveApp(req, res);
});

server.listen(3000);

For a Hono or Express backend:

// server.js (Hono example)
import { Hono } from 'hono';
import { serve } from '@hono/node-server';

const app = new Hono();

app.get('/health', (c) => {
  return c.json({
    status: 'ok',
    service: 'gluon-app',
    timestamp: new Date().toISOString(),
  });
});

serve(app);

For a deeper health check that validates your data layer:

app.get('/health', async (c) => {
  const checks = {};
  let healthy = true;

  try {
    await db.ping();
    checks.database = 'ok';
  } catch {
    checks.database = 'error';
    healthy = false;
  }

  return c.json(
    { status: healthy ? 'ok' : 'degraded', checks, timestamp: new Date().toISOString() },
    healthy ? 200 : 503
  );
});

Verify locally:

node server.js
curl http://localhost:3000/health
# {"status":"ok","service":"gluon-app","timestamp":"..."}

Step 2: Set up an HTTP monitor in Vigilmon

Deploy your app then connect it to Vigilmon:

1. Sign up at vigilmon.online — free, no card required
2. Click New Monitor → HTTP
3. URL: https://yourapp.example.com/health
4. Check interval: 1 minute (paid) or 5 minutes (free)
5. Expected status: 200
6. Save

Vigilmon probes from multiple regions. If your /health route returns anything other than 200 — or times out — you get alerted immediately.

Step 3: Add a keyword monitor for component loading

Your health endpoint checks the server is running. A keyword monitor checks that your Gluon components are actually being served and that the page HTML looks correct — important since component registration errors can silently break the UI while the server stays up.

In Vigilmon:

1. Click New Monitor → Keyword
2. URL: https://yourapp.example.com/
3. Keyword: a string that only appears when your page renders correctly — your app title, a nav label, or a custom element name like <my-counter>
4. Match type: Contains
5. Expected status: 200
6. Save

If a deploy removes or corrupts your component scripts, the keyword monitor catches it even when the HTTP monitor stays green.

Step 4: Configure alerts

Go to Notifications → New Channel in Vigilmon and pick your channel type:

Slack:

1. Create an incoming webhook at api.slack.com/apps
2. Paste the URL into Vigilmon's Slack channel config
3. Enable it on both your monitors

Email:

1. Add your email address as a notification channel
2. Enable it on the monitors you want coverage for

When your app goes down, the alert lands within the check interval:

🔴 DOWN: yourapp.example.com/health
Status: 503
Region: US-East
2 minutes ago

When it recovers:

✅ RECOVERED: yourapp.example.com/health
Downtime: 4 minutes

For critical apps, enable both Slack (immediate) and email (paper trail).

Step 5: Heartbeat monitoring for build or sync jobs

If you run background jobs alongside your app — component bundle builds, content sync, cache warming — HTTP monitoring won't catch a silent failure there.

Add a heartbeat ping at the end of each successful job:

// jobs/build-components.js
import { buildComponents } from '../build/index.js';

async function run() {
  await buildComponents();

  const heartbeatUrl = process.env.VIGILMON_BUILD_HEARTBEAT;
  if (heartbeatUrl) {
    await fetch(heartbeatUrl);
  }
}

run().catch((err) => {
  console.error('Build failed:', err);
  process.exit(1);
});

In Vigilmon, create a Heartbeat Monitor:

1. Click New Monitor → Heartbeat
2. Set the expected interval to match your job schedule
3. Copy the ping URL
4. Set VIGILMON_BUILD_HEARTBEAT=<url> in your environment

If the job stops running or throws, Vigilmon alerts you after one missed interval.

Step 6: Public status page

Go to Status Pages → New Status Page in Vigilmon, add your monitors, and publish. Drop the URL in your README or on error pages:

Service unavailable. Check our status page: https://status.yourapp.example.com

Each monitor also generates a live badge:

![App Status](https://vigilmon.online/badge/your-monitor-slug)

What you've built

| What | How | |------|-----| | Health endpoint | /health route in your server | | HTTP uptime check | Vigilmon HTTP monitor | | Component loading check | Vigilmon keyword monitor on home page | | Slack/email alerts | Vigilmon notification channels | | Job monitoring | Heartbeat ping in build/sync handlers | | Status page | Vigilmon public status page |

Gluon makes progressive enhancement practical. Vigilmon makes your uptime visible when something breaks.

Next steps

• Add monitors for API endpoints your components call
• Watch response time trends — Vigilmon charts latency over time, and slowdowns are visible before a full outage
• Add a heartbeat for each background job

Get started free at vigilmon.online.