STK-OBS-08 frontend(Next.js) @vercel/otel 계측

작업 내용

frontend(Next.js) 서버 런타임을 @vercel/otel로 계측해, 사용자 요청이 trace의 진입 span이 되고 aggregator로의 호출에 traceparent가 주입되도록 한다(R-09). 브라우저 RUM 풀 계측은 범위 밖이며, 서버 런타임(SSR·Route Handler) trace 합류까지가 목표다.

• instrumentation.ts에 registerOTel({ serviceName: 'frontend' }), OTLP 엔드포인트를 Collector로 지정.
• aggregator 호출 시 W3C traceparent가 outbound fetch 헤더에 실리는지 확인.

롤백: instrumentation.ts 등록 해제 또는 OTLP 엔드포인트 미설정. 화면 동작 무영향.

다이어그램

처리 흐름

sequenceDiagram
    participant Browser
    participant FE as frontend(server)
    participant AGG as aggregator
    participant COL as Collector
    Browser->>FE: 페이지/액션 요청
    FE->>AGG: fetch (traceparent 주입)
    AGG-->>FE: response
    FE->>COL: OTLP span (root)

모듈 의존

flowchart LR
    INST["instrumentation.ts"]
    OTEL["@vercel/otel"]
    FETCH["server fetch"]
    INST --> OTEL
    OTEL --> FETCH
    OTEL --> COL["→ Collector"]

테스트 케이스

• frontend 서버 요청이 trace의 root span으로 생성된다.
• frontend→aggregator outbound fetch에 traceparent가 주입되어 trace가 이어진다.
• 전체 경로(frontend→aggregator→backend→ml)가 단일 trace로 양 스택에 표시된다.
• Collector 미설정/미기동 시 페이지 렌더링은 정상이다.
• 정적 자산 요청 등 비핵심 경로는 과도한 span을 만들지 않는다(노이즈 제어).