Integrate OpenTelemetry for Next.js with infrastack.ai

What you will learn

How to set up your environment
How to your application using the infrastack.ai SDK or the official OpenTelemetry SDK

Prerequisites

An infrastack.ai account to get your API key
A Next.js application

Follow the example project on GitHub

Getting started

You can use the Infrastack SDK to instrument your Next.js application with a single line of code.

Install the NPM package

npm install @infrastack/otel

Prepare your environment

Create an .env file in the root of your project and add your API key.

.env

INFRASTACK_API_KEY=sk-1*************************f5af

Configure your Next.js application

This is step is required in order to enable instrumentation. Right now, instrumentationHook and serverComponentsExternalPackages are expermiental. Please follow the Official Next.js Documentation for instrumentationHook if this document is outdated.

next.config.mjs

const nextConfig = {
    experimental: {
        instrumentationHook: true, // To enable instrumentation
    },
};

export default nextConfig;

Create instrumentation.ts

If you are using a src folder in your Next.js application, create an instrumentation.ts file there. If not, create the file in the root of your project.

instrumentation.ts

import { Infrastack, Protocol } from "@infrastack/otel";
export async function register() {
    Infrastack.init({
        serviceName: "YOUR_SERVICE_NAME",
        protocol: Protocol.HTTP, // Recommended for Vercel
    });
}

If you don’t provide a service name, we will create a random name for you.

Run your application

Run your Next.js application with the default command.

npm run dev

You can check your data from the infrastack.ai dashboard.

You can use the Infrastack SDK to instrument your Next.js application with a single line of code.

Install the NPM package

npm install @infrastack/otel

Prepare your environment

Create an .env file in the root of your project and add your API key.

.env

INFRASTACK_API_KEY=sk-1*************************f5af

Configure your Next.js application

next.config.mjs

const nextConfig = {
    experimental: {
        instrumentationHook: true, // To enable instrumentation
    },
};

export default nextConfig;

Create instrumentation.ts

If you are using a src folder in your Next.js application, create an instrumentation.ts file there. If not, create the file in the root of your project.

instrumentation.ts

import { Infrastack, Protocol } from "@infrastack/otel";
export async function register() {
    Infrastack.init({
        serviceName: "YOUR_SERVICE_NAME",
        protocol: Protocol.HTTP, // Recommended for Vercel
    });
}

If you don’t provide a service name, we will create a random name for you.

Run your application

Run your Next.js application with the default command.

npm run dev

You can check your data from the infrastack.ai dashboard.

You can use the OpenTelemetry Javascript SDK to instrument your Next.js application.

Install the NPM packages

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

Prepare your environment

.env

OTEL_EXPORTER_OTLP_ENDPOINT="https://collector.infrastack.ai"
OTEL_EXPORTER_OTLP_HEADERS="infrastack-api-key={{YOUR_INFRASTACK_API_KEY}}"

Configure your Next.js application

next.config.mjs

const nextConfig = {
    experimental: {
        instrumentationHook: true, // To enable instrumentation
        serverComponentsExternalPackages: [ // To utilize node.js specific features in a next.js environment
            "@opentelemetry/auto-instrumentations-node",
            "@opentelemetry/sdk-node",
        ],
    },
};

export default nextConfig;

Create instrumentation-node.ts

Here, you will create a file that will be used to instrument your application. You will have lower level control over the instrumentation process.

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 { ATTR_SERVICE_NAME, ATTR_SERVICE_VERSION } from '@opentelemetry/semantic-conventions';
import { Resource } from '@opentelemetry/resources';

const traceExporter = new OTLPTraceExporter();

const sdk = new NodeSDK({
    resource: new Resource({
        [ATTR_SERVICE_NAME]: "{{YOUR_SERVICE_NAME}}",
        [ATTR_SERVICE_VERSION]: "{{YOUR_SERVICE_VERSION}}",
    }),
    traceExporter,
    instrumentations: [
        getNodeAutoInstrumentations({
            '@opentelemetry/instrumentation-fs': {
                requireParentSpan: true,
            },
        })
    ],
});

sdk.start();

Create instrumentation.ts

If you are using a src folder in your Next.js application, create an instrumentation.ts file there. If not, create the file in the root of your project.

instrumentation.ts

export async function register() {
    if (process.env.NEXT_RUNTIME === "nodejs") {
        await import('./instrumentation-node');
    }
}

Run your application

Run your Next.js application with the default command.

npm run dev

Documentation

Guides

SDK Reference

Integrate OpenTelemetry for Next.js with infrastack.ai

What you will learn

Prerequisites

Follow the example project on GitHub

Getting started

Next steps

Deploy Next.js with OpenTelemetry to Vercel

Deploy Next.js with OpenTelemetry to Render

Dockerize Next.js with OpenTelemetry

Javascript SDK Reference

Explore the Next.js example project

Documentation

Guides

SDK Reference

​What you will learn

​Prerequisites

Follow the example project on GitHub

​Getting started

​Next steps

Deploy Next.js with OpenTelemetry to Vercel

Deploy Next.js with OpenTelemetry to Render

Dockerize Next.js with OpenTelemetry

Javascript SDK Reference

Explore the Next.js example project

What you will learn

Prerequisites

Getting started

Next steps