An in-depth guide to monitoring Next.js apps with OpenTelemetry

This guide provides an overview of using OpenTelemetry (OTel) for monitoring Next.js applications, including its fundamentals, practical applications, and tips & tricks. OTel is an open-source observability framework that helps developers understand their apps' and infrastructure's performance and behavior by collecting telemetry data such as metrics, logs, and traces. Key features of OpenTelemetry include language-agnostic implementation, support for distributed tracing, and automatic instrumentation for popular frameworks and libraries like Next.js. To install the OTel SDK in a Next app, use the @vercel/otel wrapper package, which handles specific configurations related to Vercel's Edge environment. Enable the instrumentation hook in your next.config.js|ts file and install the relevant packages. The configuration auto-instruments basic HTTP handlers for page routes and API routes, emitting traces with Next.js and/or Vercel-specific tags. You can test OTel instrumentation locally by setting the OTEL_LOG_LEVEL environment variable to debug and using a local Docker container with some OTel tools like Jaeger for debugging. To add more automatic instrumentation, use the @opentelemetry/auto-instrumentations-node package and configure it accordingly. To remove noise from your instrumentation, exclude certain packages or features by setting their enabled property to false in the getNodeAutoInstrumentations() function. For custom instrumentation, create a custom trace and test it locally using the global trace object and startActiveSpan() function. When deploying OTel to production, keep costs down by head sampling on prod with either an AlwaysOnSampler or TraceIdRatioBasedSampler depending on your environment. Additionally, configure an API key in some header for sending data to a 3rd party backend compatible with OTel.