How to Monitor Your Remix Application with Vigilmon

#remix #reactrouter #monitoring #webdev

Remix (now React Router v7) is a full-stack web framework that runs on the server and the client. Its server-side rendering, data loading, and form handling happen in loaders and actions — which means your app health depends on both your Remix server and any backend services your loaders call.

This guide covers how to monitor a Remix application end-to-end with Vigilmon.

Remix Monitoring Fundamentals

Remix apps can be deployed in multiple ways:

Node.js server (Express adapter, Fastify adapter)
Cloudflare Workers (edge)
Vercel / Netlify (serverless functions)
Fly.io (containerized Node.js)

Each deployment has different failure modes, but the monitoring strategy is similar.

Step 1: Monitor Your App Root URL

Start with the simplest check — is your Remix app serving HTML?

Monitor: GET https://yourapp.com
Type: HTTP(S)
Expected status: 200
Keyword check: your app name or a unique string from your HTML
Check interval: 1 minute

Enable multi-region monitoring. Remix apps on Cloudflare Workers run across many edge locations — verifying from multiple regions catches partial outages.

Step 2: Create a Dedicated Health Route

Add a health route that checks your critical dependencies:

// app/routes/health.tsx (or health.ts for API-only)
import { json } from '@remix-run/node';

export async function loader() {
  const checks: Record<string, string> = {};

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

  // Check external API
  try {
    const response = await fetch('https://api.example.com/ping', {
      signal: AbortSignal.timeout(3000),
    });
    checks.externalApi = response.ok ? 'ok' : 'degraded';
  } catch {
    checks.externalApi = 'error';
  }

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

  return json(
    { status: allOk ? 'ok' : 'degraded', checks },
    { status: allOk ? 200 : 503 }
  );
}

Monitor this route:

Monitor: GET https://yourapp.com/health
Expected status: 200
Keyword check: "status":"ok"

Step 3: Monitor Your Remix Loader Dependencies

Remix loaders call external services. If those services go down, your pages throw errors:

// app/routes/dashboard.tsx
export async function loader() {
  // If this fails, Remix returns 500
  const data = await fetchDashboardData();
  return json(data);
}

For critical routes, add a lighter-weight monitoring endpoint that tests the data pipeline:

// app/routes/api.canary.tsx
export async function loader() {
  try {
    await fetchDashboardData({ limit: 1 }); // Minimal query
    return json({ status: 'ok' });
  } catch (error) {
    return json({ status: 'error', message: error.message }, { status: 503 });
  }
}

Monitor: GET https://yourapp.com/api/canary
Expected status: 200
Keyword check: "ok"

Step 4: Monitor Session and Auth Flows

If your Remix app uses session-based auth, monitor that the login route is accessible:

Monitor: GET https://yourapp.com/login
Expected status: 200
Keyword check: "Sign in" or "Log in"

For apps using OAuth (Auth0, Clerk, etc.), monitor the callback route:

Monitor: GET https://yourapp.com/auth/callback
Expected status: 302 or 400 (redirect without code is fine; 500 is not)

Step 5: Monitor Cloudflare Workers Deployment (if applicable)

Remix on Cloudflare Workers has unique failure modes:

Worker size limits (1MB compressed)
Worker CPU time limits (10-50ms per request)
Durable Objects connectivity

Monitor from multiple regions to catch edge-specific issues:

Monitor: GET https://yourapp.com/health
Regions: US East, US West, EU, APAC
Expected status: 200
Response time warning: 500ms (edge should be fast)

Step 6: Heartbeat Monitoring for Background Jobs

If your Remix app runs background processing (Inngest, Trigger.dev, custom cron), add heartbeat monitoring:

In your background job:

async function dailyReport() {
  await generateAndSendReport();

  // Ping Vigilmon on success
  await fetch('https://hb.vigilmon.online/YOUR_HEARTBEAT_ID');
}

Configure in Vigilmon:

Grace period: 25 hours (allows for 1-hour drift in daily jobs)
Alert: immediate on miss

Step 7: SSL Certificate Monitoring

Remix apps almost always run on HTTPS. Add SSL monitoring:

Monitor: SSL certificate for yourapp.com
Warning: 30 days before expiry
Critical: 14 days before expiry

Automated SSL renewal via Let's Encrypt can fail silently. SSL monitoring ensures you find out 30 days before expiry rather than the morning your certificate expires.

Recommended Remix Monitor Set

Monitor	URL	Check
App root	`GET /`	200 + keyword
Health endpoint	`GET /health`	200 + JSON status
Data canary	`GET /api/canary`	200 + "ok"
Login page	`GET /login`	200 + keyword
SSL certificate	SSL check	30/14 day warning
Background jobs	Heartbeat	Per job schedule