How to Monitor Composi with Vigilmon

Composi is a lightweight UI library that brings React-like component patterns to a fraction of the bundle size. Its virtual DOM diffing engine makes it ideal for projects where performance and minimal overhead matter. Once your Composi app is live, Vigilmon ensures continuous uptime by watching your hosting endpoint, the APIs your components consume, and the deployment pipeline that ships updates.

What You'll Set Up

• HTTP uptime monitor for your Composi application
• Component data API health check
• SSL certificate expiry alerting
• Cron heartbeat for CI/CD deployments
• Alert channels for Slack, email, or webhook

Prerequisites

• A Composi application deployed to a static host, CDN, or server
• A free Vigilmon account
• Basic access to your hosting environment and deployment tooling

Step 1: Monitor Your Composi App's URL

Composi compiles to a small JavaScript bundle served alongside a static HTML file. Start with a basic HTTP uptime check:

1. Log in to vigilmon.online and click Add Monitor.
2. Set Type to HTTP / HTTPS.
3. Enter your application URL: https://yourdomain.com.
4. Set Check interval to 1 minute.
5. Set Expected HTTP status to 200.
6. Click Save.

Vigilmon will probe your app every minute and alert you the moment the host stops responding — whether due to a server crash, network partition, or CDN configuration error.

Step 2: Verify Your Component Data APIs

Composi components are driven by data fetched from external APIs. If those APIs go down, your components render empty or broken states that are invisible to uptime monitors watching only the static host. Add a monitor for each data source:

1. Click Add Monitor → HTTP / HTTPS.
2. Set the URL to your API endpoint, e.g. https://api.yourdomain.com/data.
3. Set Expected HTTP status to 200.
4. Add a Keyword check matching a field in a healthy response, such as "items" or "data".
5. Click Save.

Repeat for each endpoint your Composi components call during their componentDidMount equivalent or initial render cycle.

Step 3: Validate the App Shell

A CDN can return a 200 status for a cached, outdated, or truncated HTML file. Use a keyword monitor to confirm the Composi mount point is present:

1. Open Add Monitor → HTTP / HTTPS.
2. Enter your app URL.
3. Under Keyword check, enter a string unique to your app shell — such as the root element ID (id="root") or your app title.
4. Set Expected HTTP status to 200.
5. Click Save.

This catches deployment errors where the HTML shell was overwritten with an error page or an empty file, while the CDN continues serving a stale 200.

Step 4: SSL Certificate Alerts

Composi apps are typically served over HTTPS. If your TLS certificate expires, browsers will block all users with a security warning — often before your monitoring catches an HTTP failure. Enable certificate monitoring:

1. Open the monitor from Step 1.
2. Enable Monitor SSL certificate.
3. Set Alert when certificate expires in less than 21 days.
4. Click Save.

Three weeks of lead time is enough to let automatic renewal (Let's Encrypt, Caddy, or your CDN) retry and succeed, while still alerting you if renewal silently fails.

Step 5: Heartbeat Monitoring for Deployments

If you use a CI/CD system to bundle and publish your Composi app, add a Vigilmon heartbeat to detect pipeline failures:

1. In Vigilmon, click Add Monitor → Cron Heartbeat.

2. Set the expected ping interval (e.g. 60 minutes for continuous deployment pipelines, or 24 hours for scheduled releases).

3. Copy the heartbeat URL: https://vigilmon.online/heartbeat/abc123.

4. Ping it at the end of your deploy step:

   npm run build
   # push dist/ to hosting
   curl -s https://vigilmon.online/heartbeat/abc123
   

   For GitHub Actions:

   - name: Build and deploy
     run: npm run build && npm run deploy
   
   - name: Ping Vigilmon heartbeat
     if: success()
     run: curl -s https://vigilmon.online/heartbeat/abc123
   

If the build step fails, the curl is never reached and Vigilmon alerts you after the expected window elapses.

Step 6: Configure Alert Channels

1. Go to Alert Channels in Vigilmon and connect Slack, email, PagerDuty, or a custom webhook.
2. Set Consecutive failures before alert to 2 on the hosting monitor to filter out transient CDN probe failures.
3. Set Consecutive failures before alert to 1 on API endpoint monitors so data failures surface immediately.

Suppress alerts during scheduled maintenance with the Vigilmon API:

curl -X POST https://vigilmon.online/api/maintenance \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -d '{"monitor_id": "YOUR_MONITOR_ID", "duration_minutes": 10}'

Summary

| Monitor | Target | What It Catches | |---|---|---| | HTTP uptime | https://yourdomain.com | Host crash, CDN outage | | API health | https://api.yourdomain.com/data | Data source failure | | Keyword check | App shell HTML | Broken deploy, missing mount point | | SSL certificate | App domain | Certificate expiry | | Cron heartbeat | Heartbeat URL | Build/deploy pipeline failure |

Composi's philosophy is to stay small and stay fast. Your monitoring stack should match: a handful of focused Vigilmon checks gives you complete visibility into every layer your Composi app depends on, without adding any overhead to the app itself.