RxJS@6中fromFetch结合catchError无法捕获错误的问题排查

我想用RxJS的fromFetch替代原生fetch优化遗留代码，当前实现如下：

fromFetch(`${requestUrl}`, {
  method: 'GET',
  headers: {
    Authorization: `Bearer ${token}`
  },
  selector: (response) => response.json(),
}).pipe(
  catchError((err) => {
    // 处理错误后抛出自定义错误
    return throwError('My Custom Error Message');
  }),
);

订阅代码：

observable.subscribe({
  next: () => {},
  error: () => {
    // 错误处理逻辑
  },
});

尽管配置了catchError，仍偶尔出现未捕获的错误，我怀疑错误来自selector中的response.json()调用。请问如何正确捕获fetch的所有错误？是否需要将selector逻辑移出并单独处理？

你的猜测是对的，问题出在selector的使用方式上。要完整捕获所有错误场景（网络错误、HTTP状态错误、JSON解析错误），需要将响应处理逻辑移出selector，在pipe中手动处理：

原因分析 #

1. Fetch API特性限制：fetch仅在网络层面出错（比如断网）时才会触发reject，HTTP状态码错误（如404、500）不会被fetch判定为错误，此时selector中的response.json()仍会执行，如果响应体不是合法JSON，就会抛出异步错误。
2. Selector的局限性：虽然fromFetch会将selector返回的Promise错误转化为Observable错误，但无法提前判断响应状态是否正常，导致HTTP错误被当作正常响应处理，后续解析失败才抛错，增加了调试复杂度。

修改后的代码 #

fromFetch(`${requestUrl}`, {
  method: 'GET',
  headers: {
    Authorization: `Bearer ${token}`
  }
}).pipe(
  switchMap(response => {
    // 先判断HTTP响应状态是否正常
    if (!response.ok) {
      // 读取响应文本并抛出包含状态码的错误
      return from(response.text()).pipe(
        map(text => {
          throw new Error(`请求失败: ${response.status} - ${text}`);
        })
      );
    }
    // 处理JSON解析，解析失败会自动转为Observable错误
    return from(response.json());
  }),
  catchError((err) => {
    console.error('捕获到错误:', err);
    // 抛出自定义错误，供订阅端处理
    return throwError(() => new Error('My Custom Error Message'));
  })
);

关键优化点 #

• 移除selector：将响应处理逻辑移到pipe的switchMap中，实现完整的错误控制。
• 手动判断响应状态：通过response.ok检查HTTP状态，将4xx/5xx这类错误主动抛出，避免后续解析无效响应。
• 统一捕获错误：网络错误、HTTP错误、JSON解析错误都会被catchError捕获，确保没有遗漏。

订阅端注意事项 #

确保订阅的error回调包含实际处理逻辑（不要留空），否则即使catchError抛出错误，也可能因为未处理导致未捕获异常：

observable.subscribe({
  next: (data) => {
    // 处理正常响应数据
  },
  error: (err) => {
    // 实际处理错误，比如提示用户
    console.error('订阅端捕获错误:', err);
  },
});

内容的提问来源于stack exchange，提问作者Duba