How to Monitor Petite Vue with Vigilmon

Petite Vue is a ~6 KB subset of Vue designed for progressive enhancement — you drop it into existing HTML pages to add reactivity without a build step. That's great for lightweight interactivity, but it means your pages are typically served by a backend (Express, Rails, Laravel, a CDN) that still needs to be monitored.

This tutorial walks through:

• A /health endpoint in your Petite Vue backend
• An HTTP uptime monitor in Vigilmon
• A keyword monitor verifying your Petite Vue pages are rendering
• Heartbeat monitoring for any cron tasks your server runs
• Slack or email alerts when things go wrong

Setup takes about 15 minutes.

Step 1: Add a health endpoint to your server

Petite Vue itself is a frontend library — you monitor the server that delivers your pages. Here are examples for the most common backends:

Express (Node.js):

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

Flask (Python):

# app.py
@app.route('/health')
def health():
    return {'status': 'ok', 'service': 'petite-vue-app'}, 200

Laravel (PHP):

// routes/web.php
Route::get('/health', function () {
    return response()->json(['status' => 'ok', 'service' => 'petite-vue-app']);
});

For a deeper check that tests your data layer:

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

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

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

Verify locally:

curl http://localhost:3000/health
# {"status":"ok","service":"petite-vue-app","timestamp":"..."}

Step 2: Set up an HTTP monitor in Vigilmon

Deploy your app, then add monitoring at Vigilmon:

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

Vigilmon checks from multiple regions every interval. A non-200 response or timeout triggers an immediate alert.

Step 3: Add a keyword monitor for Petite Vue page rendering

Since Petite Vue pages are server-rendered HTML that gets hydrated client-side, a keyword monitor confirms your template is actually being served with the expected content:

<!-- your Petite Vue page -->
<div v-scope="{ count: 0 }">
  <p>Count: {{ count }}</p>
  <button @click="count++">Increment</button>
</div>
<script src="https://unpkg.com/petite-vue" defer init></script>

In Vigilmon:

1. Click New Monitor → Keyword
2. URL: https://yoursite.example.com/ (or the page using Petite Vue)
3. Keyword: a string unique to your page, e.g. your app name, a nav item, or petite-vue
4. Match type: Contains
5. Expected status: 200
6. Save

This catches server errors or broken template rendering that still return a 200 with an empty or error page.

Step 4: 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 both your monitors

Email:

1. Add your email as a notification channel
2. Enable on both monitors

Down alert:

🔴 DOWN: yoursite.example.com/health
Status: 503
Region: EU-West
3 minutes ago

Recovery:

✅ RECOVERED: yoursite.example.com/health
Downtime: 6 minutes

Step 5: Heartbeat monitoring for cron tasks

If your Petite Vue backend runs scheduled jobs — clearing caches, syncing data, sending emails — use a Vigilmon heartbeat to detect silent failures:

Node.js cron example:

import cron from 'node-cron';
import fetch from 'node-fetch';

cron.schedule('0 * * * *', async () => {
  try {
    await syncData();

    if (process.env.VIGILMON_HEARTBEAT_URL) {
      await fetch(process.env.VIGILMON_HEARTBEAT_URL);
    }
  } catch (err) {
    console.error('Cron job failed:', err);
  }
});

Python APScheduler example:

import requests, os

def sync_job():
    sync_data()
    url = os.environ.get('VIGILMON_HEARTBEAT_URL')
    if url:
        requests.get(url)

In Vigilmon:

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

Step 6: Public status page

Give users visibility into your service health:

1. Go to Status Pages → New Status Page in Vigilmon
2. Add your HTTP and keyword monitors
3. Publish and link from your site

Badge for your README or docs:

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

What you've built

| What | How | |------|-----| | Health endpoint | Backend route at /health | | HTTP uptime check | Vigilmon HTTP monitor | | Page rendering check | Vigilmon keyword monitor | | Cron job monitoring | Heartbeat ping on completion | | Slack/email alerts | Vigilmon notification channels | | Status page | Vigilmon public status page |

Petite Vue makes pages reactive. Vigilmon makes your uptime visible.

Next steps

• Monitor individual critical pages with separate keyword monitors
• Track response time trends — slow template rendering degrades every user's first interaction
• Add a heartbeat for every scheduled job you depend on

Get started free at vigilmon.online.