GlobalErrorHandler：捕捉從 ErrorBoundary 手中落下的錯誤！

ErrorBoundary 是一個出色的工具，可以捕捉 React 元件拋出的錯誤。您可以根據錯誤本身的性質和位置提供自訂錯誤訊息。但並非所有拋出的錯誤都由 ErrorBoundary 處理！你用這些做什麼？

當考慮非同步錯誤和從 React 外部拋出的錯誤時，ErrorBoundary 不夠。為了緩解這個問題，我在我的應用程式中創建了我所說的 GlobalErrorHandler。一個功能組件，只需 A) 彈出一個錯誤對話框，告訴用戶某件事出了問題，B) 將錯誤記錄到伺服器，以便我們調查並找到解決方案。

這個想法很簡單。我們希望在應用程式的根目錄中有一個 GlobalErrorHandler。此處理程序應該僅處理ErrorBoundary未捕獲的錯誤。更重要的是，它應該很容易被用戶忽略，我們應該假設該應用程式仍然可用。

所以策略是這樣的：預設情況下，除了渲染其子級之外，GlobalErrorHandler 根本不執行任何操作。但是，它設定了兩個事件偵聽器，偵聽瀏覽器中的所有錯誤和未處理的拒絕事件。然後它檢查錯誤，並查看是否已由任何 ErrorBoundaries 處理。最後，如果情況並非如此，它會彈出一個對話框，告訴用戶某處出了問題，並讓用戶關閉對話框並繼續使用應用程式。

錯誤是否已處理

在 ErrorBoundary 處理之上使用不必要的對話框來困擾最終用戶之前，我們首先必須先詢問錯誤：您已經被處理了嗎？我的解決方案是在錯誤物件 isHandledByBoundary 上引入一個新欄位。這在 ErrorBoundary 中設定為 true：

在所有 ErrorBoundary 元件（以及處理未捕獲錯誤的其他機制）中使用此功能後，我們就可以開始定義 GlobalErrorHandler。

裸露的骨架

然後我們可以建立 GlobalErrorHandler 的骨架。它直接呈現其子項，並且也呈現在其他地方定義的「ErrorDialog」。 （如果您想跨應用程式共用此元件，則 ErrorDialog 可以是一個 prop。）

我們現在唯一缺少的是錯誤處理本身，在 useEffect 中定義。

處理錯誤

本節中的所有程式碼都應位於 useEffect 函數內！

首先我們定義handleWindowError。這將被傳遞到視窗物件上的錯誤事件處理程序。這裡沒什麼神秘的，但請注意錯誤事件還包含有關來源、行號和列號的資訊。這可能有收藏價值。

通常這些資訊也可以在錯誤物件中找到，但我需要對此進行更多的實證研究。也許我們總是應該保留錯誤事件報告的行號和列號？在這種情況下，我們還可以在 GlobalErrorHandler 中擁有一個狀態（並確保在記錄錯誤時發送該狀態）。

我們也將定義handleUnhandledRejection 處理程序。這是針對在承諾中引發的錯誤，但我們忘記寫 .catch() 子句的地方。

然後我們需要做的就是設定監聽器，並在 GlobalErrorHandler 不再渲染時刪除監聽器：

return 語句當然是我們從提供 useEffect 的函數中傳回的地方。這確保了我們在元件渲染時開始監聽事件並處理它們，並在元件不再渲染時停止。

因此，我們有一個 GlobalEventHandler，來處理 React 應用程式中那些討厭的錯誤，這些錯誤要么是從非同步來源拋出的，要么是從 React 元件外部拋出的！

以上是GlobalErrorHandler：捕捉從 ErrorBoundary 手中落下的錯誤！的詳細內容。更多資訊請關注PHP中文網其他相關文章！