{"id":24872,"plugin_id":"plugin_connector_690a90ec05c881918afb6a55dc9bbaa1","kind":"skill","collection_source":null,"comparison_source":null,"observed_at":"2026-09-30T23:18:44.438Z","digest":"dd2ebabe0592735ecbdb0271dcef0b0d605804b4521423f7ce3308aa7d067dbf","against":5339,"payload":{"name":"observability","description":"Vercel Observability expert guidance — Drains (logs, traces, speed insights, web analytics), Web Analytics, Speed Insights, runtime logs, custom events, OpenTelemetry integration, and monitoring dashboards. Use when instrumenting, debugging, or optimizing application performance and user experience on Vercel.","included_files":[{"relative_path":"agents/openai.yaml","size_in_bytes":179}],"skill_md_contents":"---\nname: observability\ndescription: Vercel Observability expert guidance — Drains (logs, traces, speed insights, web analytics), Web Analytics, Speed Insights, runtime logs, custom events, OpenTelemetry integration, and monitoring dashboards. Use when instrumenting, debugging, or optimizing application performance and user experience on Vercel.\nmetadata:\n  priority: 6\n  docs:\n    - \"https://vercel.com/docs/observability\"\n    - \"https://vercel.com/docs/observability/otel-overview\"\n  sitemap: \"https://vercel.com/sitemap/docs.xml\"\n  pathPatterns:\n    - 'instrumentation.ts'\n    - 'instrumentation.js'\n    - 'src/instrumentation.ts'\n    - 'src/instrumentation.js'\n    - 'app/layout.*'\n    - 'src/app/layout.*'\n    - 'pages/_app.*'\n    - 'src/pages/_app.*'\n    - 'apps/*/instrumentation.ts'\n    - 'apps/*/instrumentation.js'\n    - 'apps/*/app/layout.*'\n    - 'apps/*/src/app/layout.*'\n    - 'apps/*/pages/_app.*'\n    - 'apps/*/src/pages/_app.*'\n    - 'sentry.client.config.*'\n    - 'sentry.server.config.*'\n    - 'sentry.edge.config.*'\n  bashPatterns:\n    - '\\bvercel\\s+logs?\\b'\n    - '\\bvercel\\s+logs?\\s+.*--follow\\b'\n    - '\\bvercel\\s+logs?\\s+.*--level\\b'\n    - '\\bvercel\\s+logs?\\s+.*--since\\b'\n    - '\\bcurl\\s+.*deployments.*events\\b'\n    - '\\bnpm\\s+(install|i|add)\\s+[^\\n]*@vercel/analytics\\b'\n    - '\\bpnpm\\s+(install|i|add)\\s+[^\\n]*@vercel/analytics\\b'\n    - '\\bbun\\s+(install|i|add)\\s+[^\\n]*@vercel/analytics\\b'\n    - '\\byarn\\s+add\\s+[^\\n]*@vercel/analytics\\b'\n    - '\\bnpm\\s+(install|i|add)\\s+[^\\n]*@vercel/speed-insights\\b'\n    - '\\bpnpm\\s+(install|i|add)\\s+[^\\n]*@vercel/speed-insights\\b'\n    - '\\bbun\\s+(install|i|add)\\s+[^\\n]*@vercel/speed-insights\\b'\n    - '\\byarn\\s+add\\s+[^\\n]*@vercel/speed-insights\\b'\n    - '\\bnpm\\s+(install|i|add)\\s+[^\\n]*@sentry/nextjs\\b'\n    - '\\bpnpm\\s+(install|i|add)\\s+[^\\n]*@sentry/nextjs\\b'\n    - '\\bbun\\s+(install|i|add)\\s+[^\\n]*@sentry/nextjs\\b'\n    - '\\byarn\\s+add\\s+[^\\n]*@sentry/nextjs\\b'\n    - '\\bnpm\\s+(install|i|add)\\s+[^\\n]*@sentry/node\\b'\n    - '\\bpnpm\\s+(install|i|add)\\s+[^\\n]*@sentry/node\\b'\n    - '\\bbun\\s+(install|i|add)\\s+[^\\n]*@sentry/node\\b'\n    - '\\byarn\\s+add\\s+[^\\n]*@sentry/node\\b'\n    - '\\bnpm\\s+(install|i|add)\\s+[^\\n]*@datadog/browser-rum\\b'\n    - '\\bpnpm\\s+(install|i|add)\\s+[^\\n]*@datadog/browser-rum\\b'\n    - '\\bbun\\s+(install|i|add)\\s+[^\\n]*@datadog/browser-rum\\b'\n    - '\\byarn\\s+add\\s+[^\\n]*@datadog/browser-rum\\b'\n    - '\\bnpm\\s+(install|i|add)\\s+[^\\n]*\\bcheckly\\b'\n    - '\\bpnpm\\s+(install|i|add)\\s+[^\\n]*\\bcheckly\\b'\n    - '\\bbun\\s+(install|i|add)\\s+[^\\n]*\\bcheckly\\b'\n    - '\\byarn\\s+add\\s+[^\\n]*\\bcheckly\\b'\n    - '\\bnpm\\s+(install|i|add)\\s+[^\\n]*\\bnewrelic\\b'\n    - '\\bpnpm\\s+(install|i|add)\\s+[^\\n]*\\bnewrelic\\b'\n    - '\\bbun\\s+(install|i|add)\\s+[^\\n]*\\bnewrelic\\b'\n    - '\\byarn\\s+add\\s+[^\\n]*\\bnewrelic\\b'\n  promptSignals:\n    phrases:\n      - \"add logging\"\n      - \"add logs\"\n      - \"set up logging\"\n      - \"setup logging\"\n      - \"configure logging\"\n      - \"structured logging\"\n      - \"log drain\"\n      - \"log drains\"\n      - \"vercel analytics\"\n      - \"speed insights\"\n      - \"web analytics\"\n      - \"opentelemetry\"\n      - \"otel\"\n      - \"instrumentation\"\n      - \"monitoring\"\n      - \"set up monitoring\"\n      - \"add observability\"\n      - \"track errors\"\n      - \"error tracking\"\n      - \"sentry\"\n      - \"datadog\"\n      - \"check the logs\"\n      - \"show me the error\"\n      - \"what went wrong\"\n      - \"where did it fail\"\n      - \"show me the logs\"\n      - \"find the error\"\n      - \"why did it fail\"\n      - \"debug the error\"\n    allOf:\n      - [add, logging]\n      - [add, monitoring]\n      - [set up, logs]\n      - [configure, analytics]\n      - [vercel, logs]\n      - [vercel, analytics]\n      - [track, performance]\n      - [track, errors]\n    anyOf:\n      - \"logging\"\n      - \"monitoring\"\n      - \"analytics\"\n      - \"observability\"\n      - \"telemetry\"\n      - \"traces\"\n      - \"metrics\"\n      - \"debug\"\n      - \"debugging\"\n      - \"stuck\"\n      - \"hanging\"\n      - \"hung\"\n      - \"waiting\"\n      - \"stalled\"\n      - \"spinning\"\n      - \"timeout\"\n      - \"slow\"\n      - \"pending\"\n      - \"unresponsive\"\n    minScore: 6\n---\n\n# Vercel Observability\n\nYou are an expert in Vercel's observability stack — runtime logs, structured logging, Drains, Web Analytics, Speed Insights, and monitoring integrations. **Always start with logging.** When something is stuck, slow, or broken, the first step is always to check or add logs.\n\n## Structured Logging Baseline\n\nAdd this to every API route and server action as a minimum. If the user reports something stuck, hanging, or slow, verify this baseline exists first:\n\n```ts\nconst start = Date.now();\nconsole.log(JSON.stringify({ level: \"info\", msg: \"start\", route: \"/api/example\", requestId: req.headers.get(\"x-vercel-id\") }));\n// ... your logic ...\nconsole.log(JSON.stringify({ level: \"info\", msg: \"done\", route: \"/api/example\", ms: Date.now() - start }));\n// On error:\nconsole.error(JSON.stringify({ level: \"error\", msg: \"failed\", route: \"/api/example\", error: err.message, ms: Date.now() - start }));\n```\n\n## Runtime Logs\n\nVercel provides real-time logs for all function invocations.\n\n### Structured Logging\n\n```ts\n// app/api/process/route.ts\nexport async function POST(req: Request) {\n  const start = Date.now()\n  const data = await req.json()\n\n  // Structured logs appear in Vercel's log viewer\n  console.log(JSON.stringify({\n    level: 'info',\n    message: 'Processing request',\n    requestId: req.headers.get('x-vercel-id'),\n    payload_size: JSON.stringify(data).length,\n  }))\n\n  try {\n    const result = await processData(data)\n    console.log(JSON.stringify({\n      level: 'info',\n      message: 'Request completed',\n      duration_ms: Date.now() - start,\n    }))\n    return Response.json(result)\n  } catch (error) {\n    console.error(JSON.stringify({\n      level: 'error',\n      message: 'Processing failed',\n      error: error instanceof Error ? error.message : String(error),\n      duration_ms: Date.now() - start,\n    }))\n    return Response.json({ error: 'Internal error' }, { status: 500 })\n  }\n}\n```\n\n### Next.js Instrumentation\n\n```ts\n// instrumentation.ts (Next.js 16)\nexport async function register() {\n  if (process.env.NEXT_RUNTIME === 'nodejs') {\n    // Initialize monitoring on server startup\n    const { initMonitoring } = await import('./lib/monitoring')\n    initMonitoring()\n  }\n}\n```\n\n### Runtime Logs via REST API\n\nQuery deployment runtime logs programmatically. The endpoint returns `application/stream+json` — a streaming response where each line is a separate JSON object.\n\n```bash\n# Stream runtime logs for a deployment (returns application/stream+json)\ncurl -N -H \"Authorization: Bearer $VERCEL_TOKEN\" \\\n  \"https://api.vercel.com/v3/deployments/<deployment-id>/events\" \\\n  --max-time 120\n```\n\n> **Streaming guidance:** The response is unbounded — always set a timeout (`--max-time` in curl, `AbortController` with `setTimeout` in fetch). Parse line-by-line as NDJSON. Each line contains `{ timestamp, text, level, source }`.\n\n```ts\n// Programmatic streaming with timeout\nconst controller = new AbortController()\nconst timeout = setTimeout(() => controller.abort(), 60_000) // 60s max\n\nconst res = await fetch(\n  `https://api.vercel.com/v3/deployments/${deploymentId}/events`,\n  {\n    headers: { Authorization: `Bearer ${process.env.VERCEL_TOKEN}` },\n    signal: controller.signal,\n  }\n)\n\nconst reader = res.body!.getReader()\nconst decoder = new TextDecoder()\nlet buffer = ''\n\ntry {\n  while (true) {\n    const { done, value } = await reader.read()\n    if (done) break\n    buffer += decoder.decode(value, { stream: true })\n    const lines = buffer.split('\\n')\n    buffer = lines.pop()! // keep incomplete line in buffer\n    for (const line of lines) {\n      if (!line.trim()) continue\n      const event = JSON.parse(line)\n      console.log(`[${event.level}] ${event.text}`)\n    }\n  }\n} finally {\n  clearTimeout(timeout)\n}\n```\n\n> **MCP alternative:** Use `get_runtime_logs` via the Vercel MCP server for agent-friendly log queries without managing streams directly. See `⤳ skill: vercel-api`.\n\n## Web Analytics\n\nPrivacy-friendly, first-party analytics with no cookie banners required.\n\n### Installation\n\n```bash\nnpm install @vercel/analytics\n```\n\n### Setup (Next.js App Router)\n\n```tsx\n// app/layout.tsx\nimport { Analytics } from '@vercel/analytics/next'\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n  return (\n    <html>\n      <body>\n        {children}\n        <Analytics />\n      </body>\n    </html>\n  )\n}\n```\n\n### Custom Events (Pro/Enterprise)\n\nTrack business-specific events beyond pageviews.\n\n```ts\nimport { track } from '@vercel/analytics'\n\n// Track a conversion\ntrack('purchase', {\n  product: 'pro-plan',\n  value: 20,\n  currency: 'USD',\n})\n\n// Track a feature usage\ntrack('feature_used', {\n  name: 'ai-chat',\n  duration_ms: 3200,\n})\n```\n\n### Server-Side Tracking\n\n```ts\nimport { track } from '@vercel/analytics/server'\n\nexport async function POST(req: Request) {\n  const data = await req.json()\n  await processOrder(data)\n\n  track('order_completed', {\n    order_id: data.id,\n    total: data.total,\n  })\n\n  return Response.json({ success: true })\n}\n```\n\n## Speed Insights\n\nReal-user performance monitoring built on Core Web Vitals.\n\n### Installation\n\n```bash\nnpm install @vercel/speed-insights\n```\n\n### Setup (Next.js App Router)\n\n```tsx\n// app/layout.tsx\nimport { SpeedInsights } from '@vercel/speed-insights/next'\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n  return (\n    <html>\n      <body>\n        {children}\n        <SpeedInsights />\n      </body>\n    </html>\n  )\n}\n```\n\n### Metrics Tracked\n\n| Metric | What It Measures | Good Threshold |\n|--------|-----------------|----------------|\n| LCP | Largest Contentful Paint | < 2.5s |\n| INP | Interaction to Next Paint | < 200ms |\n| CLS | Cumulative Layout Shift | < 0.1 |\n| FCP | First Contentful Paint | < 1.8s |\n| TTFB | Time to First Byte | < 800ms |\n\n### Performance Attribution\n\nSpeed Insights attributes metrics to specific routes and pages, letting you identify which pages are slow and why.\n\n## Drains\n\nDrains forward observability data from Vercel to external endpoints. They are the primary mechanism for exporting logs, traces, Speed Insights, and Web Analytics data to third-party platforms.\n\n> **Plan requirement:** Drains require a **Pro or Enterprise** plan. For Hobby plans, see the [Fallback Guidance](#fallback-guidance-no-drains) section below.\n\n### Data Types\n\nDrains can forward multiple categories of telemetry:\n\n| Data Type | What It Contains | Use Case |\n|-----------|-----------------|----------|\n| **Logs** | Runtime function logs, build logs, static access logs | Centralized log aggregation |\n| **Traces** | OpenTelemetry-compatible distributed traces | End-to-end request tracing |\n| **Speed Insights** | Core Web Vitals and performance metrics | Performance monitoring pipelines |\n| **Web Analytics** | Pageviews, custom events, visitor data | Analytics data warehousing |\n\n### Supported Formats\n\n| Format | Protocol | Best For |\n|--------|----------|----------|\n| JSON | HTTPS POST | Custom backends, generic log collectors |\n| NDJSON | HTTPS POST | Streaming-friendly consumers, high-volume pipelines |\n| Syslog | TLS syslog | Traditional log management (rsyslog, syslog-ng) |\n\n### Setting Up Drains\n\nDrains are configured via the **Vercel Dashboard** at `https://vercel.com/dashboard/{team}/~/settings/log-drains` or the **REST API**.\n\n#### Via Dashboard\n\n1. Open `https://vercel.com/dashboard/{team}/~/settings/log-drains` (replace `{team}` with your team slug)\n2. Click **Add Log Drain**\n3. Select the drain type (JSON, NDJSON, or syslog) and enter the endpoint URL\n4. Choose which environments and sources to include\n5. Click **Create** to activate the drain\n\n#### Via REST API (`/v1/drains`)\n\n```bash\n# List all drains\ncurl -s -H \"Authorization: Bearer $VERCEL_TOKEN\" \\\n  \"https://api.vercel.com/v1/drains?teamId=$TEAM_ID\" | jq\n\n# Create a JSON drain\ncurl -X POST -H \"Authorization: Bearer $VERCEL_TOKEN\" \\\n  -H \"Content-Type: application/json\" \\\n  \"https://api.vercel.com/v1/drains?teamId=$TEAM_ID\" \\\n  -d '{\n    \"url\": \"https://your-endpoint.example.com/logs\",\n    \"type\": \"json\",\n    \"sources\": [\"lambda\", \"edge\", \"static\"],\n    \"environments\": [\"production\"]\n  }'\n\n# Test a drain (sends a test payload to your endpoint)\ncurl -X POST -H \"Authorization: Bearer $VERCEL_TOKEN\" \\\n  \"https://api.vercel.com/v1/drains/<drain-id>/test?teamId=$TEAM_ID\"\n\n# Update a drain (change URL, sources, or environments)\ncurl -X PATCH -H \"Authorization: Bearer $VERCEL_TOKEN\" \\\n  -H \"Content-Type: application/json\" \\\n  \"https://api.vercel.com/v1/drains/<drain-id>?teamId=$TEAM_ID\" \\\n  -d '{\n    \"url\": \"https://new-endpoint.example.com/logs\",\n    \"environments\": [\"production\", \"preview\"]\n  }'\n\n# Delete a drain\ncurl -X DELETE -H \"Authorization: Bearer $VERCEL_TOKEN\" \\\n  \"https://api.vercel.com/v1/drains/<drain-id>?teamId=$TEAM_ID\"\n```\n\n### Web Analytics Drains Reference\n\nWhen a drain is configured to receive Web Analytics data, payloads arrive as batched events. The format depends on your drain type.\n\n#### JSON Payload Schema\n\n```json\n[\n  {\n    \"type\": \"pageview\",\n    \"url\": \"https://example.com/blog/post-1\",\n    \"referrer\": \"https://google.com\",\n    \"timestamp\": 1709568000000,\n    \"geo\": { \"country\": \"US\", \"region\": \"CA\", \"city\": \"San Francisco\" },\n    \"device\": { \"os\": \"macOS\", \"browser\": \"Chrome\", \"isBot\": false },\n    \"projectId\": \"prj_xxxxx\",\n    \"environment\": \"production\"\n  },\n  {\n    \"type\": \"custom_event\",\n    \"name\": \"purchase\",\n    \"url\": \"https://example.com/checkout\",\n    \"properties\": { \"product\": \"pro-plan\", \"value\": 20 },\n    \"timestamp\": 1709568100000,\n    \"geo\": { \"country\": \"US\" },\n    \"device\": { \"os\": \"macOS\", \"browser\": \"Chrome\", \"isBot\": false },\n    \"projectId\": \"prj_xxxxx\",\n    \"environment\": \"production\"\n  }\n]\n```\n\n#### NDJSON Payload Format\n\nEach line is a separate JSON object (one event per line):\n\n```\n{\"type\":\"pageview\",\"url\":\"https://example.com/\",\"timestamp\":1709568000000,\"geo\":{\"country\":\"US\"},\"device\":{\"browser\":\"Chrome\"},...}\n{\"type\":\"pageview\",\"url\":\"https://example.com/about\",\"timestamp\":1709568001000,\"geo\":{\"country\":\"DE\"},\"device\":{\"browser\":\"Firefox\"},...}\n{\"type\":\"custom_event\",\"name\":\"signup\",\"url\":\"https://example.com/register\",\"timestamp\":1709568002000,...}\n```\n\n> **Ingestion tip:** For NDJSON, process line-by-line as events arrive. This format is preferred for high-volume pipelines where batch parsing overhead matters.\n\n### Security: Signature Verification\n\nVercel signs every drain payload with an HMAC-SHA1 signature in the `x-vercel-signature` header. **Always verify signatures in production** to prevent spoofed data.\n\n> **Critical:** You must verify against the **raw request body** (not a parsed/re-serialized version). JSON parsing and re-stringifying can change key order or whitespace, breaking the signature match.\n\n```ts\nimport { createHmac, timingSafeEqual } from 'crypto'\n\nfunction verifyDrainSignature(rawBody: string, signature: string, secret: string): boolean {\n  const expected = createHmac('sha1', secret).update(rawBody).digest('hex')\n  // Use timing-safe comparison to prevent timing attacks\n  if (expected.length !== signature.length) return false\n  return timingSafeEqual(Buffer.from(expected), Buffer.from(signature))\n}\n```\n\nUsage in a drain endpoint:\n\n```ts\n// app/api/drain/route.ts\nexport async function POST(req: Request) {\n  const rawBody = await req.text()\n  const signature = req.headers.get('x-vercel-signature')\n  const secret = process.env.DRAIN_SECRET!\n\n  if (!signature || !verifyDrainSignature(rawBody, signature, secret)) {\n    return new Response('Unauthorized', { status: 401 })\n  }\n\n  const events = JSON.parse(rawBody)\n  // Process verified events...\n  return new Response('OK', { status: 200 })\n}\n```\n\n> **Secret management:** The drain signing secret is shown once when you create the drain. Store it in an environment variable (e.g., `DRAIN_SECRET`). If lost, delete and recreate the drain.\n\n### OpenTelemetry Integration\n\nVercel exports traces in OpenTelemetry-compatible format via Drains. Configure an OTel-compatible drain endpoint at `https://vercel.com/dashboard/{team}/~/settings/log-drains` → **Add Log Drain** → select **OTLP** format, or via the REST API.\n\n### Vendor Integrations\n\n```bash\n# Install via Marketplace (recommended — auto-configures drain)\nvercel integration add datadog\n```\n\nOr manually create a drain at `https://vercel.com/dashboard/{team}/~/settings/log-drains` → **Add Log Drain**, or via REST API, pointing to:\n\n| Vendor | Endpoint | Auth Header |\n|--------|----------|-------------|\n| **Datadog** | `https://http-intake.logs.datadoghq.com/api/v2/logs` | `DD-API-KEY` |\n| **Honeycomb** | `https://api.honeycomb.io/1/batch/<dataset>` | `X-Honeycomb-Team` |\n\n### Fallback Guidance (No Drains)\n\nIf drains are unavailable (Hobby plan or not yet configured), use these alternatives:\n\n| Need | Alternative | How |\n|------|-------------|-----|\n| View runtime logs | **Vercel Dashboard** | `https://vercel.com/{team}/{project}/deployments` → select deployment → Logs tab |\n| Stream logs from terminal | **Vercel CLI** | `vercel logs <deployment-url> --follow` (see `⤳ skill: vercel-cli`) |\n| Query logs programmatically | **MCP / REST API** | `get_runtime_logs` tool or `/v3/deployments/:id/events` (see `⤳ skill: vercel-api`) |\n| Monitor errors post-deploy | **CLI** | `vercel logs <url> --level error --since 1h` |\n| Web Analytics data | **Dashboard only** | `https://vercel.com/{team}/{project}/analytics` |\n| Performance metrics | **Dashboard only** | `https://vercel.com/{team}/{project}/speed-insights` |\n\n> **Upgrade path:** When ready for centralized observability, upgrade to Pro and configure drains at `https://vercel.com/dashboard/{team}/~/settings/log-drains` or via REST API. The drain setup is typically < 5 minutes.\n\n### Deploy Preflight Observability\n\nBefore promoting to production, verify observability readiness:\n\n- **Drains check**: Query configured drains via MCP `list_drains` or REST API. If no drains are configured on a Pro/Enterprise plan, warn:\n  > ⚠️ No drains configured. Production errors won't be forwarded to external monitoring.\n  > Configure drains via Dashboard or REST API before promoting. See `⤳ skill: observability`.\n- **Errored drains**: If any drain is in error state, warn and suggest remediation before deploying:\n  > ⚠️ Drain \"<url>\" is errored. Fix or recreate before production deploy to avoid monitoring gaps.\n- **Error monitoring**: Check that at least one of these is in place: configured drains, an error tracking integration (e.g., Sentry, Datadog via `vercel integration ls`), or `@vercel/analytics` in the project.\n- These are warnings, not blockers — the user may proceed after acknowledgment.\n\n### Post-Deploy Error Scan\n\nFor production deployments, wait 60 seconds after READY state, then scan for early runtime errors:\n\n```bash\nvercel logs <deployment-url> --level error --since 1h\n```\n\nOr via MCP if available: use `get_runtime_logs` with level filter `error`.\n\n**Interpret results:**\n\n| Finding | Action |\n|---------|--------|\n| No errors | ✓ Clean deploy — no runtime errors in first hour |\n| Errors detected | List error count and first 5 unique error messages. Suggest: check drain payloads for correlated traces, review function logs in Dashboard |\n| 500 status codes in logs | Correlate timestamps with drain data (if configured) or `vercel logs <url> --json` for structured output. Flag for immediate investigation |\n| Timeout errors | Check function duration limits in `vercel.json` or project settings. Consider increasing `maxDuration` |\n\n**Fallback (no drains):**\n\nIf no drains are configured, the error scan relies on CLI and Dashboard:\n\n```bash\n# Stream live errors\nvercel logs <deployment-url> --level error --follow\n\n# JSON output for parsing\nvercel logs <deployment-url> --level error --since 1h --json\n```\n\n> For richer post-deploy monitoring, configure drains to forward logs/traces to an external platform. See `⤳ skill: observability`.\n\n### Performance Audit Checklist\n\nRun through this when asked to optimize a Vercel application:\n\n1. **Measure first**: Check Speed Insights dashboard for real-user CWV data\n2. **Identify LCP element**: Use Chrome DevTools → Performance → identify the LCP element\n3. **Audit `'use client'`**: Every `'use client'` file ships JS to the browser — minimize\n4. **Check images**: All above-fold images use `next/image` with `priority`\n5. **Check fonts**: All fonts loaded via `next/font` (zero CLS)\n6. **Check third-party scripts**: All use `next/script` with correct strategy\n7. **Check data fetching**: Server Components fetch in parallel, no waterfalls\n8. **Check caching**: Cache Components used for expensive operations\n9. **Check bundle**: Run analyzer, look for low-hanging fruit\n10. **Check infrastructure**: Functions in correct region, Fluid Compute enabled\n\n## Monitoring Dashboard Patterns\n\n### Full-Stack Observability Setup\n\nCombine all Vercel observability tools for comprehensive coverage.\n\n```tsx\n// app/layout.tsx — complete observability setup\nimport { Analytics } from '@vercel/analytics/next'\nimport { SpeedInsights } from '@vercel/speed-insights/next'\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n  return (\n    <html>\n      <body>\n        {children}\n        <Analytics />\n        <SpeedInsights />\n      </body>\n    </html>\n  )\n}\n```\n\n### Custom Monitoring with `waitUntil`\n\nFire-and-forget telemetry that doesn't block responses.\n\n```ts\nimport { waitUntil } from '@vercel/functions'\n\nexport async function GET(req: Request) {\n  const start = Date.now()\n  const result = await fetchData()\n\n  // Send response immediately\n  const response = Response.json(result)\n\n  // Report metrics in background\n  waitUntil(async () => {\n    await reportMetric('api_latency', Date.now() - start, {\n      route: '/api/data',\n      status: 200,\n    })\n  })\n\n  return response\n}\n```\n\n### Error Tracking Pattern\n\n```ts\n// lib/error-reporting.ts\nexport async function reportError(error: unknown, context: Record<string, unknown>) {\n  const payload = {\n    message: error instanceof Error ? error.message : String(error),\n    stack: error instanceof Error ? error.stack : undefined,\n    timestamp: new Date().toISOString(),\n    ...context,\n  }\n\n  // Log for Vercel's runtime logs\n  console.error(JSON.stringify(payload))\n\n  // Also send to external service if configured\n  if (process.env.ERROR_WEBHOOK_URL) {\n    await fetch(process.env.ERROR_WEBHOOK_URL, {\n      method: 'POST',\n      headers: { 'Content-Type': 'application/json' },\n      body: JSON.stringify(payload),\n    })\n  }\n}\n```\n\n## Marketplace Observability Integrations\n\n### Sentry — Error & Performance Monitoring\n\nNative Vercel Marketplace integration. Auto-configures source maps and release tracking.\n\n```bash\nnpx @sentry/wizard@latest -i nextjs\n# Or install manually:\nnpm install @sentry/nextjs\n```\n\nSentry wizard creates `sentry.client.config.ts`, `sentry.server.config.ts`, and `sentry.edge.config.ts`. It also wraps `next.config.js` with `withSentryConfig`.\n\nInstall via Marketplace: `vercel integration add sentry`\n\n### Datadog — Full-Stack Monitoring\n\nAPM, logs, and Real User Monitoring (RUM). Auto-configures log drain on Marketplace install.\n\n```bash\nnpm install @datadog/browser-rum\n```\n\n```ts\nimport { datadogRum } from '@datadog/browser-rum'\n\ndatadogRum.init({\n  applicationId: process.env.NEXT_PUBLIC_DD_APPLICATION_ID!,\n  clientToken: process.env.NEXT_PUBLIC_DD_CLIENT_TOKEN!,\n  site: 'datadoghq.com',\n  service: 'my-app',\n  sessionSampleRate: 100,\n  trackResources: true,\n  trackLongTasks: true,\n})\n```\n\nInstall via Marketplace: `vercel integration add datadog`\n\n### Checkly — Synthetic Monitoring & Testing\n\nAPI and browser checks that run continuously against your deployments.\n\n```bash\nnpm install -D checkly\nnpx checkly init\n```\n\nCheckly integrates with Vercel deployment events to trigger checks on every deploy.\n\nInstall via Marketplace: `vercel integration add checkly`\n\n### New Relic — Application Performance Monitoring\n\nFull-stack observability with distributed tracing and alerting.\n\n```bash\nnpm install newrelic\n```\n\nRequires a `newrelic.js` config file at the project root. Install via Marketplace: `vercel integration add newrelic`\n\n## Decision Matrix\n\n| Need | Use | Why |\n|------|-----|-----|\n| Page views, traffic sources | Web Analytics | First-party, privacy-friendly |\n| Business event tracking | Web Analytics custom events | Track conversions, feature usage |\n| Core Web Vitals monitoring | Speed Insights | Real user data per route |\n| Function debugging | Runtime Logs (CLI `vercel logs` / Dashboard (`https://vercel.com/{team}/{project}/logs`) / REST) | Real-time, per-invocation logs |\n| Export logs to external platform | Drains (JSON/NDJSON/Syslog) | Centralize observability (Pro+) |\n| Export analytics data | Drains (Web Analytics type) | Warehouse pageviews + custom events (Pro+) |\n| OpenTelemetry traces | Drains (OTel-compatible endpoint) | Standards-based distributed tracing (Pro+) |\n| Post-response telemetry | `waitUntil` + custom reporting | Non-blocking metrics |\n| Server-side event tracking | `@vercel/analytics/server` | Track API-triggered events |\n| Hobby plan log access | CLI `vercel logs` + Dashboard (`https://vercel.com/{team}/{project}/logs`) | No drains needed |\n\n## Cross-References\n\n- **Drains REST API & runtime logs endpoint** → `⤳ skill: vercel-api` (Observability APIs section)\n- **CLI log streaming (`--follow`, `--since`, `--level`)** → `⤳ skill: vercel-cli` (Logs & Inspection section)\n- **Marketplace vendor integrations** → `⤳ skill: marketplace`\n\n## Official Documentation\n\n- [Vercel Analytics](https://vercel.com/docs/analytics)\n- [Speed Insights](https://vercel.com/docs/speed-insights)\n- [Runtime Logs](https://vercel.com/docs/logs/runtime)\n- [Drains Overview](https://vercel.com/docs/drains)\n- [Drains REST API](https://vercel.com/docs/rest-api/reference/endpoints/drains/retrieve-a-list-of-all-drains)\n- [Drains Security](https://vercel.com/docs/drains/security)\n- [Web Analytics Drains Reference](https://vercel.com/docs/drains/reference/analytics)\n- [Monitoring](https://vercel.com/docs/query/monitoring)\n- [@vercel/analytics npm](https://www.npmjs.com/package/@vercel/analytics)\n- [@vercel/speed-insights npm](https://www.npmjs.com/package/@vercel/speed-insights)\n"},"changes":[{"path":"/included_files","type":"changed","before":[],"after":[{"relative_path":"agents/openai.yaml","size_in_bytes":179}]}],"summary":"Fields changed: 1. /included_files.","summary_kind":"deterministic","summary_metadata":{}}