DEV Community

Vigilmon
Vigilmon

Posted on

How to Monitor Your Vercel Deployments with Vigilmon

Vercel makes deployment effortless, but it doesn't make your app immune to failure. Serverless function timeouts, edge function errors, build cache invalidation issues, and downstream service failures can all cause your Vercel-deployed app to return errors to real users — silently, and without alerting you.

Here's how to set up external monitoring for Vercel deployments with Vigilmon.

What Can Go Wrong with Vercel Deployments

Vercel handles infrastructure, but these failures still happen:

  • Serverless function timeouts: Free plans have a 10s limit; paid plans up to 300s. Long API calls hit these limits.
  • Edge function errors: Middleware running at the edge can fail and return 500 to all requests
  • Environment variable misconfiguration: A missing env var after deployment causes runtime errors
  • Database connection limits: Vercel's serverless architecture creates many connections per request; Postgres connection limits get hit
  • Third-party API failures: Stripe, Auth0, or Clerk outages cascade to your app

Vigilmon's external monitoring gives you visibility into all of these.

Setting Up a Health Endpoint on Vercel

Next.js (App Router)

Create app/api/health/route.ts:

import { NextResponse } from 'next/server';

export const runtime = 'nodejs'; // or 'edge'

export async function GET() {
  const checks: Record<string, unknown> = {
    status: 'ok',
    timestamp: new Date().toISOString(),
    region: process.env.VERCEL_REGION ?? 'unknown',
    deploymentId: process.env.VERCEL_DEPLOYMENT_ID ?? 'unknown',
  };

  // Check database
  try {
    // await prisma.$queryRaw`SELECT 1`
    checks.database = 'ok';
  } catch {
    return NextResponse.json(
      { ...checks, database: 'error', status: 'degraded' },
      { status: 503 }
    );
  }

  return NextResponse.json(checks, { status: 200 });
}
Enter fullscreen mode Exit fullscreen mode

Next.js (Pages Router)

Create pages/api/health.ts:

import type { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method !== 'GET') {
    return res.status(405).json({ error: 'Method not allowed' });
  }

  res.status(200).json({
    status: 'ok',
    timestamp: new Date().toISOString(),
    region: process.env.VERCEL_REGION,
  });
}
Enter fullscreen mode Exit fullscreen mode

SvelteKit on Vercel

// src/routes/api/health/+server.ts
import { json } from '@sveltejs/kit';

export async function GET() {
  return json({
    status: 'ok',
    platform: 'vercel',
    timestamp: new Date().toISOString(),
  });
}
Enter fullscreen mode Exit fullscreen mode

Configuring Vigilmon

  1. Log in to vigilmon.online.
  2. Click Add MonitorHTTP(S).
  3. URL: https://your-app.vercel.app/api/health (or your custom domain)
  4. Expected status: 200
  5. Check interval: 2 minutes
  6. Response time alert: > 5000ms (Vercel function cold starts can be slow)

Important: Always monitor your production custom domain, not the .vercel.app URL. If your DNS configuration breaks, the custom domain goes down while .vercel.app stays up — you want the monitor to catch that.

What to Monitor Beyond Health

For a Next.js application on Vercel, set up monitors for:

Monitor URL Purpose
Homepage https://your-app.com/ SSR/SSG functioning
API health https://your-app.com/api/health Backend functions working
Auth page https://your-app.com/login Auth provider reachable
Critical page https://your-app.com/dashboard Protected routes accessible

Use Vigilmon's keyword monitoring to verify the response contains expected text (e.g., your app name or a known heading).

Monitoring Vercel Preview Deployments

Preview deployments get unique URLs like your-app-git-branch-team.vercel.app. These change per-commit, making them impractical to monitor continuously. Instead:

  • Monitor only your production deployment
  • For staging, maintain a stable staging custom domain (e.g., staging.your-app.com) and monitor that

Edge Functions and Middleware

Vercel middleware runs before your Next.js app and can fail independently. Monitor the root path with a keyword check:

GET https://your-app.com/
Expected keyword: "Your App Name"
Enter fullscreen mode Exit fullscreen mode

If middleware fails (authentication error, geoblocking misconfiguration), the request never reaches Next.js, and this monitor catches it.

Vercel + PlanetScale / Neon / Supabase

Serverless databases designed for Vercel's architecture have their own failure modes. Add a database-specific monitor:

// Check Neon connectivity
import { neon } from '@neondatabase/serverless';

export async function GET() {
  try {
    const sql = neon(process.env.DATABASE_URL!);
    await sql`SELECT 1`;
    return NextResponse.json({ status: 'ok', db: 'neon' });
  } catch {
    return NextResponse.json({ status: 'error', db: 'neon' }, { status: 503 });
  }
}
Enter fullscreen mode Exit fullscreen mode

Handling Vercel Function Timeout Alerts

If Vigilmon reports response times near your function timeout limit, investigate:

  1. Check Vercel's Function Logs in your dashboard
  2. Look for long-running database queries
  3. Consider increasing the timeout limit in vercel.json:
{
  "functions": {
    "app/api/health/route.ts": {
      "maxDuration": 30
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Free Monitoring for Vercel Apps

Vigilmon's free tier covers 10 monitors — enough for a typical Next.js/SvelteKit app's critical paths. Start monitoring your Vercel deployment in under 2 minutes at vigilmon.online.

Top comments (0)