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

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

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

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

錯誤是否已處理

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

  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    (error as any).isHandledByBoundary = true;
    ....
  }

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

裸露的骨架

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

import { useState, useEffect, ReactNode } from 'react';
import { ErrorDialog } from '../Components/ErrorDialog';

type Props = {
  children: ReactNode;
};

export function GlobalErrorHandler({ children }: Props) {
  const [error, setError] = useState(null);
  const [isDialogOpen, setDialogOpen] = useState(false);

  useEffect(() => {
    ....
  }, []);

  function handleCloseDialog() {
    setDialogOpen(false);
    setError(null);
  }

  return (
    
      {children}

      {isDialogOpen && error && (
        
      )}
    >
  );
}

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

處理錯誤

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

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

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

   function handleWindowError(
      message: string | Event,
      source?: string,
      lineno?: number,
      colno?: number,
      error?: Error
    ) {
      if (error && (error as any).isHandledByBoundary) {
        return true;
      }

      const errorMessage = error
        ? error
        : `Error: ${message} at ${source}:${lineno}:${colno}`;
      setError(errorMessage);
      setDialogOpen(true);
      return true;
    }

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

    function handleUnhandledRejection(event: PromiseRejectionEvent) {
      setError(`Unhandled promise rejection: ${event.reason}`);
      setDialogOpen(true);
    }

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

    window.addEventListener('error', handleWindowError);
    window.addEventListener('unhandledrejection', handleUnhandledRejection);

    return () => {
      window.removeEventListener('error', handleWindowError);
      window.removeEventListener(
        'unhandledrejection',
        handleUnhandledRejection
      );
    };

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

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