Distributed Tracing & OpenTelemetry Integration

The 30-Second Interview Answer

Next.js supports standard OpenTelemetry (OTel) instrumentation out of the box. By implementing instrumentation.ts and the register() hook, developers can trace distributed HTTP requests across microservices, measure database query spans, track Server Component rendering bottlenecks, and export traces to observability platforms like Datadog, New Relic, or Honeycomb.

Learning Objectives

Enable OpenTelemetry instrumentation using instrumentation.ts and the register() hook.

Trace request execution across Server Components, Route Handlers, and external microservices.

Create custom OpenTelemetry spans to measure slow database and third-party API calls.

Export telemetry spans via OTLP (OpenTelemetry Protocol) collectors.

Prerequisites & Background Knowledge

OpenTelemetry core concepts (Traces, Spans, Context Propagation)Distributed microservicesObservability backends

Why Interviewers Care

High-level enterprise engineering topic. Observability and mean-time-to-resolution (MTTR) are vital for high-availability systems.

The Challenge

How do you integrate OpenTelemetry into Next.js App Router? Implement instrumentation.ts with custom spans to track database queries and server-side rendering latency.

Code Architecture & Implementation

1// instrumentation.ts (Root of project or inside src/)
2import { registerOTel } from '@vercel/otel';
3
4export function register() {
5  // registerOTel automatically sets up OpenTelemetry instrumentation for:
6  // 1. Next.js server rendering spans
7  // 2. Outgoing fetch() requests (propagating traceparent headers)
8  // 3. Route Handlers and Server Actions
9  registerOTel({
10    serviceName: 'faangprep-frontend',
11  });
12}

Architectural Explanation

In modern distributed microservices, a single user request traverses CDNs, Next.js servers, API gateways, databases, and third-party services. OpenTelemetry injects a traceparent W3C header into all outgoing HTTP requests made by Next.js. The instrumentation.ts file runs once when the Next.js server boots. It attaches OTel hooks to the Node.js process, measuring every RSC render step, database span, and cache lookup, allowing engineers to visualize waterfalls in tools like Jaeger or Datadog.

Common Mistakes & Anti-Patterns

Forgetting to call `span.end()`, resulting in unclosed spans and memory leaks.

Placing heavy instrumentation code that executes synchronously on every request.

Not configuring W3C trace context propagation, breaking end-to-end distributed trace continuity.

Interview Follow-Up Traps

The interviewer asks: "Does instrumentation.ts execute in browser client components?" No! `instrumentation.ts` runs strictly on the server during server startup.

Frequently Asked Questions

What is the difference between @vercel/otel and raw @opentelemetry/sdk-node?

`@vercel/otel` is a lightweight wrapper that pre-configures standard Next.js spans and exporters with minimal boilerplate.

Does Next.js support Jaeger and Prometheus exporters?

Yes! You can configure any standard OTLP gRPC or HTTP exporter.

Can you trace Edge runtime routes with OpenTelemetry?

Yes, but with exporters that support HTTP fetch rather than native TCP sockets.

Node.js Runtime vs Edge Runtime Tradeoffs Managing Environment Variables & Build-Time Inlining