rxjsangular9switchmap

Angular 9/rxjs: How to handle an error thrown inside switchMap?


I'm using Angular (9) powered Bootstrap (6.1.0) TypeAhead and defining its search function like so:

search = (text$: Observable<string>) => {
    return text$.pipe(
      debounceTime(200),
      distinctUntilChanged(),
      // switchMap allows returning an observable rather than maps array
      switchMap((searchText) => {
        if (!searchText || searchText.trim().length == 0) {
          // when the user erases the searchText
          this.dealerRepUserID = 0;
          this.dealerRepChanging.emit(this.dealerRepUserID);
          return EMPTY;
        }
        else if (this.dealerID == this.hostOrganizationID) {
          // get a list of host reps
          return this.myService.getHostRepsAutoComplete(searchText, this.includeInactive);
        } else {
          // get a list of dealer reps
          return this.myService.getDealerReps(this.dealerID, searchText);
        }
      })
    );
  }

The function must return an Observable. How do I catch an error thrown inside the switchMap?


Solution

  • Have you try the catchError

    import { catchError } from 'rxjs/operators';
    
    return text$.pipe(
          debounceTime(200),
          distinctUntilChanged(),
          // switchMap allows returning an observable rather than maps array
          switchMap((searchText) => {
            if (!searchText || searchText.trim().length == 0) {
              // when the user erases the searchText
              this.dealerRepUserID = 0;
              this.dealerRepChanging.emit(this.dealerRepUserID);
              return EMPTY;
            }
            else if (this.dealerID == this.hostOrganizationID) {
              // get a list of host reps
              return this.myService.getHostRepsAutoComplete(searchText, this.includeInactive).pipe(catchError(error => of());
            } else {
              // get a list of dealer reps
              return this.myService.getDealerReps(this.dealerID, searchText).pipe(catchError(error => of());
            }
          })
        );
    

    Here is my app effect

    public loadDataPerformance$: Observable<Action> = createEffect(() => {
        return this.actions$.pipe(
          ofType(RiskProfileActions.loadDataPerformance),
          withLatestFrom(
            this.store$.select(fromRoot.getAnalyticsFilterSelectedOptions),
            this.store$.pipe(select(fromFactoryPerformance.getFactoryId))
          ),
          switchMap(([{ recordDate }, filters, factoryId]) =>
            this.riskProfileApiService.getDataPerformanceData(filters, factoryId, recordDate).pipe(
              map((riskDataPerformanceData: PerformanceDataModel) =>
                RiskProfileActions.loadRiskScoreBreakdownPerformanceSuccess(riskDataPerformanceData)
              ),
              catchError(error => of(RiskProfileActions.loadRiskScoreBreakdownPerformanceFail(error)))
            )
          )
        );
      });