建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
起源
我們知道，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事件
- 資源（如
或