The complete guide to OpenTelemetry in Next.js

1
import { NodeSDK } from '@opentelemetry/sdk-node';
2
import { ConsoleSpanExporter } from '@opentelemetry/sdk-trace-base';
3
import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-grpc';
4
import { OTLPMetricExporter } from '@opentelemetry/exporter-metrics-otlp-grpc';
5
import { Resource } from '@opentelemetry/resources';
6
import { SEMRESOURCENAME } from '@opentelemetry/semantic-conventions';
7
import { HttpInstrumentation } from '@opentelemetry/instrumentation-http';
8
import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch';
9
import { AlwaysOnSampler } from '@opentelemetry/sdk-trace-base';
10
import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base';
11
import { BatchLogRecordProcessor } from '@opentelemetry/sdk-logs';
12
import { PeriodicExportingMetricReader } from '@opentelemetry/sdk-metrics';
13
14
const exporter = new OTLPTraceExporter(config)
15
const spanProcessor = new BatchSpanProcessor(exporter, opts)
16
17
const logsExporter = new OTLPLogExporter(config)
18
const logProcessor = new BatchLogRecordProcessor(logsExporter, opts)
19
20
const metricsExporter = new OTLPMetricExporter(config)
21
const metricsReader = new PeriodicExportingMetricReader({exporter: metricsExporter})
22
23
// Configure the OTLP exporter to send data to your OpenTelemetry backend
24
const config = { url: 'https://otel.highlight.io:4317' }
25
const sdk = new NodeSDK({
26
  autoDetectResources: true,
27
  resourceDetectors: [processDetectorSync],
28
  resource: new Resource({
29
    [SEMRESOURCENAME.SERVICE_NAME]: 'nextjs-app',
30
    'highlight.project_id': '<YOUR_PROJECT_ID>',
31
  }),
32
  spanProcessors: [spanProcessor],
33
  logRecordProcessors: [logProcessor],
34
  metricReader: metricReader,
35
  traceExporter: exporter,
36
  contextManager: new AsyncLocalStorageContextManager(),
37
  sampler: new AlwaysOnSampler(),
38
  instrumentations: [new HttpInstrumentation(), new FetchInstrumentation()],
39
})
40
41
sdk.start();
42
console.log('OpenTelemetry initialized');

1
export function register() {
2
  await import('./otel');
3
}

1
module.exports = {
2
  experimental: {
3
    instrumentationHook: true,
4
  },
5
};

1
import { LoggerProvider } from '@opentelemetry/sdk-logs';
2
3
const loggerProvider = new LoggerProvider();
4
const logger = loggerProvider.getLogger('nextjs-logger');
5
6
logger.emit({
7
  severityText: 'INFO',
8
  body: 'Application started',
9
});

1
import { LoggerProvider } from '@opentelemetry/sdk-logs';
2
3
const loggerProvider = new LoggerProvider();
4
const logger = loggerProvider.getLogger('nextjs-logger');
5
6
const originalConsoleLog = console.log;
7
console.log = (...args) => {
8
  originalConsoleLog(...args);
9
  logger.emit({
10
    severityText: 'INFO',
11
    body: args.join(' '),
12
  });
13
};
14
15
console.log('Hello, world!');

1
import { trace } from '@opentelemetry/api';
2
3
const tracerProvider = trace.getTracerProvider();
4
const tracer = tracerProvider.getTracer("tracer");
5
6
export default async function handler(req, res) {
7
  await tracer.startActiveSpan(
8
    "data.fetch",
9
    {
10
      attributes: {
11
        "user.email": email || undefined,
12
        "user.name": name || undefined,
13
      },
14
    },
15
    async (span) => {
16
      try {
17
        doSomething();
18
        throw new Error('Something went wrong!');
19
      } catch (error) {
20
        if (span) {
21
          span.recordException(error);
22
        }
23
      }
24
    },
25
  );
26
}

1
import { type Instrumentation } from 'next'
2
3
export const onRequestError: Instrumentation.onRequestError = async (
4
  err,
5
  request,
6
  context
7
) => {
8
  const { trace } = await import('@opentelemetry/api')
9
  const span = trace.getActiveSpan()
10
  if (span) {
11
    span.setAttributes({
12
      'http.url': request.path,
13
      'http.method': request.method,
14
      'next.router.kind': context.routerKind,
15
      'next.router.path': context.routerPath,
16
      'next.router.type': context.routerType,
17
      'next.render.source': context.renderSource,
18
      'next.render.type': context.renderType,
19
      'next.revalidate.reason': context.revalidateReason,
20
    })
21
    span.recordException(err)
22
  }
23
}

1
import { MeterProvider } from '@opentelemetry/sdk-metrics';
2
3
const meter = new MeterProvider().getMeter('nextjs-meter');
4
const requestCounter = meter.createCounter('http_requests_total', {
5
  description: 'Counts total HTTP requests',
6
});
7
8
export function trackRequest() {
9
  requestCounter.add(1);
10
}

1
import { trackRequest } from '../../otel';
2
3
export default function handler(req, res) {
4
  trackRequest();
5
  res.status(200).json({ message: 'Metrics tracked!' });
6
}

1
import { NodeSDK } from '@opentelemetry/sdk-node';
2
import { ConsoleSpanExporter } from '@opentelemetry/sdk-trace-base';
3
import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-grpc';
4
import { OTLPMetricExporter } from '@opentelemetry/exporter-metrics-otlp-grpc';
5
import { Resource } from '@opentelemetry/resources';
6
import { SEMRESOURCENAME } from '@opentelemetry/semantic-conventions';
7
import { HttpInstrumentation } from '@opentelemetry/instrumentation-http';
8
import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch';
9
import { AlwaysOnSampler } from '@opentelemetry/sdk-trace-base';
10
import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base';
11
import { BatchLogRecordProcessor } from '@opentelemetry/sdk-logs';
12
import { PeriodicExportingMetricReader } from '@opentelemetry/sdk-metrics';
13
14
const exporter = new OTLPTraceExporter(config)
15
const spanProcessor = new BatchSpanProcessor(exporter, opts)
16
17
const logsExporter = new OTLPLogExporter(config)
18
const logProcessor = new BatchLogRecordProcessor(logsExporter, opts)
19
20
const metricsExporter = new OTLPMetricExporter(config)
21
const metricsReader = new PeriodicExportingMetricReader({exporter: metricsExporter})
22
23
// Configure the OTLP exporter to send data to your OpenTelemetry backend
24
const config = { url: 'https://otel.highlight.io:4317' }
25
const sdk = new NodeSDK({
26
  autoDetectResources: true,
27
  resourceDetectors: [processDetectorSync],
28
  resource: new Resource({
29
    [SEMRESOURCENAME.SERVICE_NAME]: 'nextjs-app',
30
    'highlight.project_id': '<YOUR_PROJECT_ID>',
31
  }),
32
  spanProcessors: [spanProcessor],
33
  logRecordProcessors: [logProcessor],
34
  metricReader: metricReader,
35
  traceExporter: exporter,
36
  contextManager: new AsyncLocalStorageContextManager(),
37
  sampler: new AlwaysOnSampler(),
38
  instrumentations: [new HttpInstrumentation(), new FetchInstrumentation()],
39
})
40
41
sdk.start();

1
import {NextResponse} from "next/server";
2
import api, {propagation} from "@opentelemetry/api";
3
import {logs, SeverityNumber} from "@opentelemetry/api-logs";
4
5
const tracerProvider = api.trace.getTracerProvider();
6
const tracer = tracerProvider.getTracer("data");
7
8
const loggerProvider = logs.getLoggerProvider();
9
const logger = provider.getLogger("data");
10
11
const meterProvider = api.metrics.getMeterProvider();
12
const meter = meterProvider.getMeter("data");
13
14
// This is an example implementation of a route that fetches data from a Python service
15
export async function GET() {
16
    const {email, name} = req.query;
17
18
    console.log("Fetching data...", {email});
19
    const headers = {
20
        "Content-Type": "application/json",
21
    };
22
    propagation.inject(api.context.active(), headers);
23
    const response = await fetch(
24
        `https://api.sampleapis.com/coffee/hot`,
25
        {
26
            method: "POST",
27
            headers,
28
            body: JSON.stringify({
29
                email,
30
            }),
31
        },
32
    );
33
    if (!response.ok) {
34
        throw new Error("Failed to fetch data");
35
    }
36
    const data = await response.json();
37
38
    // create a span for data processing that may be complex
39
    const processed = await tracer.startActiveSpan(
40
        "data.process",
41
        {
42
            attributes: {
43
                "user.email": email || undefined,
44
                "user.name": name || undefined,
45
            },
46
        },
47
        async () => {
48
            // do something that may be slow
49
            data.map((d) => ({
50
                ...d,
51
                calculated: d.value ?? 0 * 1.23
52
            }))
53
    });
54
55
    // report the data as a metric
56
    const gauge = meter.createObservableGauge("data.metric");
57
    for (const d of processed) {
58
        gauge.addCallback((m) => {
59
            m.observe(d.attribute);
60
        });
61
    }
62
63
    // emit a custom log
64
    logger.emit({
65
        severityNumber: SeverityNumber.INFO,
66
        severityText: "INFO",
67
        body: "returning data",
68
        attributes: {processed},
69
    });
70
71
    return NextResponse.json(processed);
72
}

1
import { H } from '@highlight-run/node';
2
3
// the Highlight SDK instrumentation can happen in each route
4
// or globally for the whole application in your `instrumentation.ts` file
5
H.init('YOUR_PROJECT_ID', {
6
  // ... options to configure the SDK
7
});
8
9
// This is an example implementation of a route that fetches data from a Python service
10
export async function GET() {
11
    const {email, name} = req.query;
12
13
    console.log("Fetching data...", {email});
14
    const response = await fetch(
15
        `https://api.sampleapis.com/coffee/hot`,
16
        {
17
            method: "POST",
18
            headers: {"Content-Type": "application/json"},
19
            body: JSON.stringify({
20
                email,
21
            }),
22
        },
23
    );
24
    if (!response.ok) {
25
        throw new Error("Failed to fetch data");
26
    }
27
    const data = await response.json();
28
29
    // create a span for data processing that may be complex
30
    const processed = await H.startActiveSpan(
31
        "data.process",
32
        async (span) => {
33
            span.setAttributes({
34
                "user.email": email || undefined,
35
                "user.name": name || undefined,
36
            });
37
            // do something that may be slow
38
            data.map((d) => ({
39
                ...d,
40
                calculated: d.value ?? 0 * 1.23
41
            }))
42
        });
43
44
    // report the data as a metric
45
    for (const d of data) {
46
        H.recordMetric('data.metric', d.attribute);
47
    }
48
49
    // emit a custom log
50
    H.log('returning data', {data});
51
52
    return NextResponse.json(data);
53
}