ข้ามไปยังเนื้อหาหลัก
Clinford Jordano Valencia
โปรเจกต์ทั้งหมด
แพลตฟอร์มเว็บมือถือ

แพลตฟอร์มเทเลเมทรีฝั่งฟรอนต์เอนด์แบบเรียลไทม์

SDK ฝั่งฟรอนต์เอนด์ที่มีชนิดข้อมูลและไปป์ไลน์อีเวนต์ ทำให้มองเห็นโฟลว์ผู้ใช้หลายขั้นตอนได้แบบเรียลไทม์ ลดเวลาตรวจพบเหตุขัดข้องจากหลายวันเหลือไม่กี่นาที

เทคโนโลยี
TypeScript · BFF · Event streaming · Columnar storage · Dashboards

ปัญหา

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

แนวทาง

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

ผลลัพธ์

เวลาตรวจพบเหตุขัดข้องลดจากหลายวันเหลือไม่ถึง 5 นาที เมื่อขั้นตอนที่พังหมายถึงความพยายามที่ล้มเหลวจำนวนมาก นั่นคือความต่างระหว่างบันทึกหนึ่งบรรทัดในโพสต์มอร์เทมกับการแก้ไขได้ภายในเช้าวันเดียวกัน