时间戳

首页 > 解决方案 > 如何将 React ErrorBoundary 与 redux-observable 一起使用？

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

问题描述

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

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

我想catchError用rxjs.

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

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

标签： reactjstypescriptapirxjsredux-observable

解决方案

这就是我所做的。

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

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 函数访问和设置的单例。

我昨晚才弄清楚这一点，所以一些打字可能还需要调整，但这是基本的想法。

推荐阅读