การตรวจสอบผู้ใช้จริงและตัวชี้วัดเว็บ

แพ็กเกจ npm web-vitals ของ Google มี API อย่างง่ายสำหรับวัด Core Web Vitals ในเบราว์เซอร์ของผู้ใช้จริง ติดตั้งด้วย npm install web-vitals แล้วนำเข้าฟังก์ชันเรียกกลับของเมตริกแต่ละรายการ ได้แก่ onLCP, onFID (เลิกใช้แล้ว), onCLS, onFCP, onTTFB และ onINP รุ่นใหม่สำหรับการโต้ตอบจนถึงการวาดครั้งถัดไป

ฟังก์ชันเรียกกลับแต่ละรายการ (onLCP, onCLS, onINP และอื่น ๆ) จะได้รับออบเจ็กต์เมตริกที่มีข้อมูลต่อไปนี้: name ('LCP'), value (มิลลิวินาทีหรือคะแนนที่ไม่มีหน่วย), rating ('good', 'needs-improvement', 'poor') และ id (ตัวระบุเฉพาะสำหรับกำจัดข้อมูลซ้ำ) ฟังก์ชันเรียกกลับจะทำงานเมื่อค่าของเมตริกสรุปผลเรียบร้อยแล้ว

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

หากต้องการผสาน Web Vitals เข้ากับ OpenTelemetry ให้สร้างเครื่องมือวัดแบบเกจสำหรับแต่ละเมตริก: const lcp = meter.createObservableGauge('web_vitals.lcp') ในฟังก์ชันเรียกกลับ onLCP แต่ละรายการ ให้บันทึกค่าพร้อมคุณลักษณะที่เกี่ยวข้อง (เส้นทางหน้าเว็บ ประเภทอุปกรณ์) จากนั้นระบบแบ็กเอนด์ด้านการสังเกตการณ์ของคุณจะสามารถแจ้งเตือนเมื่อค่า P75 LCP แย่ลงได้

หากต้องการวัดประสิทธิภาพเฉพาะของ React ที่ Web Vitals ไม่ได้เก็บข้อมูลไว้ ให้ใช้ User Timing API: performance.mark('render-start') ก่อนเรนเดอร์, performance.mark('render-end') หลังเรนเดอร์ จากนั้นใช้ performance.measure('component-render', 'render-start', 'render-end') การวัดเหล่านี้จะแสดงในแท็บ Performance ของ Chrome DevTools

คอมโพเนนต์ React Profiler จะครอบส่วนย่อยของต้นไม้คอมโพเนนต์ และเรียกฟังก์ชันเรียกกลับ onRender พร้อมข้อมูลเวลา ได้แก่ id (รหัสของ Profiler), phase ('mount' หรือ 'update'), actualDuration (เวลาเรนเดอร์จริง) และ baseDuration (เวลาเรนเดอร์โดยประมาณหากไม่มีการจดจำผลลัพธ์) ใช้สิ่งนี้ระหว่างการพัฒนาเพื่อค้นหาคอมโพเนนต์ที่ทำงานช้า

สามารถบันทึกข้อผิดพลาดที่ไม่ได้จัดการและการปฏิเสธ Promise ได้เป็นสแปนของ OpenTelemetry ที่มีสถานะข้อผิดพลาด ตั้งค่าตัวรับฟังส่วนกลางดังนี้: window.addEventListener('error', handler) และ window.addEventListener('unhandledrejection', handler) สร้างสแปน กำหนดสถานะด้วย span.setStatus({ code: SpanStatusCode.ERROR }) เพิ่มข้อความข้อผิดพลาดและแทรซสแตกเป็นคุณลักษณะ แล้วจบสแปน

ขอบเขตข้อผิดพลาดของ React จะดักจับข้อผิดพลาดระหว่างการเรนเดอร์ในต้นไม้คอมโพเนนต์ ในเมธอด componentDidCatch ให้สร้างสแปนของ OpenTelemetry ที่แสดงข้อผิดพลาด กำหนดสถานะเป็น ERROR เพิ่ม error.message และ componentStack เป็นคุณลักษณะ แล้วเรียก span.end() วิธีนี้จะส่งข้อผิดพลาดจากการเรนเดอร์ของ React เข้าสู่กระบวนการส่งแทรซแบบกระจายของคุณ

JavaScript สำหรับใช้งานจริงที่ถูกย่อขนาดจะสร้างแทรซสแตกที่อ่านไม่ออก เช่น "a.b at bundle.min.js:1:84721" ให้อัปโหลดแผนที่ต้นฉบับไปยัง Sentry, Datadog หรือกระบวนการส่งข้อมูล OpenTelemetry ระหว่างกระบวนการสร้าง CI/CD เพื่อให้ระบบแก้ไขแทรซสแตกดิบเป็นชื่อไฟล์ TypeScript และหมายเลขบรรทัดต้นฉบับโดยอัตโนมัติ

การส่งข้อมูลแทรซทั้งหมดสำหรับทุกเซสชันมีค่าใช้จ่ายสูง ให้ใช้การสุ่มตัวอย่างเซสชัน โดยสุ่มกำหนดตัวบ่งชี้ sessionSampled เมื่อโหลดหน้าเว็บครั้งแรก และจัดเก็บไว้ใน sessionStorage เริ่มต้นใช้งาน OpenTelemetry SDK และส่งแทรซเฉพาะเซสชันที่ถูกสุ่มเลือกเท่านั้น (เช่น 10%) ส่วนเซสชันที่มีข้อผิดพลาดต้องสุ่มตัวอย่าง 100% เสมอ

การรายงาน Web Vitals เป็นเมตริกของ OpenTelemetry ช่วยให้แจ้งเตือนตาม SLO ได้ หากค่า P75 LCP สูงเกิน 2.5 วินาทีในเซสชันมากกว่า 5% ภายในช่วงเวลา 1 ชั่วโมง ให้ส่งการแจ้งเตือน วิธีนี้ทำให้ทีมวิศวกรรมได้รับสัญญาณที่นำไปดำเนินการได้และเชื่อมโยงโดยตรงกับประสบการณ์ของผู้ใช้ แทนที่จะอาศัยเพียงเมตริกของโครงสร้างพื้นฐานแบ็กเอนด์

ฟังก์ชันเรียกกลับ onLCP จากไลบรารี web-vitals จะทำงานเมื่อใด

ไลบรารี web-vitals มีฟังก์ชันเรียกกลับอย่างง่ายสำหรับวัด LCP, INP, CLS, FCP และ TTFB ในเบราว์เซอร์ของผู้ใช้จริง ให้รายงานค่าเหล่านี้เป็นเมตริกของ OpenTelemetry เพื่อแจ้งเตือนตาม SLO บันทึกข้อผิดพลาดผ่านตัวรับฟังส่วนกลางและขอบเขตข้อผิดพลาดของ React เป็นสแปนของ OpenTelemetry และอัปโหลดแผนที่ต้นฉบับเพื่อแก้ไขแทรซสแตกที่ถูกย่อขนาด สุ่มตัวอย่างเซสชันเพื่อควบคุมปริมาณข้อมูล พร้อมรักษาความครอบคลุมของข้อผิดพลาดไว้ 100%