如何在Angular stream的多个环节捕获并区分不同步骤的错误？

现有实现无法区分错误来源，RxJS流中任意环节抛出的错误都会直接传递到subscribe的错误回调，没有附加标识的情况下无法判断错误发生的具体阶段。

最优实现方案 #

通过catchError给不同阶段的错误打上专属标识，在错误回调中直接通过标识判断来源：

import { catchError, throwError } from 'rxjs';

this.groupRepository
  .getUserGroup()
  .pipe(
    // 捕获获取群组阶段的错误，打上对应标识
    catchError(err => throwError(() => ({
      errorType: 'GET_GROUP_ID_FAIL',
      rawError: err
    }))),
    mergeMap(group => {
      return this.profileRepository.getAllProfiles(group.id)
        .pipe(
          // 捕获获取个人资料阶段的错误，打上对应标识
          catchError(err => throwError(() => ({
            errorType: 'GET_PROFILE_FAIL',
            rawError: err
          })))
        )
    })
  )
  .subscribe(
    (res) => {
      // 原有业务逻辑，设置群组和个人资料
    },
    (wrapError) => {
      this.error = wrapError.rawError;
      // 直接通过标识判断错误来源，执行对应处理逻辑
      if (wrapError.errorType === 'GET_GROUP_ID_FAIL') {
        // 示例：提示用户获取群组信息失败，请检查权限
      } else if (wrapError.errorType === 'GET_PROFILE_FAIL') {
        // 示例：触发个人资料拉取重试逻辑
      }
    }
  );

方案说明 #

• 所有阶段抛出的错误都会被包装成统一结构，errorType 字段唯一标识错误发生的阶段，rawError 字段保留原始错误信息，不影响原有错误排查
• 不需要修改原有Repository层的接口实现，仅在流组装层添加错误处理逻辑，侵入性极低
• 后续如果新增流处理环节，只需要对应添加带标识的catchError即可，扩展性强

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