tutorial

How to Monitor Minze with Vigilmon

Add production-grade uptime monitoring to your Minze web components app — health endpoint, HTTP and keyword monitors in Vigilmon, and alert configuration.

How to Monitor Minze with Vigilmon

Minze gives you a clean, lightweight way to build native web components without heavy tooling. Once your component library or app is deployed, though, you still need an external eye on the production URL — Minze's simplicity doesn't protect you from server outages or broken deploys.

This tutorial walks through:

  • A /health endpoint for your Minze-backed server
  • An HTTP uptime monitor in Vigilmon
  • A keyword monitor that confirms your components are rendering
  • Slack or email alerts when anything breaks

The full setup takes about 15 minutes.


Step 1: Add a health endpoint to your server

Minze is a client-side framework, so your server can be anything — Express, Fastify, a static host, etc. Here's a minimal Express health endpoint:

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

const app = express();

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

app.use(express.static('dist'));

app.listen(3000, () => console.log('Server running on port 3000'));

Verify it works locally:

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

For a more thorough check that validates critical dependencies:

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

  try {
    // check any external service your components depend on
    checks.assets = 'ok';
  } catch {
    checks.assets = 'error';
    healthy = false;
  }

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

A 503 on failure means Vigilmon flags the outage without needing to inspect the response body.


Step 2: Set up an HTTP monitor in Vigilmon

Deploy your Minze 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 the endpoint returns anything other than 200 — or times out — you get alerted immediately.


Step 3: Add a keyword monitor for the component page

Your health endpoint checks the server process. A keyword monitor checks that your Minze components are actually loading in the HTML — critical for catching silent JS bundle failures or CDN errors.

In Vigilmon:

  1. Click New Monitor → Keyword
  2. URL: https://yourapp.example.com/
  3. Keyword: a tag name from your component library (e.g. my-button) or a static page title string
  4. Match type: Contains
  5. Expected status: 200
  6. Save

If a build error strips your component registrations from the bundle, the HTTP monitor stays green — the keyword monitor catches it.


Step 4: Configure alerts

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

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 monitors

Email:

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

When your Minze app goes down:

🔴 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 production apps, enable both Slack (immediate) and email (paper trail).


Step 5: Heartbeat monitoring for build or publish jobs

If you run a Minze build pipeline, component library publish step, or any scheduled job, HTTP monitoring won't detect a silent failure in those jobs. Use a Vigilmon heartbeat instead.

// scripts/build-and-ping.js
import { execSync } from 'child_process';

async function buildAndPublish() {
  execSync('npm run build', { stdio: 'inherit' });

  const heartbeatUrl = process.env.VIGILMON_BUILD_HEARTBEAT;
  if (heartbeatUrl) {
    await fetch(heartbeatUrl);
    console.log('Heartbeat pinged');
  }
}

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

In Vigilmon:

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

If the build 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. Share the URL in your README or component docs:

Component library unavailable. Check our status: 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 | Express route at /health | | HTTP uptime check | Vigilmon HTTP monitor | | Component rendering check | Vigilmon keyword monitor | | Slack/email alerts | Vigilmon notification channels | | Build job monitoring | Heartbeat ping in build script | | Status page | Vigilmon public status page |

Your Minze components are lightweight. Now your production visibility is too.


Next steps

  • Add a monitor for each critical page that uses your custom elements
  • Watch response time trends — Vigilmon charts latency over time, and slowdowns often precede full outages
  • Add a heartbeat for every automated publish or deploy step in your pipeline

Get started free at vigilmon.online.

Monitor your app with Vigilmon

Free plan — 5 monitors, no credit card required. Up and running in 60 seconds.

Start free →