Monitoring Analog Angular Apps with Vigilmon

Analog is the Angular meta-framework — bringing file-based routing, server-side rendering, API routes, and Nitro-powered deployments to the Angular ecosystem. It lets you build full-stack Angular apps with the same file-based conventions that Next.js brought to React. Like any SSR framework, Analog apps have multiple layers that can fail independently: the SSR renderer can error while static assets load fine, API routes can time out while the frontend remains cached. Vigilmon monitors each of these layers so you catch failures before users do.

What You'll Set Up

• HTTP uptime monitor for the Analog app's SSR frontend
• HTTP monitors for Analog API routes
• Cron heartbeat for scheduled tasks and server-side jobs
• SSL certificate monitoring for your custom domain
• Alert channels for your team

Prerequisites

• An Analog app deployed to a server, Vercel, Netlify, or a Node.js host
• A free Vigilmon account

Step 1: Monitor the Analog SSR Frontend

Analog apps render Angular components on the server before sending HTML to the browser. Monitor the main URL to confirm SSR is working, not just that a static CDN edge is responding.

1. Log in to vigilmon.online and click Add Monitor.
2. Set Type to HTTP / HTTPS.
3. Enter your app's URL: https://myapp.example.com.
4. Set Check interval to 1 minute.
5. Set Expected HTTP status to 200.
6. Under Advanced, add a Response body contains check for a string only present in server-rendered output — for example, the Angular app's root component tag: <app-root.
7. Click Save.

The body check distinguishes a live SSR response from a CDN-cached error page or a maintenance page that coincidentally returns 200.

Step 2: Add a Health API Route to Your Analog App

Analog supports API routes in src/server/routes/. Add a dedicated health endpoint that Vigilmon can probe to confirm the Node.js server is running and connected to dependencies.

Create src/server/routes/health.get.ts:

import { defineEventHandler } from 'h3';

export default defineEventHandler(async (event) => {
  const checks: Record<string, string> = {};

  // Check database connectivity
  try {
    await db.query('SELECT 1');
    checks.database = 'ok';
  } catch {
    checks.database = 'error';
  }

  const allOk = Object.values(checks).every(v => v === 'ok');

  setResponseStatus(event, allOk ? 200 : 503);

  return {
    status: allOk ? 'ok' : 'degraded',
    checks,
    timestamp: new Date().toISOString(),
  };
});

This creates a GET /api/health endpoint (Analog maps health.get.ts to GET /health under your API prefix). Add a Vigilmon HTTP monitor for it:

1. In Vigilmon, click Add Monitor → HTTP / HTTPS.
2. Enter: https://myapp.example.com/api/health.
3. Set Expected HTTP status to 200.
4. Set Check interval to 1 minute.
5. Click Save.

Step 3: Monitor Individual API Routes

Analog API routes are independent Nitro handlers. A route that connects to a specific database table or external service can fail while the rest of the app is healthy. Monitor critical API routes individually.

For a critical route like GET /api/posts:

// src/server/routes/posts.get.ts
import { defineEventHandler } from 'h3';

export default defineEventHandler(async (event) => {
  const posts = await db.query('SELECT id, title FROM posts LIMIT 10');
  return posts;
});

Add a Vigilmon monitor:

1. Click Add Monitor → HTTP / HTTPS.
2. Enter: https://myapp.example.com/api/posts.
3. Set Expected HTTP status to 200.
4. Under Advanced, add a Response body contains check for "id" to confirm the response is real data.
5. Click Save.

Apply the same pattern to any other revenue-critical or user-facing API route. Each gets its own monitor so failures are isolated and actionable.

Step 4: Heartbeat for Scheduled Tasks

Analog apps built with Nitro can run scheduled tasks using Nitro's scheduled handlers. Monitor these with heartbeats so you know if a background job stops executing.

// src/server/plugins/scheduled-task.ts
import { defineNitroPlugin } from 'nitropack/runtime/plugin';

export default defineNitroPlugin((nitroApp) => {
  // Nitro scheduled tasks are configured in nitro.config.ts
  // This plugin handles post-execution reporting
});

In nitro.config.ts:

export default defineNitroConfig({
  scheduledTasks: {
    '0 * * * *': 'tasks/hourly-sync',
  },
});

// src/server/tasks/hourly-sync.ts
import { defineTask } from 'nitropack/runtime';

export default defineTask({
  meta: { name: 'hourly-sync', description: 'Sync data from external API' },
  async run() {
    await syncExternalData();

    // Ping Vigilmon heartbeat on success
    await fetch('https://vigilmon.online/heartbeat/abc123');

    return { result: 'success' };
  },
});

Create a Vigilmon Cron Heartbeat with an interval of 60 minutes. If the sync job fails or Nitro's scheduler stops running, the heartbeat expires and Vigilmon alerts.

Step 5: SSL Certificate Monitoring

Analog apps on custom domains need valid SSL certificates. Add certificate monitoring alongside your HTTP monitors:

1. Open the HTTP monitor for your main app URL.
2. Enable Monitor SSL certificate.
3. Set Alert when certificate expires in less than 21 days.
4. Click Save.

If you deploy to Vercel or Netlify, they manage certificates automatically — but monitoring still catches edge cases like domain verification failures or plan downgrades that disable TLS. For self-hosted Analog apps on a VPS with Caddy or nginx + Certbot, the 21-day window gives you time to investigate and renew before users see certificate errors.

Step 6: Configure Alert Channels

1. Go to Alert Channels in Vigilmon.
2. Add your team's Slack channel, email address, or webhook URL.
3. On the SSR frontend monitor, set Consecutive failures before alert to 2 — Nitro's Node.js server may restart briefly during deployments.
4. On API route monitors, set Consecutive failures to 2.
5. On the heartbeat, set Consecutive missed pings to 1 — a missed scheduled task is immediately worth investigating.

For CI/CD deployments, use the Vigilmon API to suppress alerts during your deploy window:

# In your deploy script
MONITOR_ID="your-monitor-id"

# Open maintenance window
curl -X POST https://vigilmon.online/api/maintenance \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -d "{\"monitor_id\": \"$MONITOR_ID\", \"duration_minutes\": 5}"

# Deploy
npm run build && npm run deploy

# Window closes automatically after 5 minutes

Summary

| Monitor | Target | What It Catches | |---|---|---| | HTTP + body check | https://myapp.example.com | SSR renderer down or returning errors | | HTTP health | /api/health | Node.js server or DB connectivity | | HTTP | Critical API routes | Individual route failures | | Cron heartbeat | Scheduled Nitro tasks | Background job stopped running | | SSL certificate | App domain | Certificate expiry |

Analog brings Angular into the full-stack SSR era — but SSR means server-side failures that frontend-only monitoring misses entirely. With Vigilmon watching your SSR responses, API routes, scheduled tasks, and certificates, you have complete coverage of every layer an Analog app depends on.