Ön Uç ve Arka Uç İzlerini İlişkilendirme

Ön yüz gözlemlenebilirliğinin nihai hedefi, React'teki bir kullanıcı tıklamasını ağ üzerinden, API işleyicileri ve hizmet çağrıları aracılığıyla, yavaş yanıta neden olan veritabanı sorgusuna kadar bağlayan tek bir izdir. Bu uçtan uca iz, kök neden analizini anında yapmayı sağlar.

W3C TraceContext belirtimi, traceparent üst bilgisinin biçimini tanımlar: version-traceId-parentSpanId-flags. Örnek bir değer şöyledir: 00-4bf92f3577b34da6a3ce929d0e0e4736-00f067aa0ba902b7-01. İz kimliği, dağıtık iz boyunca paylaşılır; üst iz aralığı kimliği her atlamada değişir.

OpenTelemetry fetch enstrümantasyonu, her giden fetch isteğine traceparent üst bilgisini otomatik olarak ekler. Bu üst bilgi, geçerli iz kimliğini ve ön yüz fetch iz aralığının üst öğe olarak kullanılan iz aralığı kimliğini taşır; böylece arka uç, ön yüz iz aralığına bağlı bir alt iz aralığı oluşturabilir.

Sunucuda Node.js/Express için OpenTelemetry HTTP enstrümantasyonu, gelen traceparent üst bilgisini okur ve ön yüz fetch iz aralığının alt iz aralıklarını oluşturur. İz kimliği korunduğundan Jaeger veya Grafana Tempo, tarayıcı iz aralığı → Express iz aralığı → veritabanı iz aralığı zincirinin tamamını tek bir zaman akışı görünümünde gösterir.

Hem ön yüz hem de arka uç enstrümante edildiğinde Jaeger'ı veya Grafana Tempo'yu açın ve bir iz kimliği arayın. En üstte React bileşeni iz aralığını, altında fetch iz aralığını, ardından Express rota işleyicisi iz aralığını ve son olarak veritabanı sorgusu iz aralığını; tümünü süreleri ve öznitelikleriyle birlikte eksiksiz zaman akışı şeklinde görürsünüz.

span.setAttribute('user.id', userId) kullanarak user.id değerini React uygulamanızdaki tüm iz aralıklarında bir öznitelik olarak ayarlayın. Aynı işlemi arka uçta da yapın. Artık gözlemlenebilirlik arka ucunuzda belirli bir kullanıcı kimliğine ait tüm izleri filtreleyebilir ve belirli bir müşteri tarafından bildirilen sorunları teşhis edebilirsiniz.

Sayfa yüklenirken benzersiz bir oturum kimliği oluşturun ve bunu tüm ön yüz iz aralıklarında session.id olarak ayarlayın. Arka ucun da bunu arka uç iz aralıklarına eklemesi için istek üst bilgilerine dahil edin. Oturum ilişkilendirmesi, kullanıcının tek bir oturumda gerçekleştirdiği eylemlerin eksiksiz sırasını yeniden oluşturmanızı sağlar.

Datadog gibi ticari araçlar, RUM oturumlarını APM izleriyle yerel olarak bütünleştirir. Datadog RUM SDK'sı fetch isteklerine belirli bir üst bilgi (X-Datadog-Trace-Id) ekler ve arka uçtaki Datadog APM SDK'sı bu üst bilgiyi okuyarak RUM oturumunun yeniden oynatılmasını dağıtık ize bağlar — oturumun yeniden oynatılmasını izleyebilir ve izi aynı anda görebilirsiniz.

Bir kullanıcının ödeme işleminin yavaş olduğundan şikâyet ettiğini düşünün. İlişkilendirilmiş izlerle gözlemlenebilirlik arka ucunuzda user.id değerine göre arama yapar, ödeme işlemi izini bulur ve yavaşlamanın iki büyük tabloyu birleştiren 900 milisaniyelik bir veritabanı sorgusundan kaynaklandığını hemen görürsünüz — bu durum yalnızca ön yüz metriklerinde görünmez.

Tarayıcılar izleri doğrudan Jaeger'a veya diğer arka uçlara gönderemez (CORS kısıtlamaları ve kimlik bilgilerinin açığa çıkması nedeniyle). Bunun yerine bir OpenTelemetry Collector'ı vekil olarak çalıştırın: OTLPTraceExporter'ı Collector uç noktanıza gönderecek şekilde yapılandırın; Collector da verileri Jaeger'a, Grafana Tempo'ya veya başka herhangi bir arka uca dağıtsın.

Ön yüz izleri farkında olmadan hassas verileri yakalayabilir: URL'lerde form alanı değerleri, iz aralığı özniteliklerinde PII ve üst bilgilerde oturum belirteçleri. İz aralığı özniteliklerine hassas verilerin eklenmediğinden emin olmak için enstrümantasyonunuzu gözden geçirin. span.setAttribute kullanımını sınırlı tutun ve kaydetmeden önce URL sorgu parametrelerini temizleyin.

W3C TraceContext traceparent üst bilgisinin biçimi nedir?

Ön yüz ve arka uç izlerinin ilişkilendirilmesi, kullanıcının istek yolculuğunun tamamında uçtan uca görünürlük sağlar. W3C TraceContext traceparent üst bilgileri, OpenTelemetry enstrümantasyonu aracılığıyla tarayıcı fetch iz aralıklarını arka uç iz aralıklarına otomatik olarak bağlar. Hedefe yönelik hata ayıklama için tüm iz aralıklarını user.id ve session.id ile zenginleştirin. CORS sorunlarından ve kimlik bilgilerinin açığa çıkmasından kaçınmak için OpenTelemetry Collector'ı tarayıcı ile arka uç arasında vekil olarak kullanın.