警示后人系列：為什么我沒(méi)有catch到回調(diào)函數(shù)中拋出的錯(cuò)誤？

fnngj 發(fā)布于2019-08-22 15:14 / 947人閱讀

摘要：回調(diào)函數(shù)的棧幀被放入時(shí)，執(zhí)行棧是空的。總結(jié)用語(yǔ)句包裹回調(diào)函數(shù)的定義，無(wú)法捕獲到回調(diào)函數(shù)中的錯(cuò)誤。如果回調(diào)函數(shù)運(yùn)行時(shí)沒(méi)有外層函數(shù)，你必須在回調(diào)函數(shù)內(nèi)部做錯(cuò)誤的捕獲和處理。

今天犯了一個(gè)js中的錯(cuò)誤，記錄一下警示后人:)

事情是這樣，koa會(huì)幫我們捕獲中間件中拋出的錯(cuò)誤，從而不讓服務(wù)器崩潰，如下圖：

服務(wù)器為此次請(qǐng)求返回500，仍然能夠處理后續(xù)的請(qǐng)求。

從這一點(diǎn)出發(fā)，我就認(rèn)為，我可以在中間件里面隨便throw，這樣koa就能在控制臺(tái)幫我打印出所有錯(cuò)誤的信息，反正也不會(huì)對(duì)后續(xù)請(qǐng)求造成影響。

但是今天的錯(cuò)誤是這樣的:

進(jìn)程居然崩潰了！這樣上線豈不是要出事？

為什么koa這回沒(méi)有捕獲到我throw的錯(cuò)誤呢？

用簡(jiǎn)單的代碼模擬一下這個(gè)場(chǎng)景：

try {
  setTimeout(() => {
    try {
      throw 500;
    } catch (err) {
      console.log("err1", err);  // called
      throw err;
    }
  }, 0);
} catch (err) {
  console.log("err2", err)  // never called
}

可以看出，內(nèi)層的try確實(shí)捕獲到了錯(cuò)誤，但是當(dāng)我們把這個(gè)錯(cuò)誤繼續(xù)拋出，外層的try卻沒(méi)有捕獲到這個(gè)錯(cuò)誤。

原因在于，回調(diào)函數(shù)被異步調(diào)用時(shí)，外層try中的代碼其實(shí)已經(jīng)執(zhí)行完了，棧幀已經(jīng)從執(zhí)行棧中彈出。回調(diào)函數(shù)的棧幀被放入時(shí)，執(zhí)行棧是空的。

錯(cuò)誤被拋出后，沿著執(zhí)行棧，希望找到“外層”函數(shù)的try...catch語(yǔ)句。可是這個(gè)回調(diào)函數(shù)根本就沒(méi)有“外層”函數(shù)了，因此這是一個(gè)沒(méi)有被捕獲到的錯(cuò)誤，這會(huì)造成進(jìn)程的崩潰。

總結(jié)

用try語(yǔ)句包裹回調(diào)函數(shù)的定義，無(wú)法捕獲到回調(diào)函數(shù)中的錯(cuò)誤。必須用try語(yǔ)句包裹運(yùn)行時(shí)的外層函數(shù)。如果回調(diào)函數(shù)運(yùn)行時(shí)沒(méi)有外層函數(shù)，你必須在回調(diào)函數(shù)內(nèi)部做錯(cuò)誤的捕獲和處理。

如果回調(diào)函數(shù)定義在Promise中，你可以直接在回調(diào)函數(shù)中調(diào)用reject(reason)，讓這個(gè)Promise的訂閱者來(lái)處理錯(cuò)誤：

const p = new Promise((resolve, reject) => {
  setTimeout(() => {
    try {
      throw 500;
    } catch (err) {
      console.log("err1", err);  // called
      reject(err);
    }
  }, 0);
});

p.catch(err => {
  console.log("err3", err);  // called
});

如果回調(diào)函數(shù)由async function的await關(guān)鍵字來(lái)執(zhí)行，那么可以通過(guò)reject Promise，讓async function中的try...catch捕獲到錯(cuò)誤。

async function fun() {
  try {
    await new Promise((resolve, reject) => {
      setTimeout(() => {
        try {
          throw 500;
        } catch (err) {
          console.log("err1", err);  // called
          reject(err);
        }
      }, 0);
    });
  } catch (err) {
    console.log("err4", err);  // called
    throw err;
  }
}
try {
  fun();
} catch (err) {
  console.log("err5", err);  // not called
}

注意try {fun();}無(wú)法捕獲到錯(cuò)誤，因?yàn)檫@個(gè)函數(shù)不是通過(guò)await來(lái)執(zhí)行的。錯(cuò)誤拋出的時(shí)候，這個(gè)try語(yǔ)句早已經(jīng)執(zhí)行完。