การดีบั๊กเรื่องพวกนี้

มือใหม่มักคิดว่านักพัฒนาที่มีประสบการณ์ไม่เคยทำพลาด

แต่ความจริงนั้นต่างออกไป

นักพัฒนาที่มีประสบการณ์แค่หาและแก้ไขข้อผิดพลาดได้เร็วกว่าเท่านั้น

เมื่อเร็วๆ นี้ ผมได้สร้างแอปจัดการโปรเจกต์แบบ full-stack โดยใช้ React, Zustand, Express, Prisma และ PostgreSQL ผมเจอข้อผิดพลาดเล็กๆ น้อยๆ เป็นสิบๆ ครั้ง บั๊กเหล่านี้สอนให้ผมรู้ว่าแอป frontend สมัยใหม่ทำงานอย่างไร

และนี่คือบทเรียนที่ผมได้รับ:

  • React useEffect และ Async คุณไม่สามารถส่ง async function เข้าไปใน useEffect โดยตรงได้ เพราะ React คาดหวังฟังก์ชันสำหรับ cleanup หรือไม่ก็ไม่ต้องส่งอะไรเลย แต่ async function จะคืนค่าเป็น Promise ซึ่งผิดกฎนี้ ดังนั้นควรใช้ฟังก์ชันซ้อนอยู่ภายใน effect แทน

  • ฟังก์ชันที่ถูกลืม ครั้งหนึ่งผมเคยเขียน async function ไว้ใน useEffect แต่ดันลืมเรียกใช้งานมัน ผลคือ component ทำงาน (mounted) แต่ไม่มีอะไรเกิดขึ้น บางครั้งบั๊กก็เป็นแค่เรื่องของการลืมเรียกใช้ฟังก์ชันเท่านั้นเอง

  • โครงสร้างข้อมูลของ Axios Axios จะคืนค่ากลับมาเป็น object โดยข้อมูลของคุณจะอยู่ใน response.data หากคุณพยายามบันทึก response ทั้งหมดลงใน state แอปของคุณก็จะทำงานผิดพลาด

  • URL ซ้ำซ้อน Axios instance ของผมมีการตั้งค่า base URL ไว้แล้ว แต่ผมดันไปใส่ API prefix ซ้ำอีกครั้งใน request ทำให้เกิด path ซ้ำซ้อนอย่าง /api/api/projects ดังนั้นควรตรวจสอบการทำ abstraction ของคุณเสมอ

  • ข้อผิดพลาดในการนำทาง (Navigation Errors) คอมโพเนนต์ Navigate จะทำงานเฉพาะระหว่างการ rendering เท่านั้น หากคุณต้องการเปลี่ยนหน้าผู้ใช้หลังจากที่มีการคลิก ให้ใช้ hook useNavigate แทน

  • Backend Contracts Backend ของผมส่ง property ที่ชื่อ accessToken มา แต่ Frontend ของผมกลับมองหา property ที่ชื่อ token เพราะชื่อไม่ตรงกัน auth state ของผมจึงกลายเป็น undefined ตลอดเวลา Frontend และ Backend ต้องใช้ชื่อที่ตรงกันเสมอ

  • ปัญหาเรื่องจังหวะเวลา (Timing Issues) แอปของผมพยายามดึงข้อมูลการแจ้งเตือนก่อนที่ผู้ใช้จะล็อกอิน ซึ่งทำให้เกิด error 401 วิธีแก้ไม่ใช่การเลิกเช็กการแจ้งเตือน แต่คือการเช็กการยืนยันตัวตน (authentication) ก่อนที่จะทำการส่ง request

บทเรียนที่ยิ่งใหญ่ที่สุดคือเรื่อง workflow ของผม เลิกเดาสุ่มได้แล้ว

ให้ใช้กระบวนการนี้แทน:

  • ตรวจสอบ browser console
  • ตรวจสอบ Network tab
  • ตรวจสอบ API response
  • ตรวจสอบ backend contract
  • ตรวจสอบ state ของคุณ
  • ติดตามการไหลของข้อมูลตั้งแต่ database ไปจนถึง UI

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

จงสร้างอะไรที่ใช้งานได้จริง แล้วบั๊กจะสอนคุณได้มากกว่าบทเรียนใดๆ

Source: https://dev.to/chinwuba_jeffrey/debugging-this-stuff-59b5