JavaScript try-catch 異常處理實戰指南

為什麼需要 try-catch？

瀏覽器遇到 JS 錯誤會停止後續程式碼執行，並在主控台顯示紅色錯誤（舊版 IE 為黃色驚嘆號）。使用 try-catch 可捕獲錯誤，讓程式繼續執行，並可自定義錯誤處理邏輯。

基本語法

try {
    // 可能拋出錯誤的程式碼
    var a = "hello world";
    document.write(a); // 故意寫錯 write -> Write
} catch (e) {
    // 錯誤處理
    console.error('捕獲錯誤:', e.message);
    // 可上報錯誤追蹤服務
    // 顯示友善提示給使用者
}

錯誤物件屬性

進階用法

finally 區塊

try { risky(); } catch (e) { handle(e); } finally { cleanup(); }
// finally 不管有無錯誤都會執行

拋出自訂錯誤

function checkAge(age) {
    if (age < 0) throw new RangeError('年齡不能為負數');
    if (age > 150) throw new RangeError('年齡不合理');
}
try { checkAge(-5); } catch (e) { console.log(e.name + ': ' + e.message); }

錯誤邊界

try-catch 無法捕獲：

• 語法錯誤 (解析階段即失敗)
• 非同步回呼錯誤 (需在回呼內部 try-catch 或用 Promise.catch)
• Event handler 異步錯誤 (可用 window.onerror 或 window.addEventListener('error') 全域捕獲)

全域錯誤捕獲 (生產環境建議)

window.addEventListener('error', function(event) {
    // event: ErrorEvent
    logToServer({
        message: event.message,
        filename: event.filename,
        lineno: event.lineno,
        colno: event.colno,
        stack: event.error?.stack
    });
    return true; // 阻止預設瀏覽器錯誤顯示
});

// Promise 未捕獲拒絕
window.addEventListener('unhandledrejection', function(event) {
    logToServer({ reason: event.reason });
});

最佳實踐

• 僅包裹「不確定、外部依賴、複雜邏輯」區塊，避免濫用影響效能。
• 捕獲後記錄完整堆疊，便於事後分析。
• 使用者介面給予友善提示，不暴露技術細節。
• 配合 Source Map 還原壓縮碼位置。