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 组件外部抛出！