Tarayıcıdan OpenTelemetry İzleri

Tarayıcılar için OpenTelemetry JavaScript SDK'si birkaç paketten oluşur: @opentelemetry/sdk-trace-web temel izleme uygulamasını sağlar, @opentelemetry/instrumentation-fetch tüm fetch API çağrıları için otomatik olarak Span'ler oluşturur ve @opentelemetry/exporter-trace-otlp-http Span'leri bir toplayıcıya gönderir.

TracerProvider, OpenTelemetry'deki merkezî yapılandırma nesnesidir. Tamamlanan Span'lere ne olacağını belirleyen SpanProcessors listesini, uygulamanızı açıklayan kaynağı (hizmet adı ve sürüm) ve örnekleme yapılandırmasını içerir.

BatchSpanProcessor, her Span'i ayrı ayrı göndermek yerine tamamlanan Span'leri bellekte toplar ve gruplar hâlinde dışa aktarır. Bu, toplayıcınıza yapılan HTTP isteklerinin sayısını büyük ölçüde azaltır; tarayıcı performansını iyileştirir ve OTel toplayıcı uç noktasındaki yükü düşürür.

OTLPTraceExporter, gruplar hâlindeki Span'leri HTTP üzerinden JSON veya protobuf biçiminde OpenTelemetry uyumlu bir toplayıcıya gönderir. Toplayıcı URL'sini (ör. OpenTelemetry toplayıcınızın vekil uç noktası) yapılandırırsınız; dışa aktarıcı da serileştirme ve yeniden deneme mantığını otomatik olarak yönetir.

Bir Span, bir iz içindeki tek bir iş birimini temsil eder: bir bileşenin bağlanması, bir API çağrısı veya bir kullanıcı etkileşimi. Span'lerin bir adı, başlangıç zamanı, bitiş zamanı, durumu (OK veya ERROR) ve bir dizi anahtar-değer özniteliği vardır. İlişkili Span'ler ortak bir iz ID'si ve üst-alt ilişkileri aracılığıyla birbirine bağlanır.

provider.getTracer('react-app') ile bir izleyici oluşturur ve tracer.startSpan('component-mount') ile Span'ler başlatırsınız. İş tamamlandıktan sonra bitiş zamanını kaydetmek için span.end() çağrısını yapın. Span'leri her zaman sonlandırın — sızan Span'ler belleği boşa tüketir ve gözlemlenebilirlik arka ucunuzda eksik veriler oluşturur.

Öznitelikler, Span'leri bağlamsal verilerle zenginleştirir: span.setAttribute('user.id', userId) veya span.setAttribute('route', location.pathname). Öznitelikler gözlemlenebilirlik arka ucunuzda aranabilir; bu da "42 numaralı kullanıcı için yavaş olan tüm Span'leri göster" veya " /checkout rotasındaki tüm hataları göster" gibi sorgular yapmanızı sağlar.

@opentelemetry/instrumentation-fetch, giden her HTTP isteği için otomatik olarak Span oluşturmak üzere genel fetch işlevini değiştirir. Span, mevcut fetch çağrılarınızda hiçbir değişiklik yapmadan URL'yi, yöntemi, HTTP durum kodunu ve süreyi yakalar.

fetch enstrümantasyonu giden bir istek için bir iz aralığı oluşturduğunda, W3C TraceContext traceparent üst bilgisini isteğe ekler. Alıcı arka uç bu üst bilgiyi okur ve aynı izi sürdürerek tarayıcıyı ve sunucuyu kapsayan bağlantılı bir iz oluşturur.

OpenTelemetry başlatması herhangi bir bileşen bağlanmadan önce gerçekleşmelidir — genellikle uygulamanın giriş dosyasında (main.tsx), ReactDOM.createRoot çağrısından önce. Sağlayıcıyı oluşturun, işlemcileri ve dışa aktarıcıları kaydedin ve bunu genel TracerProvider yapmak için provider.register() çağrısını yapın.

Yüksek trafikli uygulamalarda her kullanıcı etkileşimini kaydetmek çok büyük miktarda iz verisi oluşturur. Hacmi azaltmak için TracerProvider içinde bir TraceIdRatioBased örnekleyici yapılandırın (örneğin izlerin %10'unu örnekleyin). Hiçbir hatanın gözden kaçmamasını sağlamak için ParentBased örnekleyici kullanarak hata içeren izlerin her zaman %100'ünü örnekleyin.

Tarayıcı uygulamalarında SimpleSpanProcessor yerine BatchSpanProcessor neden kullanılır?

OpenTelemetry JavaScript SDK, tarayıcıları TracerProvider, BatchSpanProcessor ve OTLPTraceExporter ile enstrümante eder. İz aralıkları, özniteliklerle zenginleştirilmiş iş birimlerini temsil eder. fetch enstrümantasyonu API çağrıları için otomatik olarak iz aralıkları oluşturur ve uçtan uca dağıtık izleme için W3C TraceContext üst bilgilerini ekler. Temiz iz verilerini korumak için erken başlatın, uygun örnekleme yapın ve iz aralıklarını her zaman sonlandırın.