如何在 redux-observable 中使用 React ErrorBoundary？

如何解决如何在 redux-observable 中使用 React ErrorBoundary？

React 错误边界不适用于异步代码。

但我使用 redux-observable 和 rxjs 从我的 api 中获取我的数据。

我想用 catchError 的 rxjs 函数捕捉错误。

是否有可能让它工作，我可以使用 ErrorBoundary 来获取错误？

也许与 react-error-boundary 包和 useErrorHandker 挂钩？我无法正常工作。

解决方法

这就是我所做的。

我已经有一个在启动时加载的配置模块。

let config: Config = {
  // other config values here
  errorHandler: (error: unknown) unknown => null;
}

export const getConfig = (): Config => config;
export const setConfig = (cfg: Config) => {
  config = cfg;
}

其中 Config 是我的配置界面。

在我的顶级 tsx 中，我执行以下操作：

const errorHandler = useErrorHandler();
setConfig({...getConfig(),errorHandler } );

现在，我可以从我的 RxJS catchError() 访问错误处理程序

catchError((err: unknown) => {
  const errorHandler = getConfig().errorHandler as (e: unknown) => unknown;
  errorHandler(err);
}),...

这是可行的，因为该模块使配置变量本质上是一个单例，可通过导出的 set/get 函数访问和设置。

我昨晚才弄明白，所以可能需要调整一些类型，但这是基本思路。