브라우저에서 수집하는 OpenTelemetry 추적

브라우저용 OpenTelemetry JavaScript SDK는 여러 패키지로 구성됩니다. @opentelemetry/sdk-trace-web은 핵심 트레이싱 구현을 제공하고, @opentelemetry/instrumentation-fetch는 모든 fetch API 호출에 대한 스팬을 자동으로 생성하며, @opentelemetry/exporter-trace-otlp-http는 스팬을 수집기로 전송합니다.

TracerProvider는 OpenTelemetry의 중앙 구성 객체입니다. 완료된 스팬에 수행할 작업을 결정하는 SpanProcessors 목록, 애플리케이션을 설명하는 리소스(서비스 이름과 버전), 샘플링 설정을 보관합니다.

BatchSpanProcessor는 완료된 스팬을 메모리에 모은 뒤 각 스팬을 개별적으로 보내지 않고 일괄적으로 내보냅니다. 이렇게 하면 수집기로 보내는 HTTP 요청 수가 크게 줄어 브라우저 성능이 향상되고 OTel 수집기 엔드포인트의 부하가 감소합니다.

OTLPTraceExporter는 JSON 또는 protobuf 형식으로 묶은 스팬을 HTTP를 통해 OpenTelemetry 호환 수집기로 전송합니다. 수집기 URL(예: OpenTelemetry 수집기 프록시 엔드포인트)을 구성하면 내보내기 도구가 직렬화와 재시도 로직을 자동으로 처리합니다.

스팬은 트레이스 안에서 하나의 작업 단위를 나타냅니다. 컴포넌트 마운트, API 호출, 사용자 상호 작용이 그 예입니다. 스팬에는 이름, 시작 시간, 종료 시간, 상태(OK 또는 ERROR), 키-값 속성 집합이 있습니다. 관련 스팬은 공유된 트레이스 ID와 부모-자식 관계로 연결됩니다.

provider.getTracer('react-app')로 트레이서를 만들고 tracer.startSpan('component-mount')로 스팬을 시작합니다. 작업이 완료되면 span.end()를 호출하여 종료 시간을 기록하십시오. 항상 스팬을 종료해야 합니다. 누수된 스팬은 메모리를 낭비하고 관측성 백엔드에 불완전한 데이터를 생성합니다.

속성은 상황에 맞는 데이터를 추가하여 스팬을 풍부하게 만듭니다. 예를 들어 span.setAttribute('user.id', userId) 또는 span.setAttribute('route', location.pathname)과 같이 설정할 수 있습니다. 관측성 백엔드에서 속성을 검색할 수 있으므로 "사용자 42의 느린 스팬을 모두 표시" 또는 "/checkout 경로의 모든 오류를 표시"와 같은 쿼리를 실행할 수 있습니다.

@opentelemetry/instrumentation-fetch는 전역 fetch 함수에 패치를 적용하여 외부로 나가는 모든 HTTP 요청에 대한 스팬을 자동으로 생성합니다. 기존 fetch 호출을 변경하지 않아도 스팬이 URL, 메서드, HTTP 상태 코드, 소요 시간을 수집합니다.

fetch 계측이 발신 요청을 위한 스팬을 생성하면 요청에 W3C TraceContext의 traceparent 헤더를 주입합니다. 수신 백엔드는 이 헤더를 읽고 동일한 트레이스를 이어 가므로 브라우저와 서버를 아우르는 연결된 트레이스가 생성됩니다.

OpenTelemetry 초기화는 어떤 컴포넌트도 마운트되기 전에 이루어져야 합니다. 일반적으로 앱 진입 파일인 main.tsx에서 ReactDOM.createRoot를 호출하기 전에 초기화합니다. 프로바이더를 만들고 프로세서와 내보내기를 등록한 다음 provider.register()를 호출하여 전역 TracerProvider로 만드십시오.

트래픽이 많은 앱에서 모든 사용자 상호 작용을 기록하면 막대한 양의 트레이스 데이터가 생성됩니다. TracerProvider에서 TraceIdRatioBased 샘플러를 구성하여 데이터 양을 줄이십시오(예: 트레이스의 10% 샘플링). 오류 트레이스는 ParentBased 샘플러를 사용해 항상 100% 샘플링하여 어떤 오류도 놓치지 않도록 하십시오.

브라우저 애플리케이션에서 SimpleSpanProcessor 대신 BatchSpanProcessor를 사용하는 이유는 무엇입니까?

OpenTelemetry JavaScript SDK는 TracerProvider, BatchSpanProcessor, OTLPTraceExporter를 사용하여 브라우저에 계측을 적용합니다. 스팬은 속성으로 보강된 작업 단위를 나타냅니다. fetch 계측은 API 호출을 위한 스팬을 자동으로 생성하고 종단 간 분산 추적을 위해 W3C TraceContext 헤더를 주입합니다. 계측을 일찍 초기화하고, 적절하게 샘플링하며, 깔끔한 트레이스 데이터를 유지하도록 항상 스팬을 종료하십시오.