การสังเกตการณ์ส่วนหน้า: อะไรและเหตุใดจึงสำคัญ

การสังเกตการณ์แบ็กเอนด์เป็นแนวทางที่มีการใช้งานอย่างแพร่หลายแล้ว: บันทึกเหตุการณ์จะเก็บเหตุการณ์ ตัวชี้วัดจะติดตามการใช้ทรัพยากร และร่องรอยแบบกระจายจะติดตามคำขอผ่านไมโครเซอร์วิส เครื่องมืออย่าง Datadog, Prometheus และ Jaeger ถูกนำไปใช้อย่างแพร่หลายในระบบแบ็กเอนด์จริง

การสังเกตการณ์ฟรอนต์เอนด์เป็นศาสตร์แขนงใหม่กว่าที่ติดตามประสบการณ์ของผู้ใช้ขณะโต้ตอบกับแอปพลิเคชัน React ของคุณ ซึ่งรวมถึงการบันทึกการโต้ตอบของผู้ใช้ การวัดประสิทธิภาพการแสดงผล การสังเกตคำขอเครือข่าย และการเก็บข้อผิดพลาด JavaScript ในเบราว์เซอร์

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

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

สิ่งที่เทียบเท่ากับตัวชี้วัดของแบ็กเอนด์ในฟรอนต์เอนด์คือ Web Vitals: LCP (การแสดงผลเนื้อหาขนาดใหญ่ที่สุด) ใช้วัดความเร็วในการโหลด INP (การตอบสนองต่อการโต้ตอบจนถึงการแสดงผลครั้งถัดไป) ใช้วัดการตอบสนอง และ CLS (การเลื่อนตำแหน่งของเค้าโครงสะสม) ใช้วัดความเสถียรทางภาพ ตัวชี้วัดเหล่านี้คือสิ่งที่ Google ใช้จัดอันดับ Core Web Vitals

บันทึกของฟรอนต์เอนด์จะเก็บข้อผิดพลาด คำเตือน และเหตุการณ์ให้ข้อมูลจากเบราว์เซอร์ สัญญาณหลัก ได้แก่ การเรียก console.error, ข้อยกเว้น JavaScript ที่ไม่ได้จัดการ (window.onerror), การปฏิเสธพรอมิสที่ไม่ได้จัดการ (window.onunhandledrejection) และข้อผิดพลาดที่ขอบเขตข้อผิดพลาดของ React จับไว้

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

การตรวจติดตามแบบสังเคราะห์ใช้เครื่องมืออัตโนมัติ (Lighthouse CI, Playwright, WebPageTest) เพื่อจำลองการโต้ตอบของผู้ใช้ในสภาพแวดล้อมที่ควบคุมได้ วิธีนี้ให้ผลที่คาดเดาได้และตรวจพบการถดถอยก่อนจะส่งผลถึงผู้ใช้ แต่ไม่สามารถเก็บความหลากหลายของอุปกรณ์ เครือข่าย และรูปแบบการใช้งานของผู้ใช้จริงได้

เครื่องมือเชิงพาณิชย์หลายรายการให้ความสามารถ RUM สำหรับ React แบบครบเครื่อง ได้แก่ Datadog RUM (ผสานรวมกับ Datadog APM เพื่อสร้างร่องรอยทั้งระบบ), New Relic Browser และ Sentry Performance (เก็บข้อผิดพลาดและประสิทธิภาพไว้ใน SDK เดียว) เครื่องมือเหล่านี้ผสานรวมได้รวดเร็ว แต่มีค่าใช้จ่ายสูงเมื่อใช้งานในขนาดใหญ่

OpenTelemetry เป็นโครงการของ CNCF ที่กำหนด API และ SDK แบบไม่ผูกกับผู้จำหน่ายสำหรับการรวบรวมร่องรอย ตัวชี้วัด และบันทึก เมื่อใช้ OpenTelemetry ติดตั้งเครื่องมือในระบบ คุณจะเป็นเจ้าของข้อมูลและสามารถส่งข้อมูลไปยังแบ็กเอนด์ที่เข้ากันได้ใด ๆ ก็ได้ เช่น Jaeger, Grafana Tempo, Honeycomb, Datadog หรือกระบวนการส่งข้อมูลของคุณเอง

หากไม่มีการสังเกตการณ์ฟรอนต์เอนด์ ประสบการณ์การใช้งานที่ช้าจะเกือบมองไม่เห็นสำหรับทีมวิศวกรรม คุณอาจเห็นจำนวนตั๋วแจ้งปัญหาจากลูกค้าเพิ่มขึ้นหรืออัตราการเปลี่ยนเป็นลูกค้าลดลง แต่หากไม่มีร่องรอยและตัวชี้วัดจากเบราว์เซอร์ การแยกหาสาเหตุรากจะต้องอาศัยการคาดเดา

ความแตกต่างสำคัญระหว่างการตรวจติดตามผู้ใช้จริง (RUM) กับการตรวจติดตามแบบสังเคราะห์คืออะไร

การสังเกตการณ์ฟรอนต์เอนด์นำเสาหลักทั้งสาม — ร่องรอย ตัวชี้วัด และบันทึก — มาใช้กับเบราว์เซอร์ RUM เก็บประสบการณ์ของผู้ใช้จริง ขณะที่การตรวจติดตามแบบสังเคราะห์ช่วยตรวจจับการถดถอยได้ตั้งแต่เนิ่น ๆ Web Vitals (LCP, INP, CLS) คือตัวชี้วัดสำคัญของฟรอนต์เอนด์ OpenTelemetry มอบมาตรฐานที่ไม่ผูกกับผู้จำหน่ายสำหรับการรวบรวมและส่งออกข้อมูลนี้ ทำให้คุณมีอิสระในการเลือกแบ็กเอนด์สำหรับการสังเกตการณ์