การจะระบุว่า defect เกิดจาก backend หรือ frontend สามารถพิจารณาได้จากปัจจัยต่อไปนี้:
1. ตรวจสอบจาก Error Message หรือ Console Logs
- Frontend Issue:
- เปิด DevTools (F12) → ไปที่แท็บ Console หรือ Network
- หากมี JavaScript error, CSS issue, หรือ API response ไม่ถูกต้อง อาจเป็นปัญหาของ frontend
| ปัญหา | อธิบาย | ผลกระทบ | ตัวอย่าง |
|---|
| JavaScript Error | การเข้าถึง property ของ object ที่ไม่ได้กำหนดค่า | UI หยุดทำงาน หรือแสดงข้อมูลผิด | Cannot read property 'name' of undefined |
| CSS Issue | การตั้งค่าตำแหน่งหรือเลย์เอาท์ไม่ถูกต้อง | UI แสดงผิด หรือฟังก์ชันไม่สามารถคลิกได้ | ปุ่ม “Submit” ซ้อนทับด้วยแถบเมนู |
| API Response ไม่ถูกต้อง | API ส่งข้อมูลผิด หรือไม่มีข้อมูล | ข้อมูลไม่แสดงหรือแสดงผลผิด | API ตอบกลับ 404 หรือข้อมูลไม่ครบ |
- Backend Issue:
- ไปที่แท็บ Network → ตรวจสอบ API response
- ถ้า API request ไปแล้วได้ 500 Internal Server Error, 404 Not Found หรือ 401 Unauthorized อาจเป็นปัญหาของ backend
- ดูรายละเอียด response message หรือ stack trace
2. ตรวจสอบ API Request & Response
- ลองเปิด Network ดู API request ที่ถูกส่งไป
- ถ้า request ถูกต้อง แต่ response ผิดหรือช้า → Backend อาจมีปัญหา
- ถ้า request ผิด หรือ UI ไม่ได้ส่ง request เลย → Frontend อาจมีปัญหา
API Response ไม่ถูกต้อง อาจเป็น defect ทั้งใน frontend และ backend ขึ้นอยู่กับสาเหตุที่แท้จริงของปัญหา:
1. Backend Issue (Defect at Backend)
หาก API ตอบกลับข้อมูลที่ไม่ถูกต้อง เช่น:
- ส่ง ข้อมูลผิดพลาด หรือ ข้อมูลไม่ครบ (ข้อมูลที่ส่งไม่ตรงกับที่ UI คาดหวัง)
- ส่ง error code เช่น
500 Internal Server Error,404 Not Found, หรือ403 Forbidden - ฐานข้อมูล ที่ API เรียกใช้ไม่สามารถให้ข้อมูลได้ หรือ API ไม่สามารถประมวลผลคำขอได้
ตัวอย่าง:
- เมื่อ API ที่ backend ถูกเรียกแล้วไม่สามารถดึงข้อมูลจากฐานข้อมูลได้และตอบกลับเป็น
500 Internal Server Error - หรือ API ส่งข้อมูลที่ไม่ตรงกับฟอร์แมตที่ UI ต้องการ เช่น ส่ง
nullแทนที่จะส่งค่าของฟิลด์ที่คาดหวัง
2. Frontend Issue (Defect at Frontend)
หาก frontend ส่ง request ไปยัง API ไม่ถูกต้อง หรือไม่สามารถจัดการกับ response ได้อย่างถูกต้อง:
- API request ที่ frontend ส่งไม่ถูกต้อง เช่น URL ของ endpoint ผิด, parameter ที่ส่งผิด
- การประมวลผลข้อมูล ที่ได้จาก API ใน frontend ไม่ถูกต้อง เช่น การแสดงผลข้อมูลผิดหรือไม่แสดงข้อมูลตามที่ได้รับมา
ตัวอย่าง:
- หน้าเว็บส่ง request ไปยัง API ที่ถูกต้อง แต่ใน frontend พยายามเข้าถึง property ที่ไม่ถูกต้องจากข้อมูล API (เช่น การพยายามใช้ข้อมูลที่ไม่มีอยู่ใน response)
- หรือ frontend อาจมี bug ที่ทำให้ไม่สามารถแสดงข้อมูลจาก API ได้ตามที่ควร
สรุป:
- ถ้า API ส่งข้อมูลไม่ถูกต้อง หรือมีข้อผิดพลาดในการตอบกลับ (เช่น error code 500 หรือข้อมูลผิด) เป็นปัญหาจาก backend.
- ถ้า frontend ส่ง request ไปยัง API ผิด หรือไม่สามารถจัดการกับข้อมูลจาก API ได้อย่างถูกต้อง เป็นปัญหาจาก frontend.
การวิเคราะห์และตรวจสอบ logs จากทั้ง frontend และ backend จะช่วยให้คุณระบุแหล่งที่มาของปัญหานี้ได้ชัดเจน
3. ลองเปลี่ยน Data และทดสอบซ้ำ
- ถ้าเปลี่ยนค่า input แล้ว UI แสดงผลผิดปกติ แต่ API response ถูกต้อง → เป็นที่ frontend
- ถ้า API response ผิด แม้ UI ส่ง request ถูกต้อง → เป็นที่ backend
4. ตรวจสอบกับ Database หรือ Logs ของ Backend
- ถ้า API ส่งค่าถูกต้อง แต่ข้อมูลใน Database ไม่อัปเดต หรือ API ดึงข้อมูลมาผิด อาจเป็นปัญหาของ backend
5. ใช้ Postman หรือ Curl ทดสอบ API โดยตรง
- ถ้าใช้ Postman ยิง API ตรง ๆ แล้วยังได้ response ผิด → Backend มีปัญหา
- ถ้า API ตอบถูก แต่ UI แสดงผิด → Frontend มีปัญหา
สรุป
| อาการ | น่าจะเป็นปัญหาของ |
|---|---|
| หน้าเว็บโหลดไม่ขึ้น, มี JavaScript error | Frontend |
| UI ไม่อัปเดตหลังจากกดปุ่ม แต่ API ตอบกลับถูกต้อง | Frontend |
| API ไม่ถูกเรียกเลยเมื่อกดปุ่ม | Frontend |
API ตอบกลับ 500, 404, 401 หรือข้อมูลผิด | Backend |
| ใช้ Postman ทดสอบ API แล้วได้ข้อมูลผิด | Backend |
| API response ช้า หรือ timeout | Backend |
วิธีที่ดีที่สุดคือดูที่ logs และตรวจสอบ request-response อย่างละเอียด แล้วค่อย debug ต่อไป
