JavaScript當我們無法從故障中恢復

果到了讓用戶手動干預的環(huán)節(jié)，應用仍未達到用戶的預期，那我們就無能為力了。正如這部分標題所暗示的，并不是所有錯誤都可以被恢復。后端API并不總是能正確做出響應。組件在生產(chǎn)環(huán)境中是會存在bug，有些bug甚至在很多年后才會被發(fā)現(xiàn)。

這種重大錯誤就像在人群中摔了個臉朝地。不斷重試返回的是相同的結(jié)果，重啟組件也不會有影響。此時向用戶尋求輸入是沒意義的，或許用戶不可能再重現(xiàn)失敗的情形，或許我們根本就沒有提供輸入方式。

不管是哪種情況，解決的辦法都是切換到快速失效模式——在異常情況下禁用組件或整個應用。如果只是禁用組件，就必須確保應用可以脫離該組件正常工作。這又回到了飛機使用一個引擎降落的例子——它是否能工作？如果不能，我們必須關閉整個應用。

這種解決方法可能乍一看有點激進。但是，這么做可以幫助支持小組排除一大部分麻煩。出錯組件導致系統(tǒng)在運行中出現(xiàn)新錯誤的幾率也會更小。可擴展的錯誤處理方式能提高勝算，只要不在恢復錯誤時自作聰明，成功的機會就更大。

既然我們已經(jīng)擁有了強健的錯誤檢測和恢復機制，那么是時候?qū)⒆⒁饬Ψ诺叫阅芎蛷碗s度的影響上了。在大型JavaScript應用中，任何行為都是有代價的——任何收獲，都會給可擴展性帶來新的挑戰(zhàn)。錯誤處理也同樣如此。

錯誤處理直接影響了性能和復雜度。軟件出錯的原因很奇特，當找不到優(yōu)雅的處理方法時，我們需要復雜的實現(xiàn)修復它們。復雜的代碼通常不利于性能。因此，讓我們來看看，是什么拖慢了異常處理代碼的性能。

通常是因為你沒有正確地捕獲異常，或者在調(diào)試時使用了錯誤的上下文或工具。

try {  
    // 嘗試執(zhí)行可能會拋出異常的代碼  
    throw new Error('這是一個錯誤');  
} catch (e) {  
    // 捕獲異常并處理  
    console.error('捕獲到異常:', e.message);  
}

你可能在catch塊外部或不同的作用域中引用了e。確保你只在catch塊內(nèi)部引用它。

如果你使用的是調(diào)試工具（如瀏覽器的開發(fā)者工具），并且e看起來未定義，那么可能是調(diào)試工具的顯示問題或你正在查看的上下文不正確。嘗試在catch塊中直接打印e（如上面的console.error示例），看看是否能在控制臺中看到異常信息。

可能你的try塊中的代碼并沒有拋出異常，或者你的catch塊實際上并沒有被執(zhí)行。確保你的代碼確實拋出了異常，并且catch塊是緊隨在try塊之后的。

如果你的try塊中包含異步操作（如Promise或setTimeout），并且異常是在異步回調(diào)中拋出的，那么它不會被外部的catch塊捕獲。確保你正確地處理了異步操作中的異常。

有時候，JavaScript中的其他錯誤（如語法錯誤或引用錯誤）可能會干擾你的調(diào)試過程。確保你的代碼沒有其他明顯的錯誤。

在某些受限的環(huán)境中（如某些瀏覽器擴展或某些JavaScript沙箱環(huán)境），可能無法捕獲或訪問某些異常。確保你的環(huán)境支持標準的JavaScript異常處理。

、為什么要了解常見JS錯誤

1、調(diào)試和故障排除：

了解常見的JavaScript錯誤可以幫助你更好地調(diào)試和故障排除代碼。當你遇到錯誤時，能夠快速識別錯誤類型并找到解決方法，可以節(jié)省大量的時間和精力。

2、代碼質(zhì)量和穩(wěn)定性：

通過了解常見的JavaScript錯誤，你可以編寫更健壯和穩(wěn)定的代碼。你可以預先考慮到可能出現(xiàn)的錯誤情況，并采取適當?shù)拇胧﹣硖幚砘虮苊膺@些錯誤，從而提高代碼的質(zhì)量和穩(wěn)定性。

3、用戶體驗（很重要）：

JavaScript錯誤可能會導致應用程序崩潰、功能失效或不可預料的行為。通過了解常見的JavaScript錯誤并處理它們，可以提供更好的用戶體驗，避免應用程序因錯誤而中斷或表現(xiàn)不正常。

4、安全性：

某些JavaScript錯誤可能會暴露應用程序的漏洞，使其易受攻擊。了解這些錯誤并采取適當?shù)陌踩胧┛梢詭椭惚Ｗo應用程序免受潛在的安全威脅。

5、學習和成長：

通過了解常見的JavaScript錯誤，你可以不斷學習和成長。你可以深入了解錯誤的原因、背后的概念和解決方法，從而提高自己的技能和知識水平。

二、以下JS報錯的一些常見影響：

1、程序中斷：

JS報錯會導致程序的執(zhí)行中斷，代碼無法繼續(xù)執(zhí)行下去。

2、功能異常：

報錯可能導致程序的功能異?；虿豢捎?。例如，如果某個關鍵函數(shù)報錯，可能會導致相關功能無法正常運行。

3、頁面崩潰：

嚴重的JS報錯可能導致整個頁面崩潰，無法正常顯示或交互。

4、錯誤信息暴露：

報錯信息可能會被顯示在頁面上，這可能會泄露敏感信息，給攻擊者提供潛在的安全漏洞。

5、用戶體驗下降：

JS報錯可能會導致頁面加載緩慢或卡頓，影響用戶的體驗。

6、數(shù)據(jù)丟失：

某些報錯可能會導致數(shù)據(jù)丟失或損壞，特別是在涉及到數(shù)據(jù)處理或存儲的情況下。

7、兼容性問題：

不同瀏覽器對JS的處理方式可能不同，報錯可能會導致兼容性問題，使得頁面在某些瀏覽器上無法正常工作。

因此，及時處理和修復JS報錯是非常重要的，以確保程序的正常運行和用戶體驗。

三、有哪些常見錯誤及相應示例說明

1、TypeError 類型錯誤：

var num=666;
num(); 
// Uncaught TypeError: num is not a function

解決方法：確保你對值的操作和使用是符合其類型的。

2、ReferenceError引用錯誤：

console.log(foo); 
// Uncaught ReferenceError: foo is not defined

解決方法：確保你在使用變量或函數(shù)之前進行了正確的聲明和定義。

3、SyntaxError語法錯誤：

if (x > 5 { // 缺少右括號
  console.log('x is greater than 5');
}
//  Uncaught SyntaxError: Unexpected token '{'

解決方法：仔細檢查代碼，確保語法正確，例如括號匹配、分號使用等。

4、RangeError范圍錯誤：

function recursiveFunction() {
    recursiveFunction();
}
recursiveFunction();
//  Uncaught RangeError: Maximum call stack size exceeded

解決方法：確保你在訪問數(shù)組、字符串或其他可迭代對象時，使用的索引或位置在有效范圍內(nèi)。

function recursiveFunction(depth) {

if (depth===0) {

return;

}

recursiveFunction(depth - 1);

}

recursiveFunction(100);

// 在這個示例中，我們通過增加一個停止條件來修復范圍錯誤。遞歸的深度被限制在100次。

5、EvalErroreval 函數(shù)錯誤：

在JavaScript中，EvalError是一個錯誤類型，表示與eval()函數(shù)相關的錯誤。然而，在現(xiàn)代的JavaScript環(huán)境中，EvalError的使用相對較少。示例：

eval('alert("Hello, World!");'); 
// 我們使用eval()函數(shù)來執(zhí)行一個字符串作為JavaScript代碼。如果字符串中的代碼存在語法錯誤或其他問題，就會拋出EvalError。

解決方法：避免使用 eval 函數(shù)，盡量使用其他更安全的替代方法。例如使用Function構造函數(shù)或解析器工具等。

6、URIErrorURI 錯誤：

decodeURIComponent('%'); 
// Uncaught URIError: URI malformed

解決方法：確保你在使用 URI 相關函數(shù)或方法時，提供的參數(shù)是合法的。

7、InternalError內(nèi)部錯誤：

function createHugeArray() {
  var arr=new Array(2000000000);
  return arr;
}
createHugeArray()

解決方法：InternalError通常是由于JavaScript引擎或運行時環(huán)境中的內(nèi)部問題導致的，例如堆棧溢出、內(nèi)存不足等。避免出現(xiàn)無限遞歸、死循環(huán)等問題，確保你的代碼邏輯正確。

8、AsyncError異步錯誤：

async function fetchData() {
  throw new Error('Something went wrong'); // 拋出一個錯誤
}
fetchData()
  .catch(error=> {
    console.log('Async error:', error); // 捕獲異步錯誤并進行處理
  });

解決方法：使用適當?shù)腻e誤處理機制，例如使用 try-catch 或 catch 方法來捕獲和處理異步錯誤。

async function fetchData() {

try {

throw new Error('Something went wrong'); // 拋出一個錯誤

} catch (error) {

console.log('Sync error:', error); // 捕獲同步錯誤并進行處理 }}

fetchData()

.catch(error=> {

console.log('Async error:', error); // 捕獲異步錯誤并進行處理

});

四、了解后的實踐和能收獲什么

1. 錯誤處理和異常處理是前端開發(fā)中不可或缺的一部分，能夠提升用戶體驗，減少用戶流失率：

綜合上述幾種異常錯誤，在部門小程序項目中進行了JS報錯異常優(yōu)化，第一版本優(yōu)化后錯誤數(shù)上線后由每日最高1374次降低到184次，減少了近86%的錯誤次數(shù)，由錯誤人數(shù) 694降低到109人，減少了近84%錯誤人數(shù)。

2.了解常見錯誤類型和異常類型，以及相應的解決方法，可以幫助我們更好地定位和解決問題。

3. 示例提供了一些常見錯誤的解決方法，但實際情況可能因代碼和環(huán)境而異，需要仔細分析和調(diào)試代碼。

4. 參考文章提供了更多學習資源和深入了解錯誤處理的內(nèi)容。

五、參考文章（部分內(nèi)容GPT生成）

?MDN Web 文檔：https://developer.mozilla.org/

?JavaScript 教程 - W3Schools：https://www.w3schools.com/js/

?JavaScript 錯誤處理和調(diào)試 - JavaScript.info：https://javascript.info/try-catch

?JavaScript 異常處理的藝術 - Smashing Magazine：https://www.smashingmagazine.com/2020/08/error-handling-art-javascript/

?JavaScript 異常處理的 8 個技巧 - SitePoint：https://blog.logrocket.com/5-common-javascript-exception-handling-mistakes/

作者：京東零售孫鵬紅

來源：京東云開發(fā)者社區(qū) 轉(zhuǎn)載請注明來源

在線咨詢

上一篇：CSS面試題：CSS布局的問題面試題
下一篇：HTML標簽以及各個標簽屬性大全（網(wǎng)頁制作必備）

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商

JavaScript當我們無法從故障中恢復

、為什么要了解常見JS錯誤

1、調(diào)試和故障排除：

2、代碼質(zhì)量和穩(wěn)定性：

3、用戶體驗（很重要）：

4、安全性：

5、學習和成長：

二、以下JS報錯的一些常見影響：

1、程序中斷：