프런트엔드와 백엔드 추적 정보 연계

프런트엔드 관측성의 궁극적인 목표는 React에서 사용자가 클릭한 순간부터 네트워크, API 처리기, 서비스 호출을 거쳐 느린 응답을 일으킨 데이터베이스 쿼리까지 연결하는 하나의 트레이스를 만드는 것입니다. 이러한 종단 간 트레이스를 사용하면 근본 원인을 즉시 분석할 수 있습니다.

W3C TraceContext 사양은 traceparent 헤더 형식을 정의합니다: version-traceId-parentSpanId-flags. 예시 값은 다음과 같습니다: 00-4bf92f3577b34da6a3ce929d0e0e4736-00f067aa0ba902b7-01. 트레이스 ID는 전체 분산 트레이스에서 공유되며, 부모 스팬 ID는 각 홉마다 변경됩니다.

OpenTelemetry fetch 계측은 모든 발신 fetch 요청에 traceparent 헤더를 자동으로 주입합니다. 이 헤더에는 현재 트레이스 ID와 프런트엔드 fetch 스팬의 스팬 ID가 부모로 포함되므로 백엔드에서 프런트엔드 스팬에 연결된 자식 스팬을 만들 수 있습니다.

서버에서는 Node.js/Express용 OpenTelemetry HTTP 계측이 수신된 traceparent 헤더를 읽고 프런트엔드 fetch 스팬의 자식인 스팬을 생성합니다. 트레이스 ID가 유지되므로 Jaeger 또는 Grafana Tempo에서 전체 연결인 브라우저 스팬 → Express 스팬 → 데이터베이스 스팬을 하나의 워터폴 보기로 표시할 수 있습니다.

프런트엔드와 백엔드 모두에 계측을 적용한 후 Jaeger 또는 Grafana Tempo를 열고 트레이스 ID를 검색하십시오. 상단의 React 컴포넌트 스팬, 그 아래의 fetch 스팬, 이어서 Express 라우트 처리기 스팬과 데이터베이스 쿼리 스팬으로 이어지는 전체 워터폴을 각 지속 시간 및 속성과 함께 확인할 수 있습니다.

span.setAttribute('user.id', userId)를 사용하여 React 앱의 모든 스팬에 user.id를 속성으로 설정하십시오. 백엔드에서도 동일하게 설정합니다. 이제 관측성 백엔드에서 특정 사용자 ID의 모든 트레이스를 필터링하여 표시할 수 있으므로 특정 고객이 보고한 문제를 진단할 수 있습니다.

페이지를 로드할 때 고유한 세션 ID를 생성하고 모든 프런트엔드 스팬에서 session.id로 설정하십시오. 요청 헤더에 이를 포함하여 백엔드에서도 백엔드 스팬에 추가하도록 하십시오. 세션 상관관계를 사용하면 하나의 세션에서 사용자가 수행한 전체 작업 순서를 재구성할 수 있습니다.

Datadog과 같은 상용 도구는 RUM 세션을 APM 트레이스와 기본적으로 통합합니다. Datadog RUM SDK는 fetch 요청에 특정 헤더(X-Datadog-Trace-Id)를 주입하고, 백엔드의 Datadog APM SDK는 이 헤더를 읽어 RUM 세션 재생을 분산 트레이스에 연결합니다. 따라서 세션 재생을 보면서 동시에 트레이스를 확인할 수 있습니다.

한 사용자가 결제가 느리다고 불평한다고 가정해 보십시오. 상관관계가 설정된 트레이스를 사용하면 관측성 백엔드에서 user.id로 검색하여 결제 트레이스를 찾고, 두 개의 큰 테이블을 조인하는 900ms의 데이터베이스 쿼리가 지연의 원인이었다는 사실을 즉시 확인할 수 있습니다. 이는 프런트엔드 메트릭만으로는 보이지 않는 문제입니다.

브라우저는 CORS 제한과 자격 증명 노출 때문에 Jaeger 또는 다른 백엔드로 트레이스를 직접 보낼 수 없습니다. 대신 OpenTelemetry Collector를 프록시로 실행하십시오. OTLPTraceExporter가 Collector 엔드포인트로 전송하도록 구성하면 Collector가 Jaeger, Grafana Tempo 또는 다른 백엔드로 데이터를 분배합니다.

프런트엔드 트레이스에는 URL의 양식 필드 값, 스팬 속성의 PII, 헤더의 세션 토큰과 같은 민감한 데이터가 실수로 포함될 수 있습니다. 스팬 속성에 민감한 데이터가 포함되지 않도록 계측을 검토하십시오. span.setAttribute는 신중하게 사용하고 기록하기 전에 URL 쿼리 매개변수를 정제하십시오.

W3C TraceContext traceparent 헤더의 형식은 무엇입니까?

프런트엔드와 백엔드 트레이스를 상관관계로 연결하면 사용자의 전체 요청 여정에 대한 종단 간 가시성이 확보됩니다. W3C TraceContext traceparent 헤더는 OpenTelemetry 계측을 통해 브라우저 fetch 스팬과 백엔드 스팬을 자동으로 연결합니다. 대상이 분명한 디버깅을 위해 모든 스팬을 user.id와 session.id로 보강하십시오. CORS 문제와 자격 증명 노출을 방지하려면 OpenTelemetry Collector를 브라우저와 백엔드 사이의 프록시로 사용하십시오.