JavaScript Error Handling และ try...catch

JavaScript

เรียนรู้การจัดการข้อผิดพลาดใน JavaScript ด้วย try...catch, finally, throw, Error objects และการรับมือกับข้อผิดพลาดใน Async/Await เพื่อสร้างโปรแกรมที่ตรวจสอบปัญหาได้และทำงานได้อย่างน่าเชื่อถือ

EP15: จัดการข้อผิดพลาดด้วย JavaScript Error Handling

1. ข้อผิดพลาดใน JavaScript มีอะไรบ้าง

const price = 100;
const quantity = 3;

const correctTotal = price * quantity;
const incorrectTotal = price + quantity;

console.log(correctTotal);
console.log(incorrectTotal);

2. ใช้ try...catch เพื่อดักจับข้อผิดพลาด

try {
    const user = null;
    console.log(user.name);
    console.log('บรรทัดนี้จะไม่ทำงาน');
} catch (error) {
    console.log('เกิดข้อผิดพลาด:', error.message);
}

console.log('โปรแกรมยังทำงานต่อได้');

อ่านข้อมูลจาก Error Object

try {
    throw new Error('ไม่สามารถบันทึกข้อมูลได้');
} catch (error) {
    console.log('ประเภท:', error.name);
    console.log('ข้อความ:', error.message);
    console.log('รายละเอียด:', error.stack);
}

3. finally สำหรับงานที่ต้องทำท้ายสุด

function loadData() {
    console.log('เริ่มโหลดข้อมูล');

    try {
        throw new Error('แหล่งข้อมูลไม่พร้อมใช้งาน');
    } catch (error) {
        console.log('โหลดไม่สำเร็จ:', error.message);
    } finally {
        console.log('สิ้นสุดกระบวนการโหลด');
    }
}

loadData();

4. สร้างข้อผิดพลาดด้วย throw

function calculateDiscount(price, percent) {
    if (typeof price !== 'number' || !Number.isFinite(price)) {
        throw new TypeError('ราคาต้องเป็นตัวเลขที่ถูกต้อง');
    }

    if (price < 0) {
        throw new RangeError('ราคาต้องไม่ติดลบ');
    }

    if (typeof percent !== 'number' || percent < 0 || percent > 100) {
        throw new RangeError('ส่วนลดต้องอยู่ระหว่าง 0 ถึง 100');
    }

    return price * (1 - percent / 100);
}

try {
    console.log(calculateDiscount(1000, 15));
    console.log(calculateDiscount(-50, 15));
} catch (error) {
    console.log('คำนวณไม่ได้:', error.message);
}

ข้อผิดพลาดที่สร้างขึ้นเอง

class InsufficientStockError extends Error {
    constructor(productId, requested) {
        super(`สินค้า ${productId} มีจำนวนไม่เพียงพอ`);
        this.name = 'InsufficientStockError';
        this.productId = productId;
        this.requested = requested;
    }
}

function reserveStock(product, quantity) {
    if (quantity > product.stock) {
        throw new InsufficientStockError(product.id, quantity);
    }

    return product.stock - quantity;
}

try {
    console.log(reserveStock({ id: 'P-10', stock: 3 }, 5));
} catch (error) {
    if (error instanceof InsufficientStockError) {
        console.log(error.name, error.productId, error.requested);
    } else {
        throw error;
    }
}

5. ตรวจสอบข้อมูลก่อนเกิดข้อผิดพลาด

function createUser(input) {
    if (!input || typeof input !== 'object' || Array.isArray(input)) {
        throw new TypeError('ข้อมูลผู้ใช้ต้องเป็น Object');
    }

    if (typeof input.name !== 'string' || input.name.trim() === '') {
        throw new Error('กรุณาระบุชื่อผู้ใช้');
    }

    if (!Number.isInteger(input.age) || input.age < 0) {
        throw new RangeError('อายุต้องเป็นจำนวนเต็มตั้งแต่ศูนย์ขึ้นไป');
    }

    return {
        name: input.name.trim(),
        age: input.age
    };
}

try {
    console.log(createUser({ name: ' Mali ', age: 25 }));
    console.log(createUser({ name: '', age: -1 }));
} catch (error) {
    console.log('ไม่สามารถสร้างผู้ใช้:', error.message);
}

6. ส่งต่อข้อผิดพลาดด้วย throw

function parseQuantity(value) {
    try {
        const quantity = Number(value);

        if (!Number.isInteger(quantity) || quantity < 1) {
            throw new RangeError('จำนวนสินค้าต้องเป็นจำนวนเต็มตั้งแต่ 1 ขึ้นไป');
        }

        return quantity;
    } catch (error) {
        console.log('ตรวจพบปัญหาในการอ่านจำนวนสินค้า');
        throw error;
    }
}

try {
    const quantity = parseQuantity('0');
    console.log('จำนวนที่เลือก:', quantity);
} catch (error) {
    console.log('ไม่สามารถดำเนินการ:', error.message);
}

7. ข้อผิดพลาดจาก Async/Await

function getUserFromService(userId) {
    return new Promise((resolve, reject) => {
        if (userId <= 0) {
            reject(new RangeError('รหัสผู้ใช้ไม่ถูกต้อง'));
            return;
        }

        resolve({ id: userId, name: 'Mali' });
    });
}

async function showUser(userId) {
    try {
        const user = await getUserFromService(userId);
        console.log('ผู้ใช้:', user.name);
    } catch (error) {
        console.log('ไม่สามารถโหลดผู้ใช้:', error.message);
    }
}

showUser(1);
showUser(0);

ดักจับข้อผิดพลาดจาก Promise โดยตรง

function loadSettings() {
    return Promise.reject(new Error('ไม่สามารถโหลดการตั้งค่าได้'));
}

loadSettings()
    .then(settings => {
        console.log(settings);
    })
    .catch(error => {
        console.log('เกิดปัญหา:', error.message);
    })
    .finally(() => {
        console.log('จบกระบวนการโหลดการตั้งค่า');
    });

8. ข้อผิดพลาดใน async ไม่ได้ถูกจับทุกกรณีโดยอัตโนมัติ

function failLater() {
    return Promise.reject(new Error('งานล้มเหลว'));
}

async function safeTask() {
    try {
        await failLater();
    } catch (error) {
        console.log('จับข้อผิดพลาดได้:', error.message);
    }
}

async function anotherSafeTask() {
    try {
        failLater().catch(error => {
            console.log('จัดการผ่าน catch:', error.message);
        });
    } catch (error) {
        console.log('บล็อกนี้ไม่จับ Promise rejection ที่ไม่ได้ await');
    }
}

safeTask();
anotherSafeTask();

9. การออกแบบข้อความแจ้งข้อผิดพลาดให้ปลอดภัย

function getUserMessage(error) {
    console.error('รายละเอียดสำหรับผู้ดูแล:', error);

    return {
        success: false,
        message: 'ไม่สามารถดำเนินการได้ในขณะนี้ กรุณาลองอีกครั้ง'
    };
}

try {
    throw new Error('Database connection failed at internal host');
} catch (error) {
    const response = getUserMessage(error);
    console.log(response.message);
}

10. รูปแบบการจัดการข้อผิดพลาดที่ควรหลีกเลี่ยง

11. ตัวอย่างประยุกต์: ระบบสร้างคำสั่งซื้อ

class OrderValidationError extends Error {
    constructor(message) {
        super(message);
        this.name = 'OrderValidationError';
    }
}

function createOrder(input) {
    if (!input || typeof input !== 'object') {
        throw new OrderValidationError('ข้อมูลคำสั่งซื้อไม่ถูกต้อง');
    }

    if (!Array.isArray(input.items) || input.items.length === 0) {
        throw new OrderValidationError('กรุณาเลือกสินค้าอย่างน้อยหนึ่งรายการ');
    }

    const items = input.items.map(item => {
        if (!item || !Number.isFinite(item.price) || item.price < 0) {
            throw new OrderValidationError('ราคาสินค้าไม่ถูกต้อง');
        }

        if (!Number.isInteger(item.quantity) || item.quantity < 1) {
            throw new OrderValidationError('จำนวนสินค้าต้องเป็นจำนวนเต็มบวก');
        }

        return {
            name: String(item.name ?? 'สินค้า'),
            price: item.price,
            quantity: item.quantity,
            subtotal: item.price * item.quantity
        };
    });

    const total = items.reduce((sum, item) => sum + item.subtotal, 0);

    return {
        orderId: `ORD-${Date.now()}`,
        items,
        total,
        status: 'pending'
    };
}

try {
    const order = createOrder({
        items: [
            { name: 'สมุด', price: 45, quantity: 2 },
            { name: 'ปากกา', price: 12, quantity: 3 }
        ]
    });

    console.log('สร้างคำสั่งซื้อสำเร็จ:', order);
} catch (error) {
    if (error instanceof OrderValidationError) {
        console.log('ข้อมูลไม่ถูกต้อง:', error.message);
    } else {
        console.error('เกิดข้อผิดพลาดที่ไม่คาดคิด');
        throw error;
    }
}

12. แบบฝึกหัดท้ายบท

โจทย์ที่ 1: ตรวจสอบคะแนน

function validateScore(score) {
    if (typeof score !== 'number' || !Number.isFinite(score)) {
        throw new TypeError('คะแนนต้องเป็นตัวเลข');
    }

    if (score < 0 || score > 100) {
        throw new RangeError('คะแนนต้องอยู่ระหว่าง 0 ถึง 100');
    }

    return score;
}

try {
    console.log(validateScore(85));
    console.log(validateScore(120));
} catch (error) {
    console.log(error.name, error.message);
}

โจทย์ที่ 2: ใช้ finally คืนสถานะ

let isLoading = false;

function runTask() {
    isLoading = true;

    try {
        console.log('กำลังทำงาน:', isLoading);
        throw new Error('เกิดปัญหาจำลอง');
    } catch (error) {
        console.log(error.message);
    } finally {
        isLoading = false;
        console.log('สถานะสุดท้าย:', isLoading);
    }
}

runTask();

โจทย์ที่ 3: จัดการ Promise ที่ถูก Reject

function requestData() {
    return Promise.reject(new Error('ไม่สามารถรับข้อมูลได้'));
}

async function main() {
    try {
        const data = await requestData();
        console.log(data);
    } catch (error) {
        console.log('คำขอล้มเหลว:', error.message);
    } finally {
        console.log('จบการร้องขอข้อมูล');
    }
}

main();

13. สรุปสิ่งที่ควรจำ

คำถามที่พบบ่อย

เตรียมพบ EP16