vercel-observabilityClaude Skill

Execute set up comprehensive observability for Vercel integrations with metrics, traces, and alerts.

1.9k Stars
259 Forks
2025/10/10

Install & Download

Linux / macOS:

请登录后查看安装命令

Windows (PowerShell):

请登录后查看安装命令

Download and extract to ~/.claude/skills/

namevercel-observability
descriptionSet up Vercel observability with runtime logs, analytics, log drains, and OpenTelemetry tracing. Use when implementing monitoring for Vercel deployments, setting up log drains, or configuring alerting for function errors and performance. Trigger with phrases like "vercel monitoring", "vercel metrics", "vercel observability", "vercel logs", "vercel alerts", "vercel tracing".
allowed-toolsRead, Write, Edit, Bash(vercel:*), Bash(curl:*)
version1.0.0
licenseMIT
authorJeremy Longshore <jeremy@intentsolutions.io>
compatible-withclaude-code, codex, openclaw
tags["saas","vercel","monitoring","observability","logging"]

Vercel Observability

Overview

Configure comprehensive observability for Vercel deployments using built-in analytics, runtime logs, log drains to external providers, OpenTelemetry integration, and custom instrumentation. Covers the full observability stack from function-level metrics to end-user experience monitoring.

Prerequisites

  • Vercel Pro or Enterprise plan (for log drains and extended retention)
  • External logging provider (Datadog, Axiom, Sentry) — optional
  • OpenTelemetry SDK — optional

Instructions

Step 1: Enable Vercel Analytics

In the Vercel dashboard:

  1. Go to Analytics tab
  2. Enable Web Analytics (Core Web Vitals, page views)
  3. Enable Speed Insights (real user performance data)
// For Next.js — add the analytics component
// src/app/layout.tsx
import { Analytics } from '@vercel/analytics/react';
import { SpeedInsights } from '@vercel/speed-insights/next';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Analytics />
        <SpeedInsights />
      </body>
    </html>
  );
}

Install: npm install @vercel/analytics @vercel/speed-insights

Step 2: Runtime Logs

# View runtime logs via CLI
vercel logs https://my-app.vercel.app --follow

# Filter by level
vercel logs https://my-app.vercel.app --level=error

# View logs via API
curl -s -H "Authorization: Bearer $VERCEL_TOKEN" \
  "https://api.vercel.com/v2/deployments/dpl_xxx/events?limit=50&direction=backward" \
  | jq '.[] | {timestamp: .created, level: .level, message: .text}'

Runtime logs include:

  • Function invocation start/end with duration
  • console.log/warn/error output from functions
  • Edge Middleware execution logs
  • HTTP request/response metadata

Step 3: Structured Logging in Functions

// lib/logger.ts — structured JSON logging
interface LogEntry {
  level: 'info' | 'warn' | 'error';
  message: string;
  requestId?: string;
  duration?: number;
  [key: string]: unknown;
}

export function log(entry: LogEntry): void {
  // Vercel captures console output as runtime logs
  const output = JSON.stringify({
    ...entry,
    timestamp: new Date().toISOString(),
    region: process.env.VERCEL_REGION,
    env: process.env.VERCEL_ENV,
  });

  switch (entry.level) {
    case 'error': console.error(output); break;
    case 'warn': console.warn(output); break;
    default: console.log(output);
  }
}

// Usage in API route:
export async function GET(request: Request) {
  const requestId = crypto.randomUUID();
  const start = Date.now();

  try {
    const data = await fetchData();
    log({ level: 'info', message: 'Fetched data', requestId, duration: Date.now() - start });
    return Response.json(data);
  } catch (error) {
    log({ level: 'error', message: 'Data fetch failed', requestId, error: String(error) });
    return Response.json({ error: 'Internal error', requestId }, { status: 500 });
  }
}

Step 4: Log Drains (External Providers)

Configure log drains to send all Vercel logs to your logging provider:

In dashboard: Settings > Log Drains > Add

Supported providers:

ProviderTypeSetup
DatadogHTTPAPI key + site URL
AxiomHTTPAPI token + dataset
SentryHTTPDSN
CustomHTTP/NDJSONAny HTTPS endpoint
Grafana LokiHTTPPush URL + auth

Log drain delivers:

  • Runtime logs: function invocations, console output
  • Build logs: build step output, warnings, errors
  • Static logs: CDN access logs (edge)
  • Firewall logs: WAF events
# Create a log drain via API
curl -X POST "https://api.vercel.com/v2/integrations/log-drains" \
  -H "Authorization: Bearer $VERCEL_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "name": "my-datadog-drain",
    "type": "json",
    "url": "https://http-intake.logs.datadoghq.com/api/v2/logs",
    "headers": {"DD-API-KEY": "your-datadog-api-key"},
    "sources": ["lambda", "edge", "build", "static"]
  }'

Step 5: OpenTelemetry Integration

// instrumentation.ts (Next.js 13.4+)
import { NodeSDK } from '@opentelemetry/sdk-node';
import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
import { getNodeAutoInstrumentations } from '@opentelemetry/auto-instrumentations-node';

export function register() {
  const sdk = new NodeSDK({
    traceExporter: new OTLPTraceExporter({
      url: process.env.OTEL_EXPORTER_OTLP_ENDPOINT,
    }),
    instrumentations: [getNodeAutoInstrumentations()],
    serviceName: 'my-vercel-app',
  });
  sdk.start();
}
// next.config.js
module.exports = {
  experimental: {
    instrumentationHook: true,
  },
};

Step 6: Error Tracking with Sentry

npx @sentry/wizard@latest -i nextjs
// sentry.client.config.ts
import * as Sentry from '@sentry/nextjs';

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  environment: process.env.VERCEL_ENV,
  release: process.env.VERCEL_GIT_COMMIT_SHA,
  tracesSampleRate: process.env.VERCEL_ENV === 'production' ? 0.1 : 1.0,
});

Monitoring Dashboard Checklist

MetricSourceAlert Threshold
Error rateRuntime logs> 1% of requests
P95 function latencyVercel Analytics> 2s
Cold start frequencyRuntime logs> 20% of invocations
Build success rateBuild logsAny failure
Core Web Vitals (LCP)Speed Insights> 2.5s
Edge cache hit rateStatic logs< 80%

Output

  • Vercel Analytics and Speed Insights enabled
  • Structured JSON logging in all functions
  • Log drains configured to external provider
  • Error tracking with Sentry or equivalent
  • OpenTelemetry tracing for distributed systems

Error Handling

ErrorCauseSolution
Logs missingLog retention expired (1hr free, 30d with Plus)Enable log drains for persistence
Analytics not trackingMissing <Analytics /> componentAdd to root layout
Log drain not receivingWrong URL or auth headersTest the endpoint directly with curl
Sentry not capturing errorsDSN not set in production envAdd NEXT_PUBLIC_SENTRY_DSN to Production scope
OTEL traces missinginstrumentation.ts not loadedEnable instrumentationHook in next.config.js

Resources

Next Steps

For incident response, see vercel-incident-runbook.

Similar Claude Skills & Agent Workflows