区分错误边界中的组件错误与 React.lazy 错误

Question

我有一个关于 React.lazy() 功能的问题。我正在开发一项功能，但我陷入了困境。

我的场景

我在我所在的地方有一个设置

1. 使用 React.lazy() 延迟加载一堆组件
2. 在 Suspense 之上有一个错误边界包装器。
3. 有一个错误回退 ui 组件 (

   ErrorFallbackToast

   )，用于在出现错误时显示。

看起来像这样（模拟）

import React, { Suspense, useEffect, lazy } from 'react';

const Toast = React.lazy(() => import('../Toast'));

const MyComponent = () => {
  const renderComponent = () => {
    switch (type) {
      case TYPE.toast:
        return <Toast />;
      default:
        return null;
    }
  };

  return (
    <ErrorBoundary fallback={ErrorFallbackToast} onError={() => {}}>
      <Suspense fallback={<></>}>{renderComponent()}</Suspense>
    </ErrorBoundary>
  );
};

export default MyComponent;

我有一个场景，需要为特定类型的错误显示后备用户界面，而不应该为其他类型的错误显示后备用户界面。例如

1. 如果组件内发生任何错误（可能是空指针错误或其他错误），我需要显示后备用户界面。
2. 如果在延迟加载组件期间由于任何 React.lazy() 错误而发生任何错误（即块加载失败或网络错误），我不应该显示fallbackUI。

问题

到目前为止，我还没有找到任何方法来区分 React 延迟加载期间抛出的错误与组件运行时错误。有什么办法可以实现我想要的吗？

我愿意使用多个错误边界，但是由于这两个错误都是在安装时抛出的，所以我无法实现我想要的任何结果。任何帮助将不胜感激。谢谢！.

Answer 1

查看 React 的错误边界文档中的实时示例。

您应该能够使用

componentStack

上的

errorInfo

属性来确定错误的根源，并据此有条件地显示后备 UI。

Answer 2

你可以用 ErrorBoundary 包装你的 Toast 惰性组件，我认为你无论如何都需要为该组件显示一个后备，这将表现得像一个“空的 try/catch”，所以在这种情况下，你的 renderComponent() 中的后备将是严格的除了懒惰错误之外