Monitoring TanStack Start Applications with Vigilmon

TanStack Start is a new full-stack React framework built on top of TanStack Router, Vinxi, and Vite. It brings type-safe routing, server functions, and server-side rendering to the React ecosystem with a modern, file-based approach.

As TanStack Start apps move to production, monitoring becomes critical. SSR failures silently return blank pages. Server function errors go undetected until a user reports them. A deployment that breaks a server-side dependency can take down your entire app.

Vigilmon gives you the external health check that catches these failures the moment they happen — before your users notice.

This tutorial covers:

• A health check API route in your TanStack Start app
• Vigilmon HTTP monitor setup
• Alerting on SSR and server function failures
• Heartbeat monitoring for background tasks

Prerequisites

• A TanStack Start project (using @tanstack/start and Vinxi)
• A free account at vigilmon.online

Step 1: Add a health check API route

TanStack Start supports API routes alongside your React pages. Create a dedicated /api/health route that verifies your real dependencies.

app/routes/api/health.ts:

import { json } from '@tanstack/start';
import { createAPIFileRoute } from '@tanstack/start/api';

export const APIRoute = createAPIFileRoute('/api/health')({
  GET: async ({ request }) => {
    const checks: Record<string, string> = {};
    let healthy = true;

    // Database connectivity probe
    try {
      // Replace with your actual DB client
      await db.execute('SELECT 1');
      checks.database = 'ok';
    } catch (err) {
      checks.database = `error: ${(err as Error).message}`;
      healthy = false;
    }

    // External API dependency
    try {
      const resp = await fetch(process.env.DOWNSTREAM_API_URL + '/ping', {
        signal: AbortSignal.timeout(3_000),
      });
      checks.downstream = resp.ok ? 'ok' : `http_${resp.status}`;
      if (!resp.ok) healthy = false;
    } catch (err) {
      checks.downstream = `error: ${(err as Error).message}`;
      healthy = false;
    }

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

If you're using a different server adapter (e.g., Express under the hood via Vinxi), you can also wire a plain Express-style handler:

// app/routes/api/health.ts (server function alternative)
import { createServerFn } from '@tanstack/start';

export const getHealthStatus = createServerFn({ method: 'GET' }).handler(
  async () => {
    const checks: Record<string, string> = {};
    let healthy = true;

    try {
      await db.execute('SELECT 1');
      checks.database = 'ok';
    } catch (err) {
      checks.database = `error: ${(err as Error).message}`;
      healthy = false;
    }

    return { status: healthy ? 'ok' : 'degraded', checks };
  }
);

Keep the health check fast and stateless — it runs on every external probe and under load from Vigilmon's check intervals.

Step 2: Test the health endpoint locally

# Start your TanStack Start dev server
npm run dev

# In another terminal, test the health route
curl http://localhost:3000/api/health

Expected response:

{
  "status": "ok",
  "checks": {
    "database": "ok",
    "downstream": "ok"
  },
  "timestamp": "2026-06-30T10:00:00.000Z"
}

Build and verify in production mode before deploying:

npm run build
npm start

curl http://localhost:3000/api/health

Step 3: Set up Vigilmon HTTP monitoring

1. Sign up at vigilmon.online — free, no card required
2. Click New Monitor → HTTP
3. URL: https://yourapp.com/api/health
4. Check interval: 1 minute (paid) or 5 minutes (free)
5. Response timeout: 10 seconds
6. Expected status: 200
7. Under Advanced, enable JSON body assertion:
   • Path: status
   • Expected value: ok
8. Save

Vigilmon now probes your TanStack Start app from multiple external locations every minute and alerts you the moment it returns non-200 or "status": "degraded".

Step 4: Alert on SSR failures and deployment regressions

TanStack Start's SSR means a server-side error can result in a 500 response or a broken React hydration — both of which Vigilmon catches through the HTTP monitor.

Add your alert channels in Vigilmon at Notifications → New Channel:

Slack:

1. Create an incoming webhook in your Slack workspace at api.slack.com/apps
2. Paste the webhook URL into Vigilmon
3. Enable it on your TanStack Start monitors

Email: Add your on-call or team email as a notification channel.

When a deployment regression causes Vigilmon to alert, you'll get:

🔴 DOWN: yourapp.com/api/health
Status: 503 (degraded: database error)
Duration: 1m 42s

Common SSR failure scenarios Vigilmon catches:

| Failure | Symptom | Vigilmon alert | |---|---|---| | Database connection lost | /api/health returns 503 | Within 1 minute | | Missing env variable in production | Server function throws | 500 on health route | | Broken import in server bundle | SSR crashes | 500 on all routes | | External API rate-limited | downstream check fails | degraded status |

Step 5: Deploy to a production host

TanStack Start supports multiple deployment targets via Vinxi presets. Set the correct adapter in app.config.ts:

Vercel:

// app.config.ts
import { defineConfig } from '@tanstack/start/config';

export default defineConfig({
  server: {
    preset: 'vercel',
  },
});

Netlify:

export default defineConfig({
  server: {
    preset: 'netlify',
  },
});

Node.js (self-hosted):

export default defineConfig({
  server: {
    preset: 'node-server',
  },
});

Once deployed, update your Vigilmon monitor URL to your production domain.

Step 6: Heartbeat monitoring for background tasks

If your TanStack Start app runs background jobs (via a queue, node-cron, or a separate worker process), add a Vigilmon heartbeat to detect silent failures.

// workers/email-digest.ts
import fetch from 'node-fetch';

async function main() {
  try {
    await sendDailyDigests();

    const heartbeatUrl = process.env.VIGILMON_DIGEST_HEARTBEAT;
    if (heartbeatUrl) {
      await fetch(heartbeatUrl, { method: 'GET' });
    }

    console.log('Email digest complete');
    process.exit(0);
  } catch (err) {
    console.error('Email digest failed:', err);
    process.exit(1);
    // Vigilmon will alert when no ping is received within the grace period
  }
}

main();

In Vigilmon, create a Heartbeat Monitor:

1. Click New Monitor → Heartbeat
2. Set the expected ping interval to match your job schedule
3. Set a grace period 20–30% longer than the interval
4. Copy the heartbeat URL and add it as VIGILMON_DIGEST_HEARTBEAT in your environment

Step 7: Public status page

Go to Status Pages → New Status Page in Vigilmon, add your TanStack Start monitors, and publish at a custom subdomain. Add the status badge to your site's footer or README:

<img src="https://vigilmon.online/badge/your-monitor-slug.svg" alt="Service Status" />

What you've built

| What | How | |------|-----| | Health endpoint | /api/health API route checking real dependencies | | External uptime monitoring | Vigilmon HTTP monitor on production URL | | SSR failure alerts | HTTP monitor catches 500s and degraded status | | Deployment regression detection | Vigilmon alerts within 1 minute of a bad deploy | | Background task monitoring | Heartbeat ping in scheduled workers | | Slack/email alerts | Vigilmon notification channels | | Status page | Vigilmon public status page with badge |

TanStack Start handles the framework complexity. Vigilmon handles the visibility. You'll know about failures before your users do.

Next steps

• Add separate monitors for staging and production environments
• Watch Vigilmon's response time history to catch gradual server-side slowdowns
• Monitor your health endpoint from multiple regions for global coverage

Get started free at vigilmon.online.