How to Monitor Mithril with Vigilmon

Mithril is a modern, fast, and tiny client-side JavaScript framework for building single-page applications. At under 10 KB gzipped and with built-in routing and XHR, Mithril gives you everything you need for a SPA with minimal overhead. But fast JavaScript doesn't protect you from a down server, a broken API, or a bad deploy that serves a blank page.

This tutorial covers:

• A /health endpoint on your Mithril backend
• An HTTP uptime monitor in Vigilmon
• A keyword monitor that confirms your SPA shell is being served
• API endpoint monitoring for the data your Mithril app fetches
• Alerts when anything breaks

Setup takes about 15 minutes.

Step 1: Add a health endpoint to your backend

Mithril SPAs fetch data from a backend API. That API — and the static file server serving your SPA shell — both need monitoring. Start with a health endpoint on your API:

Node.js (Express):

// server.js
const express = require('express');
const app = express();

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

  try {
    await db.ping(); // replace with your actual DB check
    checks.database = 'ok';
  } catch {
    checks.database = 'error';
    healthy = false;
  }

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

// Serve Mithril SPA
app.use(express.static('dist'));
app.get('*', (req, res) => res.sendFile('dist/index.html', { root: '.' }));

app.listen(3000);

Go (net/http):

// main.go
package main

import (
    "encoding/json"
    "net/http"
    "time"
)

func healthHandler(w http.ResponseWriter, r *http.Request) {
    w.Header().Set("Content-Type", "application/json")
    json.NewEncoder(w).Encode(map[string]interface{}{
        "status":    "ok",
        "service":   "mithril-api",
        "timestamp": time.Now().Format(time.RFC3339),
    })
}

func main() {
    http.HandleFunc("/health", healthHandler)
    http.Handle("/", http.FileServer(http.Dir("dist")))
    http.ListenAndServe(":3000", nil)
}

Test it:

curl http://localhost:3000/health
# {"status":"ok","service":"mithril-api","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

Step 3: Add a keyword monitor for the SPA shell

Your health endpoint checks the API. A keyword monitor checks that the static file server is actually serving your Mithril SPA shell — the index.html that bootstraps the app.

In Vigilmon:

1. Click New Monitor → Keyword
2. URL: https://yourapp.example.com/
3. Keyword: something unique to your SPA shell, like your app name in the <title>, your root div ID (id="app"), or your bundle script tag
4. Match type: Contains
5. Expected status: 200
6. Save

If a bad deploy wipes your dist/ folder or your CDN returns a 200 with an error page body, this catches it.

Step 4: Monitor your API endpoints

Mithril apps depend on API responses to render content. Add HTTP monitors for your critical API endpoints:

In Vigilmon, for each critical endpoint:

1. Click New Monitor → HTTP
2. URL: https://yourapp.example.com/api/v1/items (or your key endpoint)
3. Check interval: 1 minute
4. Expected status: 200
5. Optionally add a keyword check for a JSON field that should always be present

For authenticated endpoints, you can use Vigilmon's custom headers to pass an API key:

1. Under Advanced, add header: Authorization: Bearer your-monitoring-token

Step 5: Configure alerts

Go to Notifications → New Channel in Vigilmon:

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 all your monitors

Email:

1. Add your email under Notifications
2. Enable for the monitors you care about

Sample alert when your API is down:

🔴 DOWN: yourapp.example.com/health
Status: 503
Region: AP-Southeast
45 seconds ago

Recovery:

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

Step 6: Heartbeat monitoring for background jobs

If your Mithril app backend runs scheduled jobs — syncing data, sending notifications, clearing caches — use heartbeat monitoring to detect silent failures.

// jobs/sync.js
const HEARTBEAT = process.env.VIGILMON_SYNC_HEARTBEAT;

async function runSync() {
  try {
    await performSync(); // your job logic

    if (HEARTBEAT) {
      await fetch(HEARTBEAT);
    }
  } catch (err) {
    console.error('Sync job failed:', err);
    process.exit(1);
  }
}

runSync();

In Vigilmon:

1. Click New Monitor → Heartbeat
2. Set the interval to your job's schedule
3. Copy the ping URL into your environment config

If the job stops or errors before pinging, Vigilmon alerts after one missed interval.

Step 7: Public status page

Go to Status Pages → New Status Page, add your monitors, and publish. Share it with your users:

Something broken? Check our status: https://status.yourapp.example.com

Add a badge to your README:

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

What you've built

| What | How | |------|-----| | API health endpoint | Express/Go route at /health | | HTTP uptime check | Vigilmon HTTP monitor | | SPA shell check | Vigilmon keyword monitor on home page | | API endpoint monitoring | Vigilmon HTTP monitors for key routes | | Slack/email alerts | Vigilmon notification channels | | Background job monitoring | Heartbeat ping in scheduled job | | Status page | Vigilmon public status page |

Mithril is lightweight and fast. Vigilmon makes sure it stays up and serving real content.

Next steps

• Add HTTP monitors for every API endpoint your Mithril routes depend on — silent 500s are the hardest to detect
• Watch response time trends to catch performance regressions before they become outages
• Add heartbeat monitors for every background job, not just the primary one

Get started free at vigilmon.online.