ปัญหา Vue.js เรียก API แล้วค้างไปเลย บน Cloud Server ขึ้นสถานะ Pending ตลอด

ปัญหาที่เจอ

ปัญหานี้เกิดหลังจาก Deploy ขึ้น Cloud server ไปแล้ว ผมใช้ Vercel ซึ่งบน Local สามารถทำงานได้ปกติ และบน Cloud ไม่มี Error ใดๆ ทั้ง Frontend และ Backend

อาการของมันคือ หน้าเว็บไซต์จะค้างไปเลย เมื่อกด F12 ดูที่ Network จะเห็นว่า Service ไม่ Response กลับมาและขึ้นสถานะ Pending ตลอด

หาสาเหตุ

ผมลอง Debug ดูเคสเบื้องต้นทุกเคส ซึ่งใช้เวลาพอสมควรเลย เพราะผมหลงทางไปนาน พอย้อนกลับมาคิดดู หน้าอื่นๆมีการเรียก Service ตัวนี้เหมือนกันแต่สามารถ Response กลับมาได้ แสดงว่าปัญหาอยู่ที่ Frontend และ Code ในหน้านี้แหล่ะ ก็เริ่มหาจุดที่มันแปลกๆ จนไปเจอ Warning ใน Browser console (บน Cloud ไม่มี) ที่บอกว่า

[Vue warn]: Maximum recursive updates exceeded. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.

ผมก็ยังไม่แน่ใจหรอก ก็เลยลองทำให้ Warning อันนี้มันหายไปดู ซึ่ง Warning อันนี้มันบอกรายละเอียดด้วยว่ามาจาก Code บรรทัดไหน ต้องกดขยายดู จากที่ผมเข้าใจจะเป็นประมาณว่า Concept ของ Vue เนี่ย จะเป็นการ Reactive function แบบ Trigger กับตัวแปร เช่น มีตัวแปร A เป็น Array และตัวแปร A ถูกเรียกใช้ใน Function B เมื่อใดก็ตามที่ตัวแปร A มีการเปลี่ยนแปลง Function B ก็จะทำงานใหม่โดยอัตโนมัติ และ Warning บอกว่า มีการ Updates ซ้ำๆในตัวมันเองเกิน Maximum แล้วนะ และมีการยกเคสตัวอย่างมาว่าจะเกิดจากอะไรได้บ้าง ซึ่งเคสของผมน่าจะเป็น thus recursively triggering itself

แก้ไข

ผมย้าย Function ส่วนนั้น จากที่อยู่ใน Methods มาเป็น Computed

ทำให้ผมได้บทเรียนเลยว่าไม่ควรละเลย Warning ใดๆ 😅