บทความ IT เจ๋งๆ
เทคนิคการจัดการ Error ใน JavaScript ทั้ง Frontend และ Backend
08-ต.ค.-25
คัมภีร์เทพ IT
การเขียน Code ด้วย JavaScript มักหนีไม่พ้นการเจอกับ Errors ที่คาดไม่ถึง หากไม่จัดการอย่างเหมาะสม อาจทำให้ App พังเหรือเกิดปัญหาตามมาได้ บทความนี้จะแนะนำ เทคนิคการจัดการ Error ใน JavaScript ทั้ง Frontend และ Backend ครอบคลุมตั้งแต่ Try-Catch จนถึงการทำ Centralized Error Handling เพื่อช่วยให้ Code ของคุณเสถียร, ปลอดภัย และรองรับการใช้งานจริงได้อย่างมั่นใจยิ่งขึ้น
1. พื้นฐานของ try-catch-finally
JavaScript มีวิธีง่ายแต่ทรงพลังในการจับข้อผิดพลาดด้วย try-catch
Code ใน try Block คือสิ่งที่เราพยายาม Run ถ้ามี Error เกิดขึ้น catch Block จะเข้ามาจัดการ ส่วน finally Block จะทำงานเสมอ ไม่ว่าจะมี Error หรือไม่ ซึ่งเหมาะกับงานที่ต้อง Cleanup เช่น ปิด DB Connections หรือหยุด Loaders
เคล็ดลับ: ให้ Wrap เฉพาะ Code ที่ “อาจ” ล้มเหลวภายใน try ไม่ใช่ทุกอย่าง
2. การจับ Error แบบ Synchronous vs Asynchronous
นี่คือจุดที่ Developers ส่วนใหญ่มักทำพลาด: try-catch ไม่สามารถจับ Async Errors ได้ เว้นแต่คุณจะใช้ await หรือ .catch() ให้ถูกต้อง
มันจะล้มเหลวโดยไม่มีสัญญาณเตือน ดังนั้นวิธีที่ถูกต้องในการจัดการ async errors คือ:
ใช้ await เสมอถ้าอยากให้ try-catch จับ Error ได้ หรือจัดการด้วย .catch() ใน Promise
3. การสร้าง Custom Errors
บางครั้ง Built-in Errors ก็อาจยังไม่เพียงพอ ดังนั้น คุณสามารถสร้าง Custom Error เพื่อ throw ปัญหาที่เจาะจงกับ Domain ของคุณได้
สิ่งนี้มีประโยชน์กับระบบที่ซับซ้อน: ฝั่ง Frontend แสดงข้อความที่ Users เข้าใจได้ง่าย ในขณะที่ Backend จะเก็บ Log ที่ละเอียดของ Error เพื่อการ Debug
4. การจัดการ Error แบบรวมศูนย์ (Frontend)
ใน Frontend Apps (โดยเฉพาะ SPA Frameworks อย่าง React) การมีจุดรวมศูนย์ไว้จับ Error ที่หลุดมา ถือเป็นเรื่องที่ดี
คุณสามารถใช้วิธีนี้ใน Production เพื่อส่ง Log ไปที่ Monitoring Tools อย่าง Sentry หรือ LogRocket
5. การจัดการ Error แบบรวมศูนย์ (Node.js)
สำหรับ Node.js โดยเฉพาะ Express Apps การมีการจัดการ Error แบบรวมศูนย์ ถือเป็นสิ่งที่จำเป็น
ใช้ next(err) ภายใน Route Handlers เพื่อส่ง Errors ไปที่ Middleware
คุณยังสามารถ Tag Error ตามระดับความรุนแรง และใช้ Winston สำหรับ Logging อีกด้วย
6. Throw ให้เร็ว Fail ให้ไว
Apps ที่ดีไม่ควรซ่อน Errors แต่ควรจะแสดงปัญหาให้เห็นตั้งแต่เนิ่น ๆ แล้วตรวจจับให้ได้โดยเร็ว และให้ Developers จัดการได้
การ catch ถือเป็นทางเลือก แต่การ throw คือสิ่งที่ต้องทำ อย่าคืนค่า Null หรือ NaN ถ้ารู้ว่ามันคือปัญหา
คุณควรยึดหลัก “validate ก่อนใช้” ใน API เสมอ เพื่อให้ Input ที่ไม่ถูกต้อง จะไม่ไปถึง Code สำคัญ
7. ตัวอย่างจริง: การตรวจสอบและจัดการ Error ใน Express
ลองมาดูตัวอย่าง API Route ที่จัดการ Errors อย่างถูกต้อง
ใน Error Middleware:
สิ่งนี้จะช่วยปกป้อง App จัดการ Errors ให้สะอาด และยังเปิดโอกาสให้คุณขยายประเภทของ Error ได้ในอนาคต
8. อย่าแค่จับ Error แต่ต้องจัดการอย่างเหมาะสมด้วย
การจับ Error ไม่ใช่จุดจบ แต่คุณต้องตัดสินใจว่าจะทำอะไรต่อ เช่น:
- Retry (สำหรับ Network Error)
- แสดงข้อความที่เป็นมิตรต่อ Users
- ส่ง Log ไปยัง Service (เช่น Sentry)
- Redirect Users
- กลับไปใช้ค่าเริ่มต้นของระบบ
อย่าปล่อยให้ Users เจอ Exception ตรง ๆ พวกเขาไม่สนใจ TypeError ของคุณ แต่สิ่งที่เขาต้องการก็คือ Apps ที่ยังคงใช้งานได้
สรุป
และนี่ก็เป็น เทคนิคการจัดการ Error ใน JavaScript ทั้ง Frontend และ Backend เพราะการจัดการ Error ใน JavaScript ถือเป็นหัวใจสำคัญของ Code ที่เสถียรและปลอดภัย ด้วยเทคนิคต่าง ๆ ทั้งหมดนี้ จะช่วยให้ App ของคุณพร้อมรับมือกับปัญหาได้อย่างมืออาชีพ
ที่มา: https://javascript.plainenglish.io/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด