แชร์กรณีดีบัก: แก้ปัญหา Suspense แบบไม่สิ้นสุดจากการใช้ IndexedDB ผิดวิธี

ไม่กี่สัปดาห์ก่อน ในโปรดักต์ของบริษัทเราเริ่มใช้ IndexedDB บนฝั่งฟรอนต์เอนด์กันมากขึ้น หลังจากนั้นก็ได้เจอปัญหาที่ไม่ง่ายนักในการรับมือและแก้ไข จึงอยากมาแชร์ประสบการณ์การดีบักครั้งนี้

สรุป 3 บรรทัด

1. การรักษาสภาพแวดล้อมหน้างานไว้เดิมมีความสำคัญมากต่อการดีบัก ถ้ามีสภาพแวดล้อมที่ทำให้เกิดปัญหาซ้ำได้ ก็อย่าเพิ่งไปแตะต้องมัน
2. ตอนใช้ IndexedDB ถ้าออกแบบให้การเชื่อมต่อจะปิดได้ก็ต่อเมื่อจบเซสชันเท่านั้น ต้องปิดการเชื่อมต่อใน event handler ของ blocked และ versionchange ด้วยเสมอ
3. (อิงตาม React 18 ขึ้นไป) ถ้าคุณกำลังเขียนโค้ดที่ทำให้เกิดสถานะ suspended ได้ นอกเหนือจากการเรียก API ก็ต้องระวังไม่ให้ตกอยู่ใน infinite Suspense เช่นกัน ฝั่งเรา นอกจากจัดการข้อ 2 แล้ว ยังเปลี่ยนการทำงานให้โยน error หากมีการเรนเดอร์ Suspense fallback เดิมต่อเนื่องเกิน 10 วินาที ไม่ว่าด้วยสาเหตุใดก็ตาม