การเชื่อมโยงร่องรอยส่วนหน้าและส่วนหลัง

เป้าหมายสูงสุดของการสังเกตการณ์ส่วนหน้าคือการมีแทรซเดียวที่เชื่อมโยงตั้งแต่การคลิกของผู้ใช้ใน React ผ่านเครือข่าย ผ่านตัวจัดการ API และการเรียกใช้บริการต่าง ๆ ไปจนถึงคำสั่งค้นหาฐานข้อมูลที่ทำให้การตอบสนองช้าลง แทรซตั้งแต่ต้นจนจบนี้ทำให้การวิเคราะห์สาเหตุรากทำได้ทันที

ข้อกำหนด W3C TraceContext กำหนดรูปแบบส่วนหัว traceparent ดังนี้: version-traceId-parentSpanId-flags ค่าตัวอย่างมีลักษณะดังนี้: 00-4bf92f3577b34da6a3ce929d0e0e4736-00f067aa0ba902b7-01 รหัสแทรซจะใช้ร่วมกันตลอดแทรซแบบกระจายทั้งหมด ส่วนรหัสสแปนแม่จะเปลี่ยนไปในแต่ละจุดเชื่อมต่อ

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

บนเซิร์ฟเวอร์ เครื่องมือวัด HTTP ของ OpenTelemetry สำหรับ Node.js/Express จะอ่านส่วนหัว traceparent ที่เข้ามา และสร้างสแปนที่เป็นสแปนลูกของสแปนคำขอเครือข่ายฝั่งส่วนหน้า รหัสแทรซจะคงเดิม ดังนั้น Jaeger หรือ Grafana Tempo จะแสดงห่วงโซ่ทั้งหมด ได้แก่ สแปนเบราว์เซอร์ → สแปน Express → สแปนฐานข้อมูล ในมุมมองแผนผังน้ำตกเดียว

เมื่อวัดทั้งส่วนหน้าและแบ็กเอนด์แล้ว ให้เปิด Jaeger หรือ Grafana Tempo และค้นหาด้วยรหัสแทรซ คุณจะเห็นแผนผังน้ำตกทั้งหมด ได้แก่ สแปนคอมโพเนนต์ React ด้านบน ตามด้วยสแปนคำขอเครือข่าย สแปนตัวจัดการเส้นทาง Express และสแปนคำสั่งค้นหาฐานข้อมูล โดยแต่ละรายการจะแสดงระยะเวลาและคุณลักษณะ

กำหนด user.id เป็นคุณลักษณะในสแปนทั้งหมดของแอป React โดยใช้ span.setAttribute('user.id', userId) ทำเช่นเดียวกันที่แบ็กเอนด์ จากนั้นคุณจะกรองระบบแบ็กเอนด์ด้านการสังเกตการณ์เพื่อแสดงแทรซทั้งหมดของผู้ใช้ ID ใด ID หนึ่งได้ ทำให้วินิจฉัยปัญหาที่ลูกค้ารายใดรายหนึ่งรายงานได้

สร้าง ID เซสชันที่ไม่ซ้ำกันเมื่อโหลดหน้าเว็บ และกำหนดเป็น session.id ในสแปนทั้งหมดของส่วนหน้า ส่ง ID นี้ไปในส่วนหัวคำขอเพื่อให้แบ็กเอนด์เพิ่ม ID เดียวกันลงในสแปนของแบ็กเอนด์ด้วย การเชื่อมโยงเซสชันช่วยให้สร้างลำดับการกระทำทั้งหมดที่ผู้ใช้ทำในเซสชันเดียวขึ้นใหม่ได้

เครื่องมือเชิงพาณิชย์อย่าง Datadog ผสานเซสชัน RUM เข้ากับแทรซ APM ได้โดยตรง SDK RUM ของ Datadog จะฉีดส่วนหัวเฉพาะ (X-Datadog-Trace-Id) ลงในคำขอเครือข่าย และ SDK APM ของ Datadog ที่แบ็กเอนด์จะอ่านส่วนหัวนี้เพื่อเชื่อมการเล่นเซสชัน RUM เข้ากับแทรซแบบกระจาย คุณจึงดูการเล่นเซสชันพร้อมกับแทรซได้ในเวลาเดียวกัน

ลองพิจารณาผู้ใช้ที่ร้องเรียนว่าการชำระเงินช้า เมื่อมีแทรซที่เชื่อมโยงกัน คุณจะค้นหาด้วย user.id ในระบบแบ็กเอนด์ด้านการสังเกตการณ์ พบแทรซของการชำระเงิน และเห็นได้ทันทีว่าความล่าช้าเกิดจากคำสั่งค้นหาฐานข้อมูลที่ใช้เวลา 900ms ซึ่งเชื่อมตารางขนาดใหญ่สองตารางเข้าด้วยกัน เป็นสิ่งที่มองไม่เห็นจากเมตริกส่วนหน้าเพียงอย่างเดียว

เบราว์เซอร์ไม่สามารถส่งแทรซโดยตรงไปยัง Jaeger หรือระบบแบ็กเอนด์อื่น ๆ ได้ เนื่องจากข้อจำกัดของ CORS และความเสี่ยงที่ข้อมูลรับรองจะรั่วไหล ให้เรียกใช้ OpenTelemetry Collector เป็นพร็อกซีแทน โดยกำหนดค่า OTLPTraceExporter ให้ส่งข้อมูลไปยังจุดปลายทางของ Collector จากนั้น Collector จะกระจายข้อมูลต่อไปยัง Jaeger, Grafana Tempo หรือระบบแบ็กเอนด์อื่นใดก็ได้

แทรซจากส่วนหน้าอาจเก็บข้อมูลอ่อนไหวโดยไม่ตั้งใจ เช่น ค่าฟิลด์แบบฟอร์มใน URL, PII ในคุณลักษณะของสแปน และโทเค็นเซสชันในส่วนหัว ตรวจสอบการวัดระบบของคุณเพื่อให้แน่ใจว่าจะไม่มีข้อมูลอ่อนไหวรวมอยู่ในคุณลักษณะของสแปน ใช้ span.setAttribute เท่าที่จำเป็น และทำความสะอาดพารามิเตอร์คำค้นหาใน URL ก่อนบันทึก

ส่วนหัว traceparent ของ W3C TraceContext มีรูปแบบอย่างไร

การเชื่อมโยงแทรซของส่วนหน้าและแบ็กเอนด์ทำให้มองเห็นเส้นทางคำขอของผู้ใช้ได้ตั้งแต่ต้นจนจบ ส่วนหัว traceparent ของ W3C TraceContext จะเชื่อมสแปนคำขอเครือข่ายของเบราว์เซอร์กับสแปนแบ็กเอนด์โดยอัตโนมัติผ่านเครื่องมือวัดของ OpenTelemetry เพิ่ม user.id และ session.id ลงในสแปนทั้งหมดเพื่อการแก้ไขจุดบกพร่องแบบเจาะจง ใช้ OpenTelemetry Collector เป็นพร็อกซีระหว่างเบราว์เซอร์กับแบ็กเอนด์ เพื่อหลีกเลี่ยงปัญหา CORS และการเปิดเผยข้อมูลรับรอง