Integrations
OpenTelemetry
NextJS

NextJS

The example below is using the JavaScript and Vercel guide for OpenTelemetry (opens in a new tab).

Libraries

First, install the required dependencies.

>_ Terminal
 
npm install @vercel/otel @opentelemetry/instrumentation-http @opentelemetry/exporter-logs-otlp-proto

Instrumentation

Method: Code changes

This is an experimental feature for NextJS. To enable it, you will need to update your nextConfig.

next.config.js
 
/** @type {import('next').NextConfig} */
const nextConfig = {
    ...
    experimental: {
        instrumentationHook: true
    }
    ...
}
 
module.exports = nextConfig

Create an instrumentation.ts file at the root of your project or within the src folder you if have one.

instrumentation.ts
 
import { HttpInstrumentation } from '@opentelemetry/instrumentation-http';
import { registerOTel } from "@vercel/otel";
import { SimpleLogRecordProcessor, LoggerProvider } from '@opentelemetry/sdk-logs';
import { OTLPLogExporter } from '@opentelemetry/exporter-logs-otlp-proto';
import { logs } from '@opentelemetry/api-logs';
 
export async function register() {
  if (process.env.NEXT_RUNTIME === 'nodejs') {
    const logExporter = new OTLPLogExporter(); // You can also use other exporters like FileLogRecordExporter
    const logRecordProcessor = new SimpleLogRecordProcessor(logExporter);
 
    const loggerProvider = new LoggerProvider();
    loggerProvider.addLogRecordProcessor(logRecordProcessor);
    logs.setGlobalLoggerProvider(loggerProvider);
 
    registerOTel({
        serviceName: "your-service-name",
        instrumentations:[new HttpInstrumentation()],
        logRecordProcessor: logRecordProcessor,
    });
  }
}

Required configuration

The following environment variables are always required.

.env
 
// OTEL_LOG_LEVEL="debug" // Use this flag to debug your configuration
OTEL_EXPORTER_OTLP_ENDPOINT="https://collect.smallhours.dev"
OTEL_EXPORTER_OTLP_HEADERS="small-hours-api-key=YOUR_API_KEY,small-hours-service-id=YOUR_SERVICE_ID"
FastAPIFlask