How to Monitor Lit with Vigilmon

Lit is Google's library for building fast, lightweight web components with reactive properties and a minimal footprint. Whether you're delivering a design system, a micro-frontend shell, or a component library CDN, your Lit components depend on a server that can go down.

This tutorial walks through:

A /health endpoint for the server hosting your Lit app or component CDN
An HTTP uptime monitor in Vigilmon
A keyword monitor verifying your components are actually served
Heartbeat monitoring for build/publish pipelines
Slack or email alerts when anything breaks

Setup takes about 15 minutes.

Step 1: Add a health endpoint to your server

Lit components are served by a static host, CDN, or Node.js server. Add a /health route to whatever serves your app:

Node.js / Express (common for Lit dev servers or custom hosts):

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

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

// Serve static Lit build
app.use(express.static('dist'));

app.listen(3000);

For a deeper health check that tests your CDN or asset origin:

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

  // Verify component bundle is reachable
  try {
    const r = await fetch('http://localhost:3000/components/my-button.js');
    checks.components = r.ok ? 'ok' : 'degraded';
    if (!r.ok) healthy = false;
  } catch {
    checks.components = 'error';
    healthy = false;
  }

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

Test it:

npm run dev
curl http://localhost:3000/health
# {"status":"ok","service":"lit-app","timestamp":"..."}

Step 2: Set up an HTTP monitor in Vigilmon

Deploy your app (Netlify, Vercel, AWS S3 + CloudFront, Node.js VPS — anywhere Lit runs), then add monitoring:

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

Vigilmon checks from multiple regions. A 503 or timeout fires an alert before your users notice components missing.

Step 3: Add a keyword monitor for component rendering

A keyword monitor checks that your Lit app is actually delivering HTML with the expected content — catching broken deploys where the server responds but the page is empty or shows an error:

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head><title>My Lit App</title></head>
  <body>
    <my-app></my-app>
    <script type="module" src="/components/my-app.js"></script>
  </body>
</html>

In Vigilmon:

Click New Monitor → Keyword
URL: https://yourapp.example.com/
Keyword: My Lit App (or any static string guaranteed to appear in every render)
Match type: Contains
Expected status: 200
Save

This catches a broken build where index.html is served but your component bundles are 404ing.

Step 4: Monitor your component CDN endpoint

If you publish Lit components to a CDN or package registry for use in other apps, monitor that endpoint directly:

Click New Monitor → HTTP
URL: https://cdn.example.com/components/my-button/latest/my-button.js
Expected status: 200
Save

When your CDN origin fails or an invalidation breaks a key component, you find out immediately rather than when developers start filing bugs.

Step 5: Heartbeat monitoring for component build pipelines

Lit component libraries often have automated build and publish pipelines. Monitor them with heartbeats:

# .github/workflows/publish.yml
name: Publish Components

on:
  push:
    branches: [main]

jobs:
  publish:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Install and build
        run: |
          npm ci
          npm run build

      - name: Publish to registry
        run: npm publish

      - name: Ping Vigilmon heartbeat
        if: success()
        run: curl -s "${{ secrets.VIGILMON_LIT_HEARTBEAT_URL }}"

In Vigilmon:

Click New Monitor → Heartbeat
Set the expected interval to match your publish cadence
Copy the ping URL
Add it as VIGILMON_LIT_HEARTBEAT_URL in your CI secrets

If the pipeline fails or stops running, you're alerted before consumers try to install a stale version.

Step 6: Configure alerts

Go to Notifications → New Channel in Vigilmon:

Slack:

Create an incoming webhook at api.slack.com/apps
Paste the URL into Vigilmon's Slack channel config
Enable it on all your monitors

Email:

Add your email as a notification channel
Enable on all monitors

Down alert:

🔴 DOWN: yourapp.example.com/health
Status: 503
Region: Asia-Pacific
4 minutes ago

Recovery:

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

For a shared component library, route alerts to the design system team channel — a broken CDN affects every consuming app simultaneously.

Step 7: Public status page

Create a status page for your component platform:

Go to Status Pages → New Status Page in Vigilmon
Add your app HTTP monitor, CDN monitor, and heartbeat
Publish and link from your component library docs

Badge for your README:

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

Consumer teams can check status themselves before filing a "components broke" bug report.

What you've built

| What | How | |------|-----| | Health endpoint | Express/Node.js route at /health | | HTTP uptime check | Vigilmon HTTP monitor | | Page rendering check | Vigilmon keyword monitor | | CDN component check | Vigilmon HTTP monitor on CDN URL | | Build pipeline monitoring | Heartbeat ping after publish | | Slack/email alerts | Vigilmon notification channels | | Status page | Vigilmon public status page |

Lit components are fast and lightweight. Now your infrastructure is just as visible.

Next steps

Monitor each critical component endpoint with its own HTTP check
Track response time trends — CDN latency spikes affect component load across all consuming apps
Add heartbeats for any tooling that generates or validates your component stories

Get started free at vigilmon.online.