ร่องรอย OpenTelemetry จากเบราว์เซอร์

SDK JavaScript ของ OpenTelemetry สำหรับเบราว์เซอร์ประกอบด้วยแพ็กเกจหลายรายการ: @opentelemetry/sdk-trace-web ให้การทำงานหลักสำหรับการสร้างร่องรอย, @opentelemetry/instrumentation-fetch สร้างช่วงงานโดยอัตโนมัติสำหรับการเรียก fetch API ทั้งหมด และ @opentelemetry/exporter-trace-otlp-http ส่งช่วงงานไปยังตัวรวบรวม

TracerProvider คืออ็อบเจ็กต์การกำหนดค่าศูนย์กลางใน OpenTelemetry โดยเก็บรายการของ SpanProcessors (ซึ่งกำหนดว่าจะเกิดอะไรขึ้นกับช่วงงานที่เสร็จสมบูรณ์) ทรัพยากรที่อธิบายแอปพลิเคชันของคุณ (ชื่อบริการ เวอร์ชัน) และการกำหนดค่าการสุ่มตัวอย่างต่าง ๆ

BatchSpanProcessor จะรวบรวมช่วงงานที่เสร็จสมบูรณ์ไว้ในหน่วยความจำ แล้วส่งออกเป็นชุดแทนการส่งทีละช่วงงาน วิธีนี้ลดจำนวนคำขอ HTTP ไปยังตัวรวบรวมของคุณได้อย่างมาก ช่วยเพิ่มประสิทธิภาพของเบราว์เซอร์และลดภาระของปลายทางตัวรวบรวม OpenTelemetry

OTLPTraceExporter ส่งช่วงงานที่จัดเป็นชุดไปยังตัวรวบรวมที่เข้ากันได้กับ OpenTelemetry ผ่าน HTTP ในรูปแบบ JSON หรือ protobuf คุณกำหนด URL ของตัวรวบรวม (เช่น ปลายทางพร็อกซีของตัวรวบรวม OpenTelemetry) จากนั้นตัวส่งออกจะจัดการการแปลงข้อมูลเป็นรูปแบบส่งและตรรกะการลองใหม่โดยอัตโนมัติ

Span แทนหน่วยงานหนึ่งหน่วยภายในร่องรอย เช่น การเมานต์คอมโพเนนต์ การเรียก API หรือการโต้ตอบของผู้ใช้ Span มีชื่อ เวลาเริ่มต้น เวลาสิ้นสุด สถานะ (OK หรือ ERROR) และแอตทริบิวต์แบบคีย์-ค่าชุดหนึ่ง Span ที่เกี่ยวข้องกันจะเชื่อมโยงกันด้วย trace ID ร่วมกันและความสัมพันธ์แบบแม่-ลูก

คุณสร้างตัวติดตามด้วย provider.getTracer('react-app') และเริ่มต้น Span ด้วย tracer.startSpan('component-mount') เมื่อการทำงานเสร็จสิ้น ให้เรียก span.end() เพื่อบันทึกเวลาสิ้นสุด ต้องสิ้นสุด Span เสมอ — Span ที่รั่วไหลจะใช้หน่วยความจำโดยเปล่าประโยชน์และทำให้แบ็กเอนด์การสังเกตการณ์ได้รับข้อมูลไม่ครบถ้วน

แอตทริบิวต์ช่วยเพิ่มข้อมูลบริบทให้ Span: span.setAttribute('user.id', userId) หรือ span.setAttribute('route', location.pathname) แอตทริบิวต์เหล่านี้ค้นหาได้ในแบ็กเอนด์การสังเกตการณ์ของคุณ ทำให้สร้างคำค้นหาได้ เช่น "แสดง Span ที่ช้าทั้งหมดของผู้ใช้ 42" หรือ "แสดงข้อผิดพลาดทั้งหมดบนเส้นทาง /checkout"

@opentelemetry/instrumentation-fetch จะแพตช์ฟังก์ชัน fetch ส่วนกลางเพื่อสร้าง Span โดยอัตโนมัติสำหรับคำขอ HTTP ขาออกทุกคำขอ Span จะเก็บ URL เมธอด รหัสสถานะ HTTP และระยะเวลาไว้ โดยไม่ต้องเปลี่ยนแปลงการเรียก fetch ที่มีอยู่เดิม

เมื่อเครื่องมือวัดคำขอเครือข่ายสร้างสแปนสำหรับคำขอขาออก เครื่องมือจะฉีดส่วนหัว traceparent ของ W3C TraceContext ลงในคำขอ แบ็กเอนด์ที่รับคำขอจะอ่านส่วนหัวนี้และดำเนินแทรซเดิมต่อ โดยสร้างแทรซที่เชื่อมต่อกันและครอบคลุมทั้งเบราว์เซอร์และเซิร์ฟเวอร์

ต้องเริ่มต้นใช้งาน OpenTelemetry ก่อนที่จะเมานต์คอมโพเนนต์ใด ๆ โดยทั่วไปให้ทำในไฟล์เริ่มต้นแอป (main.tsx) ก่อนเรียก ReactDOM.createRoot สร้างผู้ให้บริการ ลงทะเบียนตัวประมวลผลและตัวส่งออก แล้วเรียก provider.register() เพื่อกำหนดให้เป็น TracerProvider ส่วนกลาง

การบันทึกทุกการโต้ตอบของผู้ใช้ในแอปที่มีการใช้งานสูงจะสร้างข้อมูลแทรซจำนวนมหาศาล ให้กำหนดตัวสุ่มตัวอย่าง TraceIdRatioBased (เช่น สุ่มตัวอย่าง 10% ของแทรซ) ใน TracerProvider เพื่อลดปริมาณข้อมูล และสุ่มตัวอย่างแทรซที่มีข้อผิดพลาด 100% เสมอโดยใช้ตัวสุ่มตัวอย่าง ParentBased เพื่อให้แน่ใจว่าจะไม่พลาดข้อผิดพลาดใด ๆ

เหตุใดจึงใช้ BatchSpanProcessor แทน SimpleSpanProcessor ในแอปพลิเคชันเบราว์เซอร์

OpenTelemetry JavaScript SDK ใช้ TracerProvider, BatchSpanProcessor และ OTLPTraceExporter เพื่อวัดการทำงานของเบราว์เซอร์ สแปนแสดงหน่วยของงานที่เพิ่มรายละเอียดด้วยคุณลักษณะ เครื่องมือวัดคำขอเครือข่ายจะสร้างสแปนสำหรับการเรียก API โดยอัตโนมัติ และฉีดส่วนหัว W3C TraceContext เพื่อรองรับการติดตามแบบกระจายตั้งแต่ต้นจนจบ ให้เริ่มต้นใช้งานแต่เนิ่น ๆ สุ่มตัวอย่างอย่างเหมาะสม และจบสแปนเสมอ เพื่อรักษาข้อมูลแทรซให้เป็นระเบียบ