next.js: The `with-opentelemetry` example doesn't send telemetry data

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information

yarn run v1.22.19
$ /Users/yamada/work/samples/with-opentelemetry-app/node_modules/.bin/next info

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.0.0: Fri Sep 15 14:42:57 PDT 2023; root:xnu-10002.1.13~1/RELEASE_ARM64_T8112
Binaries:
  Node: 18.17.0
  npm: 9.6.7
  Yarn: 1.22.19
  pnpm: N/A
Relevant Packages:
  next: 14.1.1-canary.51 // Latest available version is detected (14.1.1-canary.51).
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 4.7.4
Next.js Config:
  output: N/A


✨  Done in 1.72s.

Which example does this report relate to?

with-opentelemetry

What browser are you using? (if relevant)

Microsoft Edge for Business Version 121.0.2277.112 (Official build) (arm64)

How are you deploying your application? (if relevant)

yarn dev

Describe the Bug

The example doesn’t send telemetry data.

This looks like a @vercel/otel bug. I confirmed by adding @vercel/otel to my Next.js application without the example and it didn’t send telemetry data as well. https://nextjs.org/docs/app/building-your-application/optimizing/open-telemetry#using-vercelotel

I also confirmed that telemetry data is sent with manual configuration. In this case default spans are sent. https://nextjs.org/docs/app/building-your-application/optimizing/open-telemetry#manual-opentelemetry-configuration

Expected Behavior

The example send telemetry data with @vercel/otel.

To Reproduce

Launch an OTel collector using opentelemetry-collector-dev-setup as a preparation.

git clone https://github.com/vercel/opentelemetry-collector-dev-setup.git
cd opentelemetry-collector-dev-setup
docker-compose up -d

Create and launch an application using the example.

yarn create next-app --example with-opentelemetry with-opentelemetry-app
cd with-opentelemetry-app
yarn dev

Open localhost:3000 in a browser
Check Jaeger in the browser.

About this issue

Original URL
State: open
Created 5 months ago
Reactions: 3
Comments: 19

Most upvoted comments

I resolved the problem by calling registerOTel as follows.

import { OTLPTraceExporter } from "@opentelemetry/exporter-trace-otlp-http";
import { SimpleSpanProcessor } from "@opentelemetry/sdk-trace-node";
import { registerOTel } from "@vercel/otel";

export function register() {
  registerOTel({
    serviceName: "next-app",
    spanProcessors: [new SimpleSpanProcessor(new OTLPTraceExporter())],
  });
}

Is this a @vercel/otel issue? Or is it a documentation/example issue?

YunosukeY on Feb 14, 2024

Tried to follow @YunosukeY 's solution, but got this. Does anyone else experience this?
 ⨯ ../node_modules/.pnpm/@opentelemetry+otlp-exporter-base@0.49.1_@opentelemetry+api@1.8.0/node_modules/@opentelemetry/otlp-exporter-base/build/esm/platform/browser/OTLPExporterBrowserBase.js (49:0) @ OTLPTraceExporter.OTLPExporterBrowserBase [as constructor]
 ⨯ An error occurred while loading instrumentation hook: navigator is not defined`
It’s being caused by the middleware
Yes I’m experiencing the same behaviour. Have you found a solution @sudowoodo200?

I assume this is the case because the instrumentation is running as middleware in the edge runtime. Which doesn’t have access to these Node API’s. It is also discussed in this issue: https://github.com/vercel/next.js/issues/59413#issuecomment-1877744304.

Juulaps on Apr 9, 2024

I am on 14.1.4 😅 I will try to see if I am able to send some custom spans. EDIT: That worked instantly, but not the other default spans that nextjs says they have 🤔

I should note: the default spans I experienced were in the page router

tansanDOTeth on Mar 21, 2024

Setting the following env vars worked for me.

    OTEL_EXPORTER_OTLP_TRACES_ENDPOINT: "http://jaeger-hostname:4318/v1/traces"
    OTEL_EXPORTER_OTLP_TRACES_PROTOCOL: "http/protobuf"

I also found the following env-variable to be immensely useful:

OTEL_LOG_LEVEL=debug

iaraknes on Mar 4, 2024