GlobalErrorHandler：捕获从 ErrorBoundary 手中落下的错误！

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<Error | string | null>(null);
  const [isDialogOpen, setDialogOpen] = useState(false);

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

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

  return (
    <>
      {children}

      {isDialogOpen && error && (
        <ErrorDialog
          actionName="Unhandled error"
          error={error}
          loggFeilmelding={true}
          onClose={handleCloseDialog}
        />
      )}
    </>
  );
}

我们现在唯一缺少的是错误处理本身，在 useEffect 中定义。

处理错误

本节中的所有代码都应位于 useEffect 函数内！

首先我们定义handleWindowError。这将被传递到窗口对象上的错误事件处理程序。这里没什么神秘的，但请注意错误事件还包含有关源、行号和列号的信息。这可能有收藏价值。

通常这些信息也可以在错误对象中找到，但我需要对此进行更多的实证研究。也许我们总是应该保留错误事件报告的行号和列号？在这种情况下，我们还可以在 GlobalErrorHandler 中拥有一个状态（并确保在记录错误时发送该状态）。

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

我们还将定义handleUnhandledRejection 处理程序。这是针对在承诺中引发的错误，但我们忘记编写 .catch() 子句的地方。

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

type Props = {
  children: ReactNode;
};

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

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

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

  return (
    <>
      {children}

      {isDialogOpen && error && (
        <ErrorDialog
          actionName="Unhandled error"
          error={error}
          loggFeilmelding={true}
          onClose={handleCloseDialog}
        />
      )}
    </>
  );
}

然后我们需要做的就是设置监听器，并在 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;
    }

return 语句当然是我们从提供 useEffect 的函数中返回的地方。这确保了我们在组件渲染时开始监听事件并处理它们，并在组件不再渲染时停止。

因此，我们有一个 GlobalEventHandler，来处理 React 应用程序中那些讨厌的错误，这些错误要么是从异步源抛出的，要么是从 React 组件外部抛出的！

以上是GlobalErrorHandler：捕获从 ErrorBoundary 手中落下的错误！的详细内容。更多信息请关注PHP中文网其他相关文章！