tutorial

How to Monitor Bit.dev with Vigilmon

Add production-grade uptime monitoring to your Bit.dev component platform — health endpoints, Vigilmon HTTP monitors, and alert configuration.

How to Monitor Bit.dev with Vigilmon

Bit.dev lets teams share, discover, and collaborate on UI components across projects. Whether you're hosting your own Bit scope server or consuming components from bit.cloud, downtime in your component registry breaks CI pipelines, design systems, and developer workflows across every team that depends on it.

This tutorial walks through:

  • A health endpoint for your Bit scope server (or gateway)
  • An HTTP uptime monitor in Vigilmon
  • A keyword monitor that confirms your scope is accessible
  • Heartbeat monitoring for Bit export/import pipeline jobs
  • Slack or email alerts when anything breaks

Setup takes about 15 minutes.


Step 1: Add a health endpoint to your Bit scope server

If you self-host a Bit scope (using bit start or a custom gateway), expose a lightweight health route. Here's an Express-based example you can add to a gateway or proxy layer:

// server.js (or your existing Express/Fastify gateway)
app.get('/health', async (req, res) => {
  const checks = {};
  let healthy = true;

  // Check Bit scope reachability
  try {
    const response = await fetch('http://localhost:3000/api/scope');
    checks.scope = response.ok ? 'ok' : 'degraded';
    if (!response.ok) healthy = false;
  } catch {
    checks.scope = 'error';
    healthy = false;
  }

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

Verify locally:

curl http://localhost:3000/health
# {"status":"ok","service":"bit-scope","checks":{"scope":"ok"},"timestamp":"..."}

For teams using bit.cloud instead of self-hosting, your health check can verify the public API endpoint your CI uses:

app.get('/health', async (req, res) => {
  try {
    const r = await fetch('https://api.bit.cloud/v1/scopes/ping');
    res.status(r.ok ? 200 : 503).json({ status: r.ok ? 'ok' : 'degraded' });
  } catch {
    res.status(503).json({ status: 'error' });
  }
});

Step 2: Set up an HTTP monitor in Vigilmon

Deploy your gateway or proxy, then connect it to Vigilmon:

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

Vigilmon probes from multiple global regions. A 503 or timeout triggers an immediate alert before your CI pipelines start failing silently.


Step 3: Add a keyword monitor to verify scope accessibility

The HTTP monitor checks server responsiveness. A keyword monitor checks that your scope is actually returning component data — catching broken deploys that leave the server running but the registry empty.

In Vigilmon:

  1. Click New Monitor → Keyword
  2. URL: https://your-bit-scope.example.com/ (or your scope's web UI)
  3. Keyword: your scope or team name, e.g. my-org or components
  4. Match type: Contains
  5. Expected status: 200
  6. Save

This catches cases where the scope server starts but the backing store (S3, database, or local disk) is unavailable.


Step 4: Monitor your Bit CI pipeline with heartbeats

Bit export/import jobs in CI are the first thing to break silently when your scope has an issue. A heartbeat monitor ensures your pipeline is completing on schedule:

# .github/workflows/release.yml
- name: Export components
  run: bit export

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

In Vigilmon:

  1. Click New Monitor → Heartbeat
  2. Set the expected interval to match your release cadence (e.g., 1 hour for nightly, 24 hours for weekly)
  3. Copy the ping URL
  4. Add it as VIGILMON_BIT_HEARTBEAT_URL in your CI secrets

If the export job crashes or is never triggered, Vigilmon alerts you after one missed interval — before stale components silently propagate to dependents.


Step 5: Configure alerts

Go to Notifications → New Channel in Vigilmon and pick your channel:

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 your scope HTTP monitor and heartbeat

Email:

  1. Add your address as a notification channel
  2. Enable it on all monitors

A down alert looks like:

🔴 DOWN: bit-scope.example.com/health
Status: 503
Region: US-East
2 minutes ago

Recovery alert:

✅ RECOVERED: bit-scope.example.com/health
Downtime: 4 minutes

Route scope-down alerts to the team channel so every engineer sees it immediately — a broken component registry blocks everyone.


Step 6: Public status page

Create a status page to give your engineering org visibility into scope health:

  1. Go to Status Pages → New Status Page in Vigilmon
  2. Add your HTTP and heartbeat monitors
  3. Publish and share the URL with your team

Add a badge to your design system docs:

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

Engineers checking why bit import is hanging now have a self-service health check.


What you've built

| What | How | |------|-----| | Health endpoint | Express/gateway route at /health | | HTTP uptime check | Vigilmon HTTP monitor | | Registry content check | Vigilmon keyword monitor | | CI pipeline monitoring | Heartbeat ping after bit export | | Slack/email alerts | Vigilmon notification channels | | Team status page | Vigilmon public status page |

Your component platform is shared infrastructure. Vigilmon keeps it visible when it breaks.


Next steps

  • Add a separate monitor for each Bit scope if you run multiple
  • Track response time trends — sluggish scope responses slow every bit import across your org
  • Add heartbeats for any automated component version bump scripts

Get started free at vigilmon.online.

Monitor your app with Vigilmon

Free plan — 5 monitors, no credit card required. Up and running in 60 seconds.

Start free →