How to Add API Status Monitoring to Your Next.js App

#typescript #nextjs #webdev #api

If your Next.js app depends on third-party APIs like Stripe, OpenAI, or Twilio, you've probably experienced the frustration of debugging issues only to discover the external service was down. Your users don't care whose fault it is—they just know your app isn't working.

In this guide, you'll learn how to integrate real-time API status monitoring into your Next.js application.

Why Monitor Third-Party API Status?

The Problem: Silent Failures

Your production Next.js app is humming along, then suddenly your perfectly good code starts failing with ETIMEDOUT errors. You spend 30 minutes debugging before checking Twitter and discovering Stripe is having an outage.

The Solution: Proactive Status Awareness

// Check status before attempting the operation
const stripeStatus = await checkAPIStatus('stripe');

if (stripeStatus.status !== 'operational') {
  return {
    error: 'Payment processing is temporarily unavailable.',
    canRetry: true
  };
}

Setting Up the Status Service

// lib/api-status.ts
import { unstable_cache } from 'next/cache';

export type APIStatus = 'operational' | 'degraded' | 'partial_outage' | 'major_outage';

export async function checkAPIStatus(service: string): Promise<StatusResponse> {
  const res = await fetch(`https://apistatuscheck.com/api/${service}/status`);
  return res.json();
}

Creating Status Badge Components

// components/StatusBadge.tsx
export function StatusBadge({ service }: { service: string }) {
  return (
    <img 
      src={`https://apistatuscheck.com/api/badge/${service}`}
      alt={`${service} status`}
    />
  );
}

Graceful Degradation Patterns

The key to handling API outages is implementing graceful degradation:

Circuit Breakers - Stop calling failing services
Retry Logic - Exponential backoff for transient failures
Fallback Behavior - Queue operations or show cached data
Clear User Messaging - Tell users what's happening

Webhook Notifications

Set up webhooks to get notified when APIs go down:

// app/api/webhook/status/route.ts
export async function POST(request: Request) {
  const { service, status, timestamp } = await request.json();

  if (status !== 'operational') {
    await sendSlackAlert(`⚠️ ${service} is ${status}`);
  }

  return Response.json({ received: true });
}