Integrations
Next.js

Next.js Integration Steps

Install SDKs

npm install @opentelemetry/api @opentelemetry/sdk-node @opentelemetry/sdk-trace-node
npm install @opentelemetry/auto-instrumentations-node @opentelemetry/exporter-trace-otlp-grpc
npm install @opentelemetry/resources @opentelemetry/semantic-conventions

You can use standard OpenTelemetry SDKs to send traces to our collector. List of all supported languages by OpenTelemetry and their SDK can be found in OpenTelemetry docs.

Enable auto-instrumentation

Next.js 13.4+ supports auto-instrumentation which means you no longer have to create a span for each request. To use this feature, you must explicitly enable it by adding experimental.instrumentationHook = true to your next.config.js.

const nextConfig = {
    ...
    experimental: {
        instrumentationHook: true,
    },
    ...
}
       
module.exports = nextConfig

Import your environment variables

InfraStack and OpenTelemetry SDKs accepts environment variables to configure the SDK securely. You can store these variables in your .env file or set them as environment variables.

Learn more about OTLP Protocol

Initialize OpenTelemetry

Create an instrumentation.ts and instrumentation-node.ts files in the root of your project and add the following code to initialize and configure the SDK.

instrumentation.ts
export async function register() {
    if (process.env.NEXT_RUNTIME === 'nodejs') {
        await import('./instrumentation-node')
    }
}   
instrumentation-node.ts
'use strict'
 
import { NodeSDK } from '@opentelemetry/sdk-node';
import { getNodeAutoInstrumentations } from '@opentelemetry/auto-instrumentations-node';
import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-grpc';
 
import {
    SEMRESATTRS_SERVICE_NAME,
    SEMRESATTRS_SERVICE_VERSION,
    SEMRESATTRS_SERVICE_INSTANCE_ID,
    SEMRESATTRS_SERVICE_NAMESPACE,
    SEMRESATTRS_K8S_NAMESPACE_NAME,
    SEMRESATTRS_K8S_POD_NAME
  } from '@opentelemetry/semantic-conventions';
import { Resource } from '@opentelemetry/resources';
 
const traceExporter = new OTLPTraceExporter();
 
const sdk = new NodeSDK({
    resource: new Resource({
        [SEMRESATTRS_SERVICE_NAME]: 'your-service-name', // Change this to your service name
        [SEMRESATTRS_SERVICE_VERSION]: "0.0.1", // Change this to your service version
        [SEMRESATTRS_SERVICE_INSTANCE_ID]: process.env.POD_NAME ?? "", // you can use uuid if pod name is not available
        [SEMRESATTRS_K8S_NAMESPACE_NAME]: process.env.POD_NAMESPACE ?? "",
        [SEMRESATTRS_K8S_POD_NAME]: process.env.POD_NAME ?? "",
        "project.id": "your-project-id", // Change this to your project id to filter traces, metrics, and logs by project
    }),
    traceExporter,
    instrumentations: [
      getNodeAutoInstrumentations({
        '@opentelemetry/instrumentation-fs': {
          requireParentSpan: true,
        },
      })
    ],
});
  
sdk.start(); 

Run your application

Go to InfraStack AI Dashboard (opens in a new tab) to observe your traces