Back to notes
mastery-frontend-typescript

จัดการ Error อย่างมืออาชีพใน TypeScript (Try-Catch & Custom Errors)

อย่าปล่อยให้เว็บพัง! เรียนรู้วิธีดักจับและจัดการ Error อย่างถูกต้อง รวมถึงการ Handle 'unknown' error ใน TypeScript

January 29, 20261 min read readNNexis by Seereen

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

HLJS TYPESCRIPT
// สร้าง 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

HLJS TYPESCRIPT
// ❌ ไม่ควรทำ (ไม่มี Stack Trace)
throw "Login Failed";

// ✅ ควรทำ
throw new Error("Login Failed");

References

Share this note

© 2026 My Notes by Seereen