สะพานเชื่อม Sentry, Bugsnag & Datadog RUM

เร่งงานวิศวกรรมและ QA โดยเชื่อมข้อยกเว้น JavaScript ฝั่งหน้าเว็บกับบันทึกเซสชันวิดีโอ MousePlayer โดยตรง

1. ปัญหา: Stacktrace ไม่แสดงบริบทผู้ใช้

เมื่อเกิดข้อยกเว้น JavaScript ที่ไม่จัดการหรือเครือข่ายขัดข้อง เครื่องมือตรวจอย่าง Sentry ให้ stacktrace และสตริง user-agent แห้งๆ แต่วิศวกรยังถามว่า: “ผู้ใช้คลิกปุ่มไหนก่อนขัดข้อง” หรือ “ป้อนข้อมูลอะไรในแบบฟอร์ม”

สะพานเชื่อม ติดตามข้อผิดพลาด MousePlayer แก้โดยเชื่อม URL ภาพเล่นย้อนหลังเข้ารายงานอัตโนมัติ เมื่อเกิดข้อยกเว้น วิศวกรคลิกลิงก์เดียวใน Sentry หรือ Bugsnag เพื่อดูวิดีโอหน้าจอผู้ใช้จนถึงมิลลิวินาทีที่ขัดข้อง

เชื่อมต่อโดยไม่เพิ่มภาระ: สะพานทำงานเงียบๆ เป็นตัวเฝ้าดูเบื้องหลังใน mp.js ตรวจ SDK ข้อผิดพลาดเองโดยไม่เพิ่มภาระที่วัดได้หรือกระทบ Core Web Vitals

2. เปิดใช้งาน & จับคู่ผู้ให้บริการ

เปิดผ่านแดชบอร์ดหรือเขียนโปรแกรมผ่านอ็อบเจ็กต์ตั้งค่า SDK ได้

วิธี A: เปิดในแดชบอร์ด (ไม่ใช้โค้ด)

  1. ลงชื่อเข้าใช้พื้นที่ทำงาน MousePlayer แล้วเปิด ทรัพยากรของคุณ
  2. คลิกปุ่ม การตั้งค่า / การเชื่อมต่อ ข้างเว็บไซต์เป้าหมาย
  3. ในหน้าต่างการเชื่อมต่อ เปลี่ยน สะพานเชื่อม Sentry, Bugsnag & Datadog RUM เป็น ON
  4. เลือกผู้ให้บริการ (sentry, bugsnag หรือ datadog) แล้วคลิก บันทึกการเปลี่ยนแปลง

วิธี B: ตั้งค่าสคริปต์เอง

หากต้องการใส่การตั้งค่าในโค้ด ให้ส่ง error_bridge_active: true ภายในอ็อบเจ็กต์ window.mp_config:

<!-- MousePlayer SDK with Error Tracking Bridge Enabled --> <script> window.mp_config = { channel: 'YOUR_CHANNEL_ID', error_bridge_active: true, error_provider: 'sentry' // 'sentry', 'bugsnag', or 'datadog' }; </script>

3. ตารางการทำงาน SDK ทางเทคนิค

ตามผู้ให้บริการที่เลือก MousePlayer เรียกเมธอดติดแท็ก JavaScript SDK ทางการอัตโนมัติ:

ผู้ให้บริการ เมธอด JavaScript ที่เรียก คีย์เมทาดาทาที่เพิ่ม
Sentry window.Sentry.setTag(...) mouseplayer_session_url
Bugsnag window.Bugsnag.addMetadata('MousePlayer', { ... }) session_url
Datadog RUM window.DD_RUM.setGlobalContextProperty(...) mouseplayer_session_url

4. หาการเล่นย้อนหลังในรายงานข้อผิดพลาดที่ใด

เมื่อเปิด URL เล่นย้อนหลังจะปรากฏทันทีในแดชบอร์ดตรวจข้อผิดพลาดทุกครั้งที่บันทึกการขัดข้องหน้าเว็บ

รายละเอียดปัญหา Sentry

เปิดปัญหาใดก็ได้ในโปรเจกต์ Sentry แล้วเลื่อนลงส่วน Tags จะเห็นแท็กชื่อ mouseplayer_session_url กรองปัญหา Sentry ผ่านแถบค้นหาคำค้นได้ด้วย: mouseplayer_session_url:*

แท็บเมทาดาทา Bugsnag

ในรายงานข้อผิดพลาด Bugsnag ดูแท็บนำทางด้านล่าง มีแท็บกำหนดเองใหม่ชื่อ MousePlayer ซึ่งมีไฮเปอร์ลิงก์ session_url ที่คลิกได้

Datadog RUM Error Explorer

ใน Datadog RUM ไปเซสชันข้อผิดพลาดที่บันทึก แล้วตรวจโครงสร้าง JSON Global Context / Attributes URL ถูกจัดเก็บใต้คีย์ @mouseplayer_session_url

เครื่องหมายการค้าทั้งหมดที่กล่าวถึงเป็นของเจ้าของแต่ละราย MousePlayer ไม่มีความสัมพันธ์ทางธุรกิจกับผู้ให้บริการเหล่านี้