แพลตฟอร์มเว็บมือถือ
แพลตฟอร์มเทเลเมทรีฝั่งฟรอนต์เอนด์แบบเรียลไทม์
SDK ฝั่งฟรอนต์เอนด์ที่มีชนิดข้อมูลและไปป์ไลน์อีเวนต์ ทำให้มองเห็นโฟลว์ผู้ใช้หลายขั้นตอนได้แบบเรียลไทม์ ลดเวลาตรวจพบเหตุขัดข้องจากหลายวันเหลือไม่กี่นาที
- เทคโนโลยี
- TypeScript · BFF · Event streaming · Columnar storage · Dashboards
ปัญหา
ผู้ใช้บางส่วนหลุดออกจากโฟลว์หลายขั้นตอนที่ยาวโดยไม่มีเสียง เมื่อการเชื่อมต่อกับบุคคลที่สามเสีย ไม่มีใครเห็น การวินิจฉัยหมายถึงการอ่านล็อกเซิร์ฟเวอร์ที่กระจัดกระจายด้วยมือและใช้เวลาหลายวัน ทุกวันที่ผ่านไปคือผู้ใช้จริงที่ทำให้เสร็จไม่ได้
แนวทาง
- SDK ขนาดเล็กที่มีชนิดข้อมูล ตัวติดตาม TypeScript ตัวเดียวเก็บข้อมูลการกระทำของผู้ใช้ชุดเดียวกันในทุกหน้าจอและทุกแพลตฟอร์ม อีเวนต์จึงมีความหมายเหมือนกันทุกที่
- การจำกัดอัตราพร้อมวาล์วนิรภัย SDK รวมอีเวนต์เป็นชุดแล้วส่งเมื่อตัวจับเวลาสั้น ๆ หรือขีดจำกัดขนาดมาถึงก่อน การส่งหนึ่งคำขอต่อหนึ่งคลิกทำให้เธรดเครือข่ายของเบราว์เซอร์ขาดแคลน การถืออีเวนต์ไว้นานกว่านั้นเสี่ยงที่จะสูญหายเมื่อปิดแท็บ จึงใช้
navigator.sendBeaconตอนปิดหน้า - BFF ที่ตรวจสอบข้อมูล ชุดอีเวนต์ส่งไปที่ Backend for Frontend ซึ่งตรวจสคีมาเทียบกับนิยาม TypeScript ตรวจความสมเหตุสมผลของเวลา ตัดฟิลด์ที่ไม่คาดคิดและข้อมูลส่วนบุคคลออก และแนบเมทาดาทาของเซสชัน การเทียบคำตัดสินของแบ็กเอนด์กับสิ่งที่ UI แสดงช่วยเผยความไม่ตรงกันของสถานะระหว่างสองฝั่ง
- ไปป์ไลน์สตรีมมิงเข้าสู่ที่เก็บข้อมูลแบบคอลัมน์ สตรีมมิงรับมือช่วงทราฟฟิกพุ่ง ส่วนที่เก็บข้อมูลแบบคอลัมน์ตอบการรวมข้อมูลบนชุดอีเวนต์ขนาดใหญ่และมีความหลากหลายสูงได้ในไม่กี่มิลลิวินาที ขณะที่ที่เก็บแบบแถวทำงานช้ามาก
- การจัดการความล้มเหลวอย่างเงียบ ๆ หากไปป์ไลน์ล่ม SDK จะเก็บบัฟเฟอร์เล็ก ๆ ไว้ในเครื่อง และเซอร์กิตเบรกเกอร์แบบพาสซีฟจะหยุดส่ง มันไม่ได้ส่ง ping ไปที่เซิร์ฟเวอร์เพื่อเช็กสุขภาพ แต่รอการตอบกลับที่สำเร็จครั้งถัดไป
ผลลัพธ์
เวลาตรวจพบเหตุขัดข้องลดจากหลายวันเหลือไม่ถึง 5 นาที เมื่อขั้นตอนที่พังหมายถึงความพยายามที่ล้มเหลวจำนวนมาก นั่นคือความต่างระหว่างบันทึกหนึ่งบรรทัดในโพสต์มอร์เทมกับการแก้ไขได้ภายในเช้าวันเดียวกัน