참고사이트

• node : https://opentelemetry.io/docs/languages/js/getting-started/nodejs/
• next : https://www.checklyhq.com/blog/in-depth-guide-to-monitoring-next-js-apps-with-opentelemetry/
• sdk 변수 : https://opentelemetry.io/docs/specs/otel/configuration/sdk-environment-variables/
• 소스코드 레포 : https://github.com/kyeongjun-dev/nodejs-otel

---

실행

로컬에서 콘솔로 확인

레포의 README의 내용을 따라서 진행하시면 됩니다.

trace를 tempo로 전송한 뒤, grafana로 시각화

소스코드 레포를 clone한 뒤, docker-compose up --build 명령어를 실행합니다.

docker-compose up --build

localhost:3003/?foo=bar로 트래픽을 전송한 뒤, grafana(localhost:3000)으로 접속해서 Explore 메뉴로 이동한 뒤, 서비스명을 my-nodejs(docker-compose.yaml 파일에서 환경변수 OTEL_SERVICE_NAME로 지정한 값)로 검색하면 아래와 같이 수집되는 trace 확인이 가능합니다.

아래 명령어로 데모 앱을 생성할 수 있고, 자세한 건 레포의 README에 적어두었습니다.

npx create-next-app@latest my-app --yes

otel 관련 npm 패키지를 설치하고, my-app-docker/instrumentation.ts, my-app-docker/instrumentation.node.ts 파일이 설정에 필요한 전부입니다.

그리고 docker-compose.yaml의 nodejs 서비스 부분의 환경변수 설정에 otlp 관련 환경변수를 간단히 지정할 수 있습니다. (instrumentation.ts 코드에서도 설정이 가능하지만, 더 번거롭다고 생각합니다.)

@vercel/otel 미사용 이유

일단 유료버전이 존재하며, kubernetes 환경에 배포했을 때, service의 헬스체크마다 불필요한 로그가 발생합니다.
별도 로직으로 수집을 비활성화할 수는 있지만, 굳이라는 생각이 들어서 native otel 패키지만으로 trace 수집이 가능하도록 했습니다.

log에서 trace id 확인하기

실제 nextjs 데모앱에 localhost:3001에 접근하면 아래와 같은 로그가 출력됩니다.

 GET / 200 in 1197ms (compile: 1125ms, render: 72ms)

위 로그는 nextjs 자체에서 남기는 로그라서 trace id가 instrumentation.node.ts의 콘솔 오버라이딩이 안됩니다.
간단하게라도 테스트를 하려면, my-app-docker/app/page.tsx파일의 Home()에 임의로 console 로그를 찍습니다.

import Image from "next/image";

export default function Home() {
  console.log("Testing Trace ID inside Component");
  return (
(생략)

그러면 아래와 같이 trace id가 포함된 로그 확인이 가능합니다.

npm run dev

> my-app-docker@0.1.0 dev
> next dev

 ⚠ Port 3000 is in use by process 49870, using available port 3001 instead.
[baseline-browser-mapping] The data in this module is over two months old.  To ensure accurate Baseline data, please update: `npm i baseline-browser-mapping@latest -D`
   ▲ Next.js 16.0.5 (Turbopack)
   - Local:         http://localhost:3001
   - Network:       http://192.168.219.167:3001

 ✓ Starting...
 ✓ Ready in 922ms
trace_id=3b77cd2b9b0ea27b725003a449f46141 Testing Trace ID inside Component
trace_id=91fda6f8fcab43ff7309be3c6c756fc7 Testing Trace ID inside Component
 GET / 200 in 1197ms (compile: 1125ms, render: 72ms)