Jejak OpenTelemetry dari Peramban

SDK JavaScript OpenTelemetry untuk peramban terdiri atas beberapa paket: @opentelemetry/sdk-trace-web menyediakan implementasi inti pelacakan, @opentelemetry/instrumentation-fetch secara otomatis membuat rentang untuk semua panggilan API fetch, dan @opentelemetry/exporter-trace-otlp-http mengirimkan rentang ke pengumpul.

TracerProvider adalah objek konfigurasi pusat dalam OpenTelemetry. Objek ini menyimpan daftar SpanProcessors (yang menentukan apa yang terjadi pada rentang yang selesai), sumber daya yang mendeskripsikan aplikasi Anda (nama layanan, versi), serta konfigurasi pengambilan sampel.

BatchSpanProcessor mengumpulkan rentang yang selesai di memori dan mengekspornya secara berkelompok, bukan mengirim setiap rentang satu per satu. Hal ini secara drastis mengurangi jumlah permintaan HTTP ke pengumpul, meningkatkan kinerja peramban, dan mengurangi beban pada titik akhir pengumpul OpenTelemetry.

OTLPTraceExporter mengirimkan rentang yang dikelompokkan ke pengumpul yang kompatibel dengan OpenTelemetry melalui HTTP dalam format JSON atau protobuf. Anda mengonfigurasi URL pengumpul (misalnya titik akhir proksi OTel Collector Anda), lalu pengekspor menangani serialisasi dan logika percobaan ulang secara otomatis.

Rentang mewakili satu unit pekerjaan dalam sebuah jejak: pemasangan komponen, panggilan antarmuka pemrograman aplikasi, atau interaksi pengguna. Rentang memiliki nama, waktu mulai, waktu selesai, status (OK atau ERROR), dan sekumpulan atribut kunci-nilai. Rentang yang berkaitan dihubungkan oleh ID jejak bersama serta hubungan induk-anak.

Anda membuat pelacak dengan provider.getTracer('react-app') dan memulai rentang dengan tracer.startSpan('component-mount'). Setelah pekerjaan selesai, panggil span.end() untuk mencatat waktu selesai. Selalu akhiri rentang — rentang yang bocor memboroskan memori dan menghasilkan data yang tidak lengkap di backend observabilitas Anda.

Atribut memperkaya rentang dengan data kontekstual: span.setAttribute('user.id', userId) atau span.setAttribute('route', location.pathname). Atribut dapat dicari di backend observabilitas Anda, sehingga memungkinkan kueri seperti "tampilkan semua rentang lambat untuk pengguna 42" atau "tampilkan semua kesalahan pada rute /checkout".

@opentelemetry/instrumentation-fetch memodifikasi fungsi fetch global untuk secara otomatis membuat rentang bagi setiap permintaan HTTP keluar. Rentang tersebut menangkap URL, metode, kode status HTTP, dan durasi tanpa perubahan apa pun pada panggilan fetch yang sudah ada.

Ketika instrumentasi fetch membuat rentang untuk permintaan keluar, instrumentasi tersebut menyisipkan tajuk traceparent W3C TraceContext ke dalam permintaan. Backend penerima membaca tajuk ini dan melanjutkan jejak yang sama, sehingga menghasilkan jejak terhubung yang mencakup peramban dan server.

Inisialisasi OpenTelemetry harus dilakukan sebelum komponen apa pun dipasang—biasanya di berkas entri aplikasi (main.tsx), sebelum pemanggilan ReactDOM.createRoot. Buat penyedia, daftarkan pemroses dan pengekspor, lalu panggil provider.register() agar penyedia tersebut menjadi TracerProvider global.

Merekam setiap interaksi pengguna dalam aplikasi dengan lalu lintas tinggi menghasilkan data jejak dalam jumlah sangat besar. Konfigurasikan pengambil sampel TraceIdRatioBased (misalnya, ambil sampel 10% jejak) di TracerProvider untuk mengurangi volumenya. Selalu ambil sampel 100% jejak kesalahan menggunakan pengambil sampel ParentBased agar tidak ada kesalahan yang terlewat.

Mengapa BatchSpanProcessor digunakan, bukan SimpleSpanProcessor, dalam aplikasi peramban?

SDK JavaScript OpenTelemetry menginstrumentasikan peramban dengan TracerProvider, BatchSpanProcessor, dan OTLPTraceExporter. Rentang merepresentasikan unit pekerjaan yang diperkaya dengan atribut. Instrumentasi fetch secara otomatis membuat rentang untuk panggilan API dan menyisipkan tajuk W3C TraceContext untuk pelacakan terdistribusi menyeluruh. Lakukan inisialisasi lebih awal, ambil sampel dengan tepat, dan selalu akhiri rentang agar data jejak tetap rapi.