Does it handle client-side tracing?

Yes, the skill provides a specialized TracingProvider component to track browser-side activity, including automatic instrumentation for fetch calls.

Can I use this with Vercel?

Yes, it includes specific instructions for using @vercel/otel which simplifies the setup process for applications deployed on the Vercel platform.

What backends can I export traces to?

The skill uses the OTLP exporter, which is compatible with most observability platforms including Jaeger, Honeycomb, New Relic, and Google Cloud Trace.

Does this support Next.js 14 App Router?

Yes, it is specifically designed for Next.js 14 and newer versions, leveraging the App Router and the experimental instrumentation hook for server-side setup.

Next.js OpenTelemetry Instrumentation

Name: Next.js OpenTelemetry Instrumentation
Author: Agentient

byAgentient

0•

分析与监控

Implements distributed tracing and observability for Next.js 14+ App Router applications using OpenTelemetry.

This skill provides a comprehensive framework for integrating OpenTelemetry into Next.js applications, enabling developers to track requests from the browser through Server Components to API routes. It automates the setup of the instrumentation hook, configures SDK providers for both Node.js and web runtimes, and provides patterns for manual span creation and attribute tagging. Whether you are deploying to Vercel or a custom environment, this skill ensures deep visibility into performance bottlenecks and distributed system behavior by linking traces across the entire request lifecycle.

主要功能

01Standardized configuration of instrumentation.ts for Node.js and Edge runtimes

02Built-in support for Vercel OTel and environment-based configuration

03Manual span creation patterns for custom business logic and database queries

04Automatic instrumentation for Next.js requests, RSC rendering, and data fetching

05Client-side browser tracing with fetch auto-instrumentation and OTLP export

060 GitHub stars

使用场景

01Debugging slow Server Component rendering or API response times in production

02Monitoring third-party API performance and database query latency within the App Router

03Mapping distributed traces across frontend and backend microservices using traceparent headers

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add agentient/vibekit nextjs-opentelemetry-instrumentation

For use in Claude.ai and ChatGPT

Download Skill