vercel-observability
Set 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".
Best use case
vercel-observability is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Set 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".
Teams using vercel-observability should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/vercel-observability/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How vercel-observability Compares
| Feature / Agent | vercel-observability | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Set 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".
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
Related Guides
AI Agents for Coding
Browse AI agent skills for coding, debugging, testing, refactoring, code review, and developer workflows across Claude, Cursor, and Codex.
Best AI Skills for Claude
Explore the best AI skills for Claude and Claude Code across coding, research, workflow automation, documentation, and agent operations.
ChatGPT vs Claude for Agent Skills
Compare ChatGPT and Claude for AI agent skills across coding, writing, research, and reusable workflow execution.
SKILL.md Source
# 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)
```typescript
// 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
```bash
# 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
```typescript
// 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:
| Provider | Type | Setup |
|----------|------|-------|
| Datadog | HTTP | API key + site URL |
| Axiom | HTTP | API token + dataset |
| Sentry | HTTP | DSN |
| Custom | HTTP/NDJSON | Any HTTPS endpoint |
| Grafana Loki | HTTP | Push 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
```bash
# 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
```typescript
// 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();
}
```
```javascript
// next.config.js
module.exports = {
experimental: {
instrumentationHook: true,
},
};
```
### Step 6: Error Tracking with Sentry
```bash
npx @sentry/wizard@latest -i nextjs
```
```typescript
// 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
| Metric | Source | Alert Threshold |
|--------|--------|----------------|
| Error rate | Runtime logs | > 1% of requests |
| P95 function latency | Vercel Analytics | > 2s |
| Cold start frequency | Runtime logs | > 20% of invocations |
| Build success rate | Build logs | Any failure |
| Core Web Vitals (LCP) | Speed Insights | > 2.5s |
| Edge cache hit rate | Static 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
| Error | Cause | Solution |
|-------|-------|----------|
| Logs missing | Log retention expired (1hr free, 30d with Plus) | Enable log drains for persistence |
| Analytics not tracking | Missing `<Analytics />` component | Add to root layout |
| Log drain not receiving | Wrong URL or auth headers | Test the endpoint directly with curl |
| Sentry not capturing errors | DSN not set in production env | Add `NEXT_PUBLIC_SENTRY_DSN` to Production scope |
| OTEL traces missing | instrumentation.ts not loaded | Enable `instrumentationHook` in next.config.js |
## Resources
- [Vercel Observability](https://vercel.com/docs/observability)
- [Runtime Logs](https://vercel.com/docs/logs/runtime)
- [Vercel Analytics](https://vercel.com/docs/analytics)
- [Speed Insights](https://vercel.com/docs/speed-insights)
- [Log Drains](https://vercel.com/docs/observability/log-drains)
- [OpenTelemetry + Next.js](https://nextjs.org/docs/app/building-your-application/optimizing/open-telemetry)
## Next Steps
For incident response, see `vercel-incident-runbook`.Related Skills
windsurf-observability
Monitor Windsurf AI adoption, feature usage, and team productivity metrics. Use when tracking AI feature usage, measuring ROI, setting up dashboards, or analyzing Cascade effectiveness across your team. Trigger with phrases like "windsurf monitoring", "windsurf metrics", "windsurf analytics", "windsurf usage", "windsurf adoption".
webflow-observability
Set up observability for Webflow integrations — Prometheus metrics for API calls, OpenTelemetry tracing, structured logging with pino, Grafana dashboards, and alerting for rate limits, errors, and latency. Trigger with phrases like "webflow monitoring", "webflow metrics", "webflow observability", "monitor webflow", "webflow alerts", "webflow tracing".
vercel-webhooks-events
Implement Vercel webhook handling with signature verification and event processing. Use when setting up webhook endpoints, processing deployment events, or building integrations that react to Vercel deployment lifecycle. Trigger with phrases like "vercel webhook", "vercel events", "vercel deployment.ready", "handle vercel events", "vercel webhook signature".
vercel-upgrade-migration
Upgrade Vercel CLI, Node.js runtime, and Next.js framework versions with breaking change detection. Use when upgrading Vercel CLI versions, migrating Node.js runtimes, or updating Next.js between major versions on Vercel. Trigger with phrases like "upgrade vercel", "vercel migration", "vercel breaking changes", "update vercel CLI", "next.js upgrade on vercel".
vercel-security-basics
Apply Vercel security best practices for secrets, headers, and access control. Use when securing API keys, configuring security headers, or auditing Vercel security configuration. Trigger with phrases like "vercel security", "vercel secrets", "secure vercel", "vercel headers", "vercel CSP".
vercel-sdk-patterns
Production-ready Vercel REST API patterns with typed fetch wrappers and error handling. Use when integrating with the Vercel API programmatically, building deployment tools, or establishing team coding standards for Vercel API calls. Trigger with phrases like "vercel SDK patterns", "vercel API wrapper", "vercel REST API client", "vercel best practices", "idiomatic vercel API".
vercel-reliability-patterns
Implement reliability patterns for Vercel deployments including circuit breakers, retry logic, and graceful degradation. Use when building fault-tolerant serverless functions, implementing retry strategies, or adding resilience to production Vercel services. Trigger with phrases like "vercel reliability", "vercel circuit breaker", "vercel resilience", "vercel fallback", "vercel graceful degradation".
vercel-reference-architecture
Implement a Vercel reference architecture with layered project structure and best practices. Use when designing new Vercel projects, reviewing project structure, or establishing architecture standards for Vercel applications. Trigger with phrases like "vercel architecture", "vercel project structure", "vercel best practices layout", "how to organize vercel project".
vercel-rate-limits
Handle Vercel API rate limits, implement retry logic, and configure WAF rate limiting. Use when hitting 429 errors, implementing retry logic, or setting up rate limiting for your Vercel-deployed API endpoints. Trigger with phrases like "vercel rate limit", "vercel throttling", "vercel 429", "vercel retry", "vercel backoff", "vercel WAF rate limit".
vercel-prod-checklist
Vercel production deployment checklist with rollback and promotion procedures. Use when deploying to production, preparing for launch, or implementing go-live and instant rollback procedures. Trigger with phrases like "vercel production", "deploy vercel prod", "vercel go-live", "vercel launch checklist", "vercel promote".
vercel-policy-guardrails
Implement lint rules, CI policy checks, and automated guardrails for Vercel projects. Use when setting up code quality rules, preventing secret exposure, or enforcing deployment policies for Vercel applications. Trigger with phrases like "vercel policy", "vercel lint", "vercel guardrails", "vercel best practices check", "vercel secret scan".
vercel-performance-tuning
Optimize Vercel deployment performance with caching, bundle optimization, and cold start reduction. Use when experiencing slow page loads, optimizing Core Web Vitals, or reducing serverless function cold start times. Trigger with phrases like "vercel performance", "optimize vercel", "vercel latency", "vercel caching", "vercel slow", "vercel cold start".