How to Monitor Wickedele with Vigilmon

Wickedele is a small library for building native web components with reactive data binding. It sits close to the browser's native custom elements API, adding just enough abstraction to make reactive state management ergonomic without the overhead of a full framework. When Wickedele powers a production application, Vigilmon gives you continuous visibility into your hosting endpoint, the APIs that drive reactive updates, and the CI/CD pipeline that ships new versions.

What You'll Set Up

• HTTP uptime monitor for your Wickedele application
• API endpoint health check for reactive data sources
• SSL certificate expiry alerting
• Cron heartbeat for your deployment pipeline
• Alert channels for Slack, email, or webhook

Prerequisites

• A Wickedele application deployed to a web host or CDN
• A free Vigilmon account
• Basic familiarity with your hosting environment and deployment process

Step 1: Monitor Your Application Host

Wickedele apps are distributed as a JavaScript bundle loaded by a static HTML page. Start by monitoring the host URL to detect outages at the infrastructure level:

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.

This check catches the most common failure modes: web server crash, CDN misconfiguration, and DNS propagation errors.

Step 2: Monitor Reactive Data APIs

Wickedele's reactive data binding connects component state to external data sources. If the API feeding that data goes down, components lose reactivity and display stale or empty state — while the host returns 200. Monitor each data API independently:

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

For APIs without a dedicated health route, monitor the primary endpoint your Wickedele components subscribe to. A successful response confirms the data layer is alive.

Step 3: Validate the Custom Element Bundle

Wickedele components are registered as custom elements in the browser's Custom Element Registry. A 200 response from your host does not guarantee the registration bundle loaded correctly. Use a keyword monitor to verify:

1. Click 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 custom element tag (<wk-app or equivalent) or the script src pointing to your Wickedele bundle.
4. Set Expected HTTP status to 200.
5. Click Save.

If a deployment accidentally removes or renames the bundle, the keyword check fails and Vigilmon alerts you before users encounter blank components.

Step 4: SSL Certificate Alerts

Applications served over HTTPS depend on a valid TLS certificate. An expired certificate produces browser security warnings that block all users, regardless of how healthy the app itself is. 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.

A 21-day alert window gives your certificate automation (Let's Encrypt, Caddy, or your CDN) multiple attempts to renew, while ensuring you are notified in time to intervene manually if automation fails.

Step 5: Heartbeat Monitoring for Your Deploy Pipeline

Wickedele apps are bundled and deployed via a CI/CD pipeline. A heartbeat monitor detects silent build failures that do not trigger error emails but leave your production app on an outdated version:

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

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

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

4. Add the ping at the end of your successful deploy step:

   npm run build
   # copy dist/ to web root or CDN
   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 or deploy step fails, the heartbeat is never sent. Vigilmon alerts you after the expected interval, indicating that the pipeline did not complete.

Step 6: Configure Alert Channels

1. Go to Alert Channels in Vigilmon and add your preferred notification channel — Slack, email, PagerDuty, or a custom webhook.
2. Set Consecutive failures before alert to 2 on the hosting monitor to reduce noise from transient CDN hiccups.
3. Set Consecutive failures before alert to 1 on API monitors — reactive data failures should surface immediately.

Pause alerts during planned deployments with the Vigilmon maintenance 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/health | Data source failure | | Keyword check | App shell HTML | Missing bundle, broken deploy | | SSL certificate | App domain | Certificate expiry | | Cron heartbeat | Heartbeat URL | Deploy pipeline failure |

Wickedele's close-to-the-platform design means your components are only as reliable as the browser APIs, data sources, and hosting infrastructure beneath them. Vigilmon closes the gap between "the host is up" and "the app is working" by watching every layer — from the TLS certificate down to the API endpoints powering reactive updates.