Unable to setup Opentelemetry in Next.js

[Nathan-Bernardo]

Summary

Hi guys, I recently found out that Next.js has support for Opentelemetry, and I think it's amazing they have their own package for adding OpenTelemetry quite easily. However, Opentelemetry doesn't seem to work in my existing project even though I followed each step in the documentation (https://nextjs.org/docs/advanced-features/open-telemetry). My setup is basically what Next.js provided:

next.config.ts

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    reactStrictMode: true,
    instrumentationHook: true,
  },
};

module.exports = nextConfig;

instrumentation.ts

import { registerOTel } from "@vercel/otel";

export function register() {
  registerOTel("next-app");
}

But this doesn't seem to work. I even tried copying the example, but that didn't work as well. Well, I did a partial copy of the example they provided: https://github.com/vercel/next.js/tree/canary/examples/with-opentelemetry.

The example actually worked, and something I noticed is that it only worked when I used the App Router feature, but it never worked for projects that don't use the app router feature. My pages, apis, and shared code are located in the src directory. I'm not sure if Opentelemetry only works when Next.js is using the App Router feature, or I'm missing a small configuration that isn't mentioned in the documentation.

Any thoughts?

Additional information

Here is my project directory
- .next/
- node_modules/
- public/
- src/
  - pages/
  - shared/
  - styles/
- instrumentation.ts
- next-env.d.ts
- next.config.js
- ...

Example

No response

[garnerp]

I think instrumentation.ts needs to be in src if using src directory.

[Nathan-Bernardo]

That worked! Thank you :)

[pepegc]

This is really not clear in the docs. Thanks!

[mikitabut]

Thank you! This also works for me!

[ariburaco]

Yup, in dev, the root folder also works, but on deployement it worked when I moved to the src/ folder, Thanks 👍

[masterkain]

just to add since I went through the same route few days ago, if you need to also instrument prisma:

 // instrumentation.ts
 
import { PrismaInstrumentation } from '@prisma/instrumentation';
import { registerOTel } from '@vercel/otel';
 
export function register() {
  registerOTel({
    serviceName: 'myapp-web',
    instrumentations: [
      new PrismaInstrumentation({
        // Optional: Enable this if you want to trace Prisma middleware executions
        middleware: true,
      }),
      // You can add other compatible instrumentations here if needed
    ],
  });
}

then at runtime

- name: OTEL_EXPORTER_OTLP_ENDPOINT
  value: 'http://collector.linkerd-jaeger.svc.cluster.local:4318'

grpc doesn't seems to be supported, gotta use http for that, fetch instrumentation is already supported