Implements end-to-end distributed tracing for Next.js 14+ applications using OpenTelemetry standards.
This skill provides a comprehensive framework for implementing OpenTelemetry in Next.js 14+ App Router environments. It automates the setup of the instrumentation hook, configures SDKs for both Node.js and browser runtimes, and provides standardized patterns for tracking requests across Server Components, API routes, and client-side interactions. By integrating with OTLP exporters and Vercel's observability stack, it enables developers to visualize complex request chains, identify performance bottlenecks, and link traces with structured logs for superior production debugging and system reliability.
Key Features
01Custom span creation for granular business logic and database monitoring
02Seamless integration with Next.js instrumentation.ts lifecycle hooks
03Unified browser and server-side tracing for full-stack visibility
040 GitHub stars
05Native compatibility with Vercel OTel and OTLP-compliant backends
06Automatic tracing for React Server Components (RSC) and data fetching
Use Cases
01Debugging slow performance in complex React Server Component rendering chains
02Correlating application logs with specific trace IDs to resolve production errors faster
03Tracking distributed requests from a browser frontend through multiple backend microservices
