Menghubungkan Jejak Frontend dan Backend

Tujuan utama observabilitas sisi klien adalah satu jejak yang menghubungkan klik pengguna di React, melalui jaringan, penangan API, panggilan layanan, hingga kueri basis data yang menyebabkan respons lambat. Jejak menyeluruh ini membuat analisis akar masalah menjadi seketika.

Spesifikasi W3C TraceContext menentukan format tajuk traceparent: version-traceId-parentSpanId-flags. Contoh nilainya adalah: 00-4bf92f3577b34da6a3ce929d0e0e4736-00f067aa0ba902b7-01. ID jejak digunakan bersama di seluruh jejak terdistribusi; ID rentang induk berubah pada setiap lompatan.

Instrumentasi fetch OpenTelemetry secara otomatis menyisipkan tajuk traceparent ke setiap permintaan fetch keluar. Tajuk ini membawa ID jejak saat ini dan ID rentang dari rentang fetch sisi klien sebagai induknya, sehingga backend dapat membuat rentang anak yang terhubung ke rentang sisi klien.

Di server, instrumentasi HTTP OpenTelemetry untuk Node.js/Express membaca tajuk traceparent yang masuk dan membuat rentang yang menjadi anak dari rentang fetch sisi klien. ID jejak dipertahankan, sehingga Jaeger atau Grafana Tempo menampilkan seluruh rangkaian—rentang peramban → rentang Express → rentang basis data—dalam satu tampilan air terjun.

Setelah sisi klien dan sisi server diinstrumentasikan, buka Jaeger atau Grafana Tempo dan cari ID jejak. Anda akan melihat tampilan air terjun lengkap: rentang komponen React di bagian atas, rentang fetch di bawahnya, lalu rentang penangan rute Express, kemudian rentang kueri basis data—semuanya dengan durasi dan atribut masing-masing.

Tetapkan user.id sebagai atribut pada semua rentang di aplikasi React menggunakan span.setAttribute('user.id', userId). Lakukan hal yang sama di sisi server. Kini Anda dapat memfilter backend observabilitas untuk menampilkan semua jejak bagi ID pengguna tertentu, sehingga Anda dapat mendiagnosis masalah yang dilaporkan oleh pelanggan tertentu.

Buat ID sesi unik saat halaman dimuat dan tetapkan sebagai session.id pada semua rentang sisi klien. Sertakan ID tersebut dalam tajuk permintaan agar sisi server juga melampirkannya pada rentang sisi server. Korelasi sesi memungkinkan Anda merekonstruksi seluruh rangkaian tindakan yang dilakukan pengguna dalam satu sesi.

Alat komersial seperti Datadog secara bawaan mengintegrasikan sesi RUM dengan jejak APM. SDK RUM Datadog menyisipkan tajuk tertentu (X-Datadog-Trace-Id) ke dalam permintaan fetch, lalu SDK APM Datadog di sisi server membacanya untuk menghubungkan pemutaran ulang sesi RUM dengan jejak terdistribusi—Anda dapat menonton pemutaran ulang sesi dan melihat jejaknya secara bersamaan.

Bayangkan seorang pengguna mengeluh bahwa pembayaran berlangsung lambat. Dengan jejak yang berkorelasi, Anda mencari berdasarkan user.id di backend observabilitas, menemukan jejak pembayaran, dan segera melihat bahwa perlambatan disebabkan oleh kueri basis data selama 900 milidetik yang menggabungkan dua tabel besar—sesuatu yang tidak terlihat hanya dari metrik sisi klien.

Peramban tidak dapat mengirim jejak secara langsung ke Jaeger atau backend lain karena pembatasan CORS dan paparan kredensial. Sebagai gantinya, jalankan Collector OpenTelemetry sebagai proksi: konfigurasikan OTLPTraceExporter agar mengirim data ke titik akhir Collector Anda, yang kemudian meneruskannya ke Jaeger, Grafana Tempo, atau backend lainnya.

Jejak sisi klien dapat secara tidak sengaja menangkap data sensitif: nilai kolom formulir dalam URL, PII dalam atribut rentang, dan token sesi dalam tajuk. Tinjau instrumentasi Anda untuk memastikan tidak ada data sensitif yang disertakan dalam atribut rentang. Gunakan span.setAttribute secara hemat dan bersihkan parameter kueri URL sebelum merekamnya.

Bagaimana format tajuk traceparent W3C TraceContext?

Mengorelasikan jejak sisi klien dan sisi server menciptakan visibilitas menyeluruh di sepanjang perjalanan permintaan pengguna. Tajuk traceparent W3C TraceContext secara otomatis menghubungkan rentang fetch peramban dengan rentang sisi server melalui instrumentasi OpenTelemetry. Perkaya semua rentang dengan user.id dan session.id untuk penelusuran masalah yang terarah. Gunakan Collector OpenTelemetry sebagai proksi dari peramban ke backend untuk menghindari masalah CORS dan paparan kredensial.