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

【问题标题】：How to use React ErrorBoundary with redux-observable?如何将 React ErrorBoundary 与 redux-observable 一起使用？
【发布时间】：2021-07-07 07:08:40
【问题描述】：

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

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

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

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

也许与react-error-boundary 包和useErrorHandker 挂钩？我不让它工作。

【问题讨论】：

听起来你正在尝试做一些特定的事情，并决定你需要在 React 错误边界中处理 Rx 错误以实现你想要的，但它可能会帮助你更多地包含一些你的编码并解释您想要的一般结果，而不是要求特定的实现。另见：the X/Y problem

标签： reactjs typescript api rxjs redux-observable

【解决方案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 函数访问和设置的单例。

我昨晚才发现这个，所以一些打字可能还需要调整，但这是基本的想法。

【讨论】：