Overview
Error เป็นสิ่งที่เลี่ยงไม่ได้ แต่จัดการได้ การเขียน try-catch ที่ดีจะช่วย User Experience ไม่ให้หน้าขาวเมื่อเกิดปัญหา และช่วย Developer ให้รู้สาเหตุที่แท้จริง
Key Ideas
1. Try-Catch-Finally
- Try: ใส่โค้ดที่เสี่ยงจะพัง
- Catch: ทำงานเมื่อพัง
- Finally: ทำงานเสมอ (เหมาะสำหรับปิด Loading, ปิด Connection)
2. TypeScript unknown Error
ใน TypeScript เวอร์ชันใหม่ error ในบล็อก catch จะมี Type เป็น unknown (ไม่ใช่ any) เราต้องเช็ค Type ก่อนใช้
3. Custom Error
การสร้าง Error Class ของตัวเองช่วยให้เราแยกแยะชนิดของปัญหาได้ (เช่น NetworkError, ValidationError)
Example
// สร้าง Error เฉพาะทาง
class ApiError extends Error {
constructor(
public statusCode: number,
message: string,
) {
super(message);
this.name = "ApiError";
}
}
async function fetchData() {
try {
throw new ApiError(404, "User not found");
} catch (error: unknown) {
// ต้องตรวจสอบ Type ก่อนใช้งาน
if (error instanceof ApiError) {
console.error(`API Fail (${error.statusCode}): ${error.message}`);
} else if (error instanceof Error) {
console.error(`General Error: ${error.message}`);
} else {
console.error("Unknown error occurred");
}
} finally {
console.log("Cleanup...");
}
}
Pitfalls (สิ่งที่ควรระวัง)
❌ 1. Catch แล้วเงียบ (Swallowing Errors)
การดัก Error แล้วไม่ทำอะไรเลย หรือแค่ console.log แล้วปล่อยผ่าน อาจทำให้ระบบทำงานผิดพลาดต่อโดยหาสาเหตุไม่เจอ
✅ วิธีแก้: ถ้าจัดการไม่ได้ ให้ throw ต่อไปข้างนอก
❌ 2. ใช้ String เป็น Error
// ❌ ไม่ควรทำ (ไม่มี Stack Trace)
throw "Login Failed";
// ✅ ควรทำ
throw new Error("Login Failed");