[[344042]]

起源
我們知道，React中有個(gè)特性Error Boundary，幫助我們?cè)诮M件發(fā)生錯(cuò)誤時(shí)顯示“錯(cuò)誤狀態(tài)”的UI。

為了實(shí)現(xiàn)這個(gè)特性，就一定需要捕獲到錯(cuò)誤。

所以在React源碼中，所有用戶(hù)代碼都被包裹在一個(gè)方法中執(zhí)行。

類(lèi)似如下： 

function wrapper(func) { 
  try { 
    func(); 
  } catch(e) { 
    // ...處理錯(cuò)誤 
  } 
} 

比如觸發(fā)componentDidMount時(shí)：

wrapper(componentDidMount); 

本來(lái)一切都很完美，但是React作為世界級(jí)前端框架，受眾廣泛，凡事都講究做到極致。

這不，有人提issue：

你們這樣在try catch中執(zhí)行用戶(hù)代碼會(huì)讓瀏覽器調(diào)試工具的Pause on exceptions失效。 

Pause on exceptions失效的來(lái)龍去脈
Pause on exceptions是什么？

他是瀏覽器調(diào)試工具source面板的一個(gè)功能。

開(kāi)啟該功能后，在運(yùn)行時(shí)遇到會(huì)拋出錯(cuò)誤的代碼，代碼的執(zhí)行會(huì)自動(dòng)停在該行，就像在該行打了斷點(diǎn)一樣。

比如，執(zhí)行如下代碼，并開(kāi)啟該功能：

let a = c; 

代碼的執(zhí)行會(huì)在該行暫停。

這個(gè)功能可以很方便的幫我們發(fā)現(xiàn)未捕獲的錯(cuò)誤發(fā)生的位置。

但是，當(dāng)React將用戶(hù)代碼包裹在try catch后，即使代碼拋出錯(cuò)誤，也會(huì)被catch。

Pause on exceptions無(wú)法在拋出錯(cuò)誤的用戶(hù)代碼處暫停，因?yàn)閑rror已經(jīng)被React catch了。

除非我們進(jìn)一步開(kāi)啟Pause on caught exceptions。

開(kāi)啟該功能，使代碼在捕獲的錯(cuò)誤發(fā)生的位置暫停。

如何解決
對(duì)用戶(hù)來(lái)說(shuō)，我寫(xiě)在componentDidMount中的代碼明明未捕獲錯(cuò)誤，可是錯(cuò)誤發(fā)生時(shí)Pause on exceptions卻失效了，確實(shí)有些讓人困惑。

所以，在生產(chǎn)環(huán)境，React繼續(xù)使用try catch實(shí)現(xiàn)wrapper。

而在開(kāi)發(fā)環(huán)境，為了更好的調(diào)試體驗(yàn)，需要重新實(shí)現(xiàn)一套try catch機(jī)制，包含如下功能：

• 捕獲用戶(hù)代碼拋出的錯(cuò)誤，使Error Boundary功能正常運(yùn)行
• 不捕獲用戶(hù)代碼拋出的錯(cuò)誤，使Pause on exceptions不失效

這看似矛盾的功能，React如何機(jī)智的實(shí)現(xiàn)呢？

如何“捕獲”錯(cuò)誤
讓我們先實(shí)現(xiàn)第一點(diǎn)：捕獲用戶(hù)代碼拋出的錯(cuò)誤。

但是不能使用try catch，因?yàn)檫@會(huì)讓Pause on exceptions失效。

解決辦法是：監(jiān)聽(tīng)window的error事件。

根據(jù)GlobalEventHandlers.onerror MDN[1]，該事件可以監(jiān)聽(tīng)到兩類(lèi)錯(cuò)誤：

• js運(yùn)行時(shí)錯(cuò)誤（包括語(yǔ)法錯(cuò)誤）。window會(huì)觸發(fā)ErrorEvent接口的error事件
• 資源（如<img>或<script>）加載失敗錯(cuò)誤。加載資源的元素會(huì)觸發(fā)Event接口的error事件，可以在window上捕獲該錯(cuò)誤

實(shí)現(xiàn)開(kāi)發(fā)環(huán)境使用的wrapperDev：

// 開(kāi)發(fā)環(huán)境wrapper 
function wrapperDev(func) { 
  function handleWindowError(error) { 
    // 收集錯(cuò)誤交給Error Boundary處理 
  } 
 
  window.addEventListener('error', handleWindowError); 
  func(); 
  window.removeEventListener('error', handleWindowError); 
} 

當(dāng)func執(zhí)行時(shí)拋出錯(cuò)誤，會(huì)被handleWindowError處理。

但是，對(duì)比生產(chǎn)環(huán)境wrapperPrd內(nèi)func拋出的錯(cuò)誤會(huì)被catch，不會(huì)影響后續(xù)代碼執(zhí)行。

function wrapperPrd(func) { 
  try { 
    func(); 
  } catch(e) { 
    // ...處理錯(cuò)誤 
  } 
} 

開(kāi)發(fā)環(huán)境func內(nèi)如果拋出錯(cuò)誤，代碼的執(zhí)行會(huì)中斷。

比如執(zhí)行如下代碼，finish會(huì)被打印。

wrapperPrd(() => {throw Error(123)}) 
console.log('finish'); 

但是執(zhí)行如下代碼，代碼執(zhí)行中斷，finish不會(huì)被打印。

wrapperDev(() => {throw Error(123)}) 
console.log('finish'); 

如何在不捕獲用戶(hù)代碼拋出錯(cuò)誤的前提下，又能讓后續(xù)代碼的執(zhí)行不中斷呢？

如何讓代碼執(zhí)行不中斷
答案是：通過(guò)dispatchEvent觸發(fā)事件回調(diào)，在回調(diào)中調(diào)用用戶(hù)代碼。

根據(jù)EventTarget.dispatchEvent MDN[2]：

不同于DOM節(jié)點(diǎn)觸發(fā)的事件（比如click事件）回調(diào)是由event loop異步觸發(fā)。

通過(guò)dispatchEvent觸發(fā)的事件是同步觸發(fā)，并且在事件回調(diào)中拋出的錯(cuò)誤不會(huì)影響dispatchEvent的調(diào)用者（caller）。

讓我們繼續(xù)改造wrapperDev。

首先創(chuàng)建虛構(gòu)的DOM節(jié)點(diǎn)、事件對(duì)象、虛構(gòu)的事件類(lèi)型：

// 創(chuàng)建虛構(gòu)的DOM節(jié)點(diǎn) 
const fakeNode = document.createElement('fake'); 
// 創(chuàng)建event 
const event = document.createEvent('Event'); 
// 創(chuàng)建虛構(gòu)的event類(lèi)型 
const evtType = 'fake-event'; 

初始化事件對(duì)象，監(jiān)聽(tīng)事件。在事件回調(diào)中調(diào)用用戶(hù)代碼。觸發(fā)事件：

function callCallback() { 
  fakeNode.removeEventListener(evtType, callCallback, false);  
  func(); 
} 
 
// 監(jiān)聽(tīng)虛構(gòu)的事件類(lèi)型 
fakeNode.addEventListener(evtType, callCallback, false); 
 
// 初始化事件 
event.initEvent(evtType, false, false); 
 
// 觸發(fā)事件 
fakeNode.dispatchEvent(event); 

完整流程如下：

function wrapperDev(func) { 
  function handleWindowError(error) { 
    // 收集錯(cuò)誤交給Error Boundary處理 
  } 
   
  function callCallback() { 
    fakeNode.removeEventListener(evtType, callCallback, false);  
    func(); 
  } 
   
  const event = document.createEvent('Event'); 
  const fakeNode = document.createElement('fake'); 
  const evtType = 'fake-event'; 
 
  window.addEventListener('error', handleWindowError); 
  fakeNode.addEventListener(evtType, callCallback, false); 
 
  event.initEvent(evtType, false, false); 
   
 
  fakeNode.dispatchEvent(event); 
   
  window.removeEventListener('error', handleWindowError); 
} 

當(dāng)我們調(diào)用：

wrapperDev(() => {throw Error(123)}) 

會(huì)依次執(zhí)行：

• dispatchEvent觸發(fā)事件回調(diào)callCallback
• 在callCallback內(nèi)執(zhí)行到throw Error(123)，拋出錯(cuò)誤
• callCallback執(zhí)行中斷，但調(diào)用他的函數(shù)會(huì)繼續(xù)執(zhí)行。
• Error(123)被window error handler捕獲用于Error Boundary

其中步驟2使Pause on exceptions不會(huì)失效。

步驟3、4使得錯(cuò)誤被捕獲，且不會(huì)阻止后續(xù)代碼執(zhí)行，模擬了try catch的效果。

總結(jié)
不得不說(shuō)，React這波操作真細(xì)啊。

我們實(shí)現(xiàn)的迷你wrapper還有很多不足，比如：

• 沒(méi)有針對(duì)不同瀏覽器的兼容
• 沒(méi)有考慮其他代碼也觸發(fā)window error handler

React源碼的完整版wrapper，見(jiàn)這里[3]參考資料