詳解JavaScript錯誤捕獲

一、基本使用與邏輯

使用

try{
    //code....
}catch(err){
    //error handling
}finally{
    //no matter what happens in the try/catch (error or no error), this code in the finally statement should run. 
}

邏輯

二、特性

try…catch 僅適用於運行時錯誤,解釋階段錯誤無法正常工作

try{
    {{{{{{{
}catch(err){
    console.error(err)
}
//引擎在‘parse-time'出錯,導致無法理解代碼,因此無法捕捉

try…catch 隻能同步工作

try{
    setTimeout(function(){
        undefinedVariable;
    },1000)
}catch(err){
    console.error(err)
}
//setTimeout的回調函數執行時,引擎已經離開try...catch結構

finally 能讓try塊中的return語句失效

function test(){
  try {
    return 1;
  } catch(error) {
    return 2;
  } finally {
    return 3;
  }
}
console.log(test());
//3

三、錯誤對象

當程序發生error,js內部會生成一個包含error細節的對象,該對象會被作為參數傳進catch

對於所有內置錯誤,錯誤對象具有兩個主要屬性

  • name 錯誤類型
  • message 文本類型的錯誤信息
  • stack (非標準屬性)發生錯誤時的調用棧信息,主要用於調試
try {
  lalala; // error, variable is not defined!
} catch (err) {
  alert(err.name); // ReferenceError
  alert(err.message); // lalala is not defined
  alert(err.stack); // ReferenceError: lalala is not defined at (...call stack)

  // Can also show an error as a whole
  // The error is converted to string as "name: message"
  alert(err); // ReferenceError: lalala is not defined
}

理論上,我們可以throw任何東西作為錯誤對象,但最好的習慣是throw一個具有name,message的對象,以便和內置錯誤對象保持兼容

番外:內置的錯誤對象

對象 含義
ReferenceError 引用未定義變量時觸發
SyntaxError 使用不合法的語法結構時觸發
TypeError 值得類型非預期時觸發
URIError 錯誤使用全局URI函數如encodeURI()、decodeURI()等時觸發
RangeError 對Array構造函數使用錯誤的長度值,對Number.toExponential()、Number.toFixed()或Number.toPrecision()使用無效數字等
EvalError 全局函數eval()中發生的錯誤

四、較好的catch和throw策略

​ catch錯誤不單單是為瞭防止程序掛掉,更重要的目的是方便調試,找bug,所以對錯誤的處理策略,稍微可以體現出碼者的優雅性

​ 俗話說的好,碼者,人恒雅也,盡量遵循一個原則,catch隻處理自己知道的錯誤

舉個梨子

let json = '{ "age": 30 }'; 
try{
  let user = JSON.parse(json);  
  alert( user.name );
} catch (err) {
  console.error('JSON Error:'+err);
}

上述例子的catch策略能保證程序正常,因為catch塊能catch內部所有的錯誤,無論是JSON.parse出錯還是user.name不存在報錯,都能被catch到,但兩種錯誤都用同一種打印是不利於調試的,寫成下面這樣會好一點

let json = '{"age":30}'
try{
  let user =  JSON.parse(json);
  alert(user.name)
}catch(err){
   if(err instanceof SyntaxError){
       console.error('JSON Error:'+err);
   }
   else throw err;
}

每個catch塊處理自己知道得,可能會出現得錯誤,就是說,編程人員在編程的時候,catch那些預料到的錯誤,而將可能自己沒料到的錯誤拋到外面。

五、Promise的錯誤處理

​ 眾所周知,Promise是會吞掉error的,因為promise的實現就在內部對所有error進行瞭捕獲,且捕獲到的error不是向外拋出(外指promise之外),而是沿著鏈找到最近的onreject回調傳入,所以promise的錯誤處理隻有兩種辦法

  1. 設置onreject回調
  2. 全局捕獲

舉個栗子

try{
    new Promise((resolve,reject)=>{
        throw new Error('promise error')
    }).catch(()=>{
        //錯誤在最近的onreject回調被捕獲
        console.error(err);
    })
}catch(err){
    //永遠不會執行,promise吞掉error
    console.error(err);
}

另外需要註意,無論是執行者函數(executor)和還是 promise 的處理程序(handler),內部發生的錯誤統統吞掉,相當於被隱式catch,error會自動找到最近的onreject回調傳進去

try{
    new Promise((resolve,reject)=>{
        resolve();
    }).then(()=>{
        throw new Error('promise then error');
    }).catch((err){
        console.error(err);
    })
}catch(err){
    //地球毀滅之前都不會執行
    console.error(err)
}

同理,在錯誤找到onreject傳進去之前,經過的then註冊的onfulfilled回調統統失效,直到找到onreject回調,處理之後,onreject回調之後的onfulfilled回調才正常

try {
    new Promise((resolve, reject) => {
        throw new Error('promise error')
    }).then((ret) => {
        //錯誤沒有處理,失效
        console.log('then1:' + ret)
    }).catch((err) => {
        //錯誤處理瞭,後序正常
        console.error(err);
        return 'handled'
    }).then((ret) => {
        //正常執行
        console.log('then2' + ret);
    })
} catch (err) {
    //同樣的,人類毀滅之前都不會執行
    console.error(err)
}

// Error:promise error
//then2handled

那整條鏈一個catch都沒設置會怎麼樣呢?

那這個error就會擊穿地心,一直穿透到全局,根據宿主環境的不同觸發不同的全局事件,比如說瀏覽器中會觸發 unhandledrejection事件,node環境中也會觸發unhandledRejection事件,一般會對這事件進行監聽,再顯示信息給編程人員或者用戶

番外1:chromium / v8 / v8 / 3.29.45 的 Promise內部錯誤捕捉

番外2:async/await錯誤捕捉

六、性能損耗​

After V8 version 6 (shipped with Node 8.3 and latest Chrome), the performance of code inside try-catch is the same as that of normal code. —— 爆棧網

(稍微測瞭一下,相差無幾)

以上就是詳解JavaScript錯誤捕獲的詳細內容,更多關於JavaScript 錯誤捕獲的資料請關註WalkonNet其它相關文章!