如何将React ErrorBoundary与redux-observable一起使用？

Question

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

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

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

有没有可能让它工作，我可以使用一个ErrorBoundary来处理获取错误？

也许可以使用react-error-boundary包和useErrorHandker钩子？我不能让它工作。

Answer 1

这是我所做的。

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

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函数进行访问和设置。

我昨晚才弄明白这一点，所以一些类型可能还需要调整，但这是基本的想法。