Can I use this with Vercel's native observability?

Absolutely. The skill includes specific configurations for @vercel/otel to simplify exporting traces to Vercel's built-in monitoring tools.

Which backends are compatible with this instrumentation?

It supports any OTLP-compliant backend, including Jaeger, Honeycomb, Datadog, New Relic, and Google Cloud Trace.

Does it include client-side browser monitoring?

Yes, it provides a TracingProvider pattern to capture fetch calls and user activity in the browser, linking them to your server-side traces.

Will it automatically trace my database queries?

While it auto-instruments fetch calls and server requests, the skill provides specific patterns for creating manual spans to wrap database queries and custom business logic.

Does this skill support the Next.js App Router?

Yes, it is specifically designed for Next.js 14+ and leverages the experimental instrumentation hook to provide deep visibility into the App Router lifecycle.

Next.js OpenTelemetry Instrumentation

Name: Next.js OpenTelemetry Instrumentation
Author: Agentient

byAgentient

分析と監視

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.

主な機能

Custom span creation for granular business logic and database monitoring
Seamless integration with Next.js instrumentation.ts lifecycle hooks
Unified browser and server-side tracing for full-stack visibility
0 GitHub stars
Native compatibility with Vercel OTel and OTLP-compliant backends
Automatic tracing for React Server Components (RSC) and data fetching

ユースケース

Debugging slow performance in complex React Server Component rendering chains
Correlating application logs with specific trace IDs to resolve production errors faster
Tracking distributed requests from a browser frontend through multiple backend microservices

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

GitHub

概要