How to Monitor Your Remix Application with Vigilmon

Remix is a full-stack web framework built on React Router that emphasizes server-side rendering, progressive enhancement, and web platform standards. Its nested routing and loader/action pattern make it powerful for data-heavy applications — but production Remix apps need external uptime monitoring just like any other service.

This guide shows you how to add health monitoring to a Remix application using Vigilmon.

Remix Deployment Modes and Failure Risks

Remix can run on different runtimes depending on your deployment target:

• Node.js (Express adapter): Long-running server process — can crash
• Cloudflare Workers: Edge runtime — region-specific failures
• Vercel/Netlify: Serverless — cold start timeouts, env var issues
• Fly.io: Container — process restart delays

Vigilmon monitors from the outside, so it works regardless of which adapter you're using.

Step 1: Create a Health Check Resource Route

In Remix, resource routes are files that export a loader (or action) but no default React component. Create one at:

app/routes/health.ts

import { json } from '@remix-run/node';
import type { LoaderFunctionArgs } from '@remix-run/node';

export async function loader({ request }: LoaderFunctionArgs) {
  return json(
    {
      status: 'ok',
      timestamp: new Date().toISOString(),
      env: process.env.NODE_ENV,
    },
    { status: 200 }
  );
}

This creates a GET /health endpoint that returns 200 when your app is alive.

Adding Database Health Check

Extend the loader to verify your database connection:

import { json } from '@remix-run/node';
import { db } from '~/db.server';

export async function loader() {
  try {
    // Test DB connectivity
    await db.$queryRaw`SELECT 1`;
    return json({ status: 'ok', db: 'connected' }, { status: 200 });
  } catch (err) {
    console.error('Health check failed:', err);
    return json(
      { status: 'error', db: 'disconnected' },
      { status: 503 }
    );
  }
}

Step 2: Deploy and Verify the Endpoint

After deploying:

curl https://yourapp.com/health
# Expected: {"status":"ok","timestamp":"...","env":"production"}

Step 3: Add a Vigilmon Monitor

1. Sign up at vigilmon.online (free plan available)
2. Click New Monitor → HTTP Monitor
3. Enter https://yourapp.com/health as the URL
4. Set interval: 60 seconds
5. Expected status: 200
6. Save

Vigilmon will send an immediate alert if the endpoint returns anything other than 200, or if it times out.

Step 4: Set Up Alerts

Email Alerts

Automatic — just verify your email on signup.

Slack Integration

In your Vigilmon dashboard:

1. Go to Settings → Notifications
2. Add a Slack webhook URL
3. Choose the channel (e.g., #production-alerts)

Webhook Alerts

For custom integrations or PagerDuty:

1. Settings → Notifications → Add Webhook
2. Enter your endpoint URL
3. Vigilmon POSTs a JSON payload on state changes

Monitoring Remix on Specific Platforms

Fly.io

Remix runs great on Fly.io as a Node.js process. Add fly.toml health checks alongside Vigilmon:

[services.ports]
  handlers = ["http"]
  port = 80

[[services.http_checks]]
  interval = 30000
  timeout = 5000
  path = "/health"

But Fly.io's internal checks only restart your container — they don't notify your team. Vigilmon handles the notification layer.

Vercel

Remix on Vercel runs as serverless functions. Monitor the /health route to catch deployment issues where the function cold-starts but fails due to missing env vars or misconfigured database URLs.

Monitoring Loader Performance

Vigilmon tracks response time for every check. If your /health endpoint's response time spikes, it often signals broader performance issues — slow database queries, memory pressure, or upstream API latency.

Set a response time alert threshold in Vigilmon to catch degradation before it becomes downtime.

Public Status Page

Vigilmon generates a hosted status page. Share it with users via a link in your Remix app:

// app/components/Footer.tsx
export function Footer() {
  return (
    <footer>
      <a href="https://status.vigilmon.online/your-org">
        System Status
      </a>
    </footer>
  );
}

Summary

Remix production apps need external uptime monitoring. Here's the 3-step setup:

1. Add app/routes/health.ts with a resource route loader
2. Configure a Vigilmon HTTP monitor on https://yourapp.com/health
3. Set up email + Slack alerts so your team is notified immediately

Start monitoring your Remix app for free →