Monitoring Your Brisa App with Vigilmon: Health Checks, Heartbeats & Uptime Alerts

Brisa is a new full-stack web framework that brings server components and web components together natively — no client-side framework overhead, just fast HTML streaming from the server. But server-side rendering only works when your server is alive. Vigilmon gives you the visibility layer you need: continuous HTTP monitoring, heartbeat checks, and instant alerts routed to email or Slack.

What You'll Build

• A health API endpoint for your Brisa server
• Vigilmon HTTP monitors for your Brisa app and backend services
• A heartbeat for scheduled background tasks
• Alert channels (email and Slack)
• An uptime badge using a Brisa web component

Prerequisites

• A Brisa project (brisa CLI or custom setup)
• Node.js for the health endpoint
• A free Vigilmon account

Step 1: Add a Health Endpoint

Brisa runs server components on Node.js, so you can expose a health endpoint directly as a Brisa API route:

// src/api/health.ts
import type { RequestContext } from "brisa";

export function GET(req: Request, { store }: RequestContext) {
  return healthCheck();
}

async function healthCheck(): Promise<Response> {
  const checks: Record<string, string> = {};
  let degraded = false;

  // Database check
  try {
    // await db.query("SELECT 1");
    checks.database = "ok";
  } catch (err) {
    checks.database = `error: ${(err as Error).message}`;
    degraded = true;
  }

  // Cache check
  try {
    // await cache.ping();
    checks.cache = "ok";
  } catch (err) {
    checks.cache = `error: ${(err as Error).message}`;
    degraded = true;
  }

  // External service check
  try {
    const res = await fetch("https://api.external.com/health", {
      signal: AbortSignal.timeout(3000),
    });
    checks.external = res.ok ? "ok" : `http_${res.status}`;
  } catch {
    checks.external = "unreachable";
    degraded = true;
  }

  const body = JSON.stringify({
    status: degraded ? "degraded" : "ok",
    timestamp: new Date().toISOString(),
    checks,
  });

  return new Response(body, {
    status: degraded ? 503 : 200,
    headers: { "Content-Type": "application/json" },
  });
}

Test it:

curl http://localhost:3000/api/health | jq .
# {"status":"ok","timestamp":"2026-07-03T...","checks":{"database":"ok","cache":"ok","external":"ok"}}

Step 2: Configure Vigilmon HTTP Monitors

Log in to Vigilmon → Monitors → New Monitor:

Monitor 1: Brisa Application

| Field | Value | |---|---| | URL | https://yourapp.com/ | | Method | GET | | Expected status | 200 | | Expected body | A stable string from your rendered HTML (e.g. site title) | | Check interval | 1 minute |

Monitor 2: Health API

| Field | Value | |---|---| | URL | https://yourapp.com/api/health | | Method | GET | | Expected status | 200 | | Check interval | 1 minute |

Two monitors cover two failure classes independently: the Brisa server process and the underlying data layer.

Step 3: Heartbeat for Background Tasks

Server-side Brisa apps often run scheduled tasks — email digests, data revalidation, webhook processing. A Vigilmon heartbeat catches silent failures:

npm install node-cron

// src/scheduler.ts
import cron from "node-cron";

const VIGILMON_HEARTBEAT_URL = process.env.VIGILMON_HEARTBEAT_URL ?? "";

async function pingHeartbeat(): Promise<void> {
  if (!VIGILMON_HEARTBEAT_URL) return;
  try {
    await fetch(VIGILMON_HEARTBEAT_URL, { signal: AbortSignal.timeout(5000) });
  } catch {
    // Monitoring must never crash the job
  }
}

// Data revalidation — runs every 5 minutes
cron.schedule("*/5 * * * *", async () => {
  try {
    await revalidateServerData();
    await pingHeartbeat();
  } catch (err) {
    console.error("[scheduler] Revalidation failed:", err);
  }
});

async function revalidateServerData(): Promise<void> {
  // Invalidate stale server component caches, refresh data feeds, etc.
}

Set up the heartbeat in Vigilmon:

1. Monitors → New Heartbeat Monitor
2. Set Expected interval to 10 minutes (2× the cron interval)
3. Copy the ping URL to your .env:

VIGILMON_HEARTBEAT_URL=https://vigilmon.online/api/heartbeat/xxxxxxxx

Step 4: Display Uptime Status with a Brisa Web Component

One of Brisa's superpowers is native web components — no framework needed on the client. Here's a minimal status badge web component:

// src/web-components/status-badge.tsx
import type { WebContext } from "brisa";

const BADGE_URL = "https://vigilmon.online/api/badge/your-monitor-id.svg";
const STATUS_URL = "https://vigilmon.online/status/your-monitor-slug";

export default function StatusBadge({}, { state }: WebContext) {
  const loaded = state<boolean>(false);

  return (
    <a
      href={STATUS_URL}
      target="_blank"
      rel="noopener noreferrer"
      aria-label="Service uptime status"
      style={{ display: "inline-flex", alignItems: "center" }}
    >
      <img
        src={BADGE_URL}
        alt="Uptime"
        width={120}
        height={20}
        onLoad={() => (loaded.value = true)}
        style={{
          opacity: loaded.value ? 1 : 0,
          transition: "opacity 0.2s",
        }}
      />
    </a>
  );
}

Use it in any Brisa server component:

// src/pages/index.tsx
export default function HomePage() {
  return (
    <main>
      <h1>Welcome</h1>
      <footer>
        <status-badge />
      </footer>
    </main>
  );
}

Brisa automatically registers the web component and streams the shell HTML from the server — the badge hydrates on the client with zero extra framework bundle.

Step 5: Set Up Alert Channels

In Vigilmon's Alert Channels settings:

Email

1. Alert Channels → Email → add your on-call email
2. Attach to both HTTP monitors and the heartbeat

Slack

1. Create a Slack Incoming Webhook for #alerts
2. Alert Channels → Webhook → paste the URL
3. Payload template:

{
  "text": "🚨 *{{ monitor.name }}* is DOWN\n{{ monitor.url }}\nStatus: {{ event.status }}\n<https://vigilmon.online|Open Vigilmon>"
}

Step 6: Verify Everything Works

# 1. Health endpoint
curl -s https://yourapp.com/api/health | jq .

# 2. Kill the DB connection → confirm health returns 503
# Expected: Vigilmon alerts within 2 minutes

# 3. Remove VIGILMON_HEARTBEAT_URL and let the scheduler run
# Expected: heartbeat alert fires after the grace window

# 4. Vigilmon → "Test Alert" → confirm delivery to Slack/email

Summary

| Monitor | What It Catches | |---|---| | HTTP app check | Brisa server crash, broken deploys, HTML streaming failures | | HTTP health API | Database, cache, and external service failures | | Heartbeat | Scheduler crashes, silent data revalidation failures |

Next Steps

• Create separate monitors for staging vs. production
• Use Vigilmon's response time graphs to track Brisa server component TTFB over time
• Configure multi-channel alerting: email for low-severity, Slack for critical

Ready to get started? Sign up for Vigilmon free — have your first monitor running in under 5 minutes.