𝗖𝗵𝗿𝗼𝗺𝗲 ใช้งานได้ปกติ แต่ 𝗙𝗶𝗿𝗲𝗳𝗼𝘅 กลับว่างเปล่า
ผมเจอ Bug ที่แปลกมาก ผมเปิดหน้าเว็บเดียวกันในสองเบราว์เซอร์วางคู่กัน
ใน Chrome ทุกอย่างทำงานได้ปกติ ผมเห็นทั้งรูปภาพ ปุ่ม และข้อมูล ใน Firefox ผมไม่เห็นอะไรเลย เห็นแต่การ์ดว่างๆ และข้อความที่บอกว่า "0 results found."
มันคือ URL เดียวกัน เป็น Build เดียวกัน และใช้เครื่องเดียวกัน
สาเหตุคือ Bug ที่แทบจะเป็นไปไม่ได้เลยที่จะหาเจอระหว่างการพัฒนา เพราะเบราว์เซอร์กำลังบล็อกการเรียก API ของผมเอง และผมดันพัฒนาบนเบราว์เซอร์เพียงตัวเดียวที่ไม่บล็อกมัน
ปัญหาคือ: หน้าเว็บใช้ JavaScript ในการดึงข้อมูลจากโดเมนภายนอก (Supabase) Firefox มีระบบ Enhanced Tracking Protection ผู้ใช้หลายคนยังใช้ ad blocker อย่าง uBlock Origin ด้วย เครื่องมือเหล่านี้จะมองเห็นโดเมนภายนอกและบล็อกคำขอ (request) ก่อนที่มันจะถูกส่งออกจากคอมพิวเตอร์เสียอีก
โค้ดไม่ได้พัง (crash) และไม่มี Error สีแดงขึ้นใน console การ fetch ข้อมูลแค่ส่งค่าว่างกลับมา จากนั้นโค้ดของผมก็แสดง "empty state" ตามที่ตั้งค่าไว้ สำหรับคนที่ดูผ่านๆ หน้าเว็บก็ดูเหมือนจะปกติดี แค่ดูเหมือนไม่มีข้อมูลเท่านั้น
Bug นี้มองไม่เห็นด้วยเหตุผลสองประการ:
- ผมพัฒนาบน Chrome ซึ่งอนุญาตให้เรียกใช้งานได้
- ระบบ Analytics ของผมใช้โดเมน API เดียวกัน ผู้ใช้ที่ไม่เห็นเนื้อหาก็จะไม่ถูกนับรวมในข้อมูลของผมด้วย
วิธีที่ผมแก้ไข:
ผมใช้ reverse proxy เพื่อย้ายคำขอไปอยู่ในฝั่งที่ได้รับความไว้ว