我的 React 之旅：第 17 天

錯誤處理與除錯
在程式執行過程中錯誤是不可避免的，但可以透過適當的處理技術來有效地管理它們。這可確保程式不會意外崩潰並為用戶提供有意義的回饋。

什麼是錯誤？
錯誤是一個對象，代表程式執行過程中發生的問題。
如果處理不當，錯誤可能會中斷程序流程。

常見錯誤類型：

1. 網路錯誤：建立連線時出現問題（例如 API 呼叫失敗）。
2. Promise 拒絕：未處理的 Promise 會導致拒絕狀態。
3. 安全錯誤：與權限、存取或其他安全限制相關的問題。

錯誤處理方法
try...catch...finally 結構：
1.try{}塊：

• 包含可能引發錯誤的程式碼。

2.catch { } 區塊：

• 捕捉並處理 try 區塊中拋出的任何錯誤。
• 使用 console.error 而不是 console.log 以獲得更好的調試可見性。

3.finally { } 區塊（可選）：

• 始終執行，無論是否捕獲錯誤。
• 常用於清理任務（例如，關閉檔案、釋放資源）。

** 範例**

一般錯誤處理

try {
    console.log(x); // Throws ReferenceError because 'x' is not defined
}
catch (error) {
    console.error(error); // Outputs: ReferenceError: x is not defined
}
finally {
    console.log("This always executes");
}

console.log("You have reached the end!");

處理使用者輸入錯誤

try {
    const dividend = Number(window.prompt("Enter a dividend: "));
    const divisor = Number(window.prompt("Enter a divisor: "));

    if (divisor === 0) {
        throw new Error("You can't divide by zero!");
    }
    if (isNaN(dividend) || isNaN(divisor)) {
        throw new Error("Values must be numbers.");
    }

    const result = dividend / divisor;
    console.log(result);
}
catch (error) {
    console.error(error.message); // Logs the custom error message
}
finally {
    console.log("You have reached the end");
}

錯誤處理的最佳實務

1.使用描述性錯誤訊息：

• 使錯誤易於理解，以便調試和用戶回饋。

• 範例：「無法連線到伺服器」而不是「網路錯誤」。
  2.使用finally進行清理任務：

• 總是釋放檔案句柄、資料庫連線等資源。

3.捕捉特定錯誤：

• 避免過於通用的 catch 區塊；適當地處理不同的錯誤。
• 範例：

try {
    // Code
}
catch (error) {
    if (error instanceof TypeError) {
        console.error("Type Error:", error.message);
    } else {
        console.error("General Error:", error.message);
    }
}

4.避免無聲的失敗：

• 總是記錄或傳達錯誤，而不是默默地抑制它。

反思

我學到了什麼：

• 如何使用 try...catch...finally 優雅地管理錯誤。
• 使用 console.error 進行除錯的重要性。
• 拋出具有有意義訊息的自訂錯誤。

緩慢而穩定地贏得比賽！

以上是我的 React 之旅：第 17 天的詳細內容。更多資訊請關注PHP中文網其他相關文章！