How to continue a mergeMap when one fails in Angular

Question

I can't seem to figure out how to continue with a mergeMap in Angular when one fails.

I'm stringing together two mergeMap calls on an observable inside pipe. Both finish all their calls, but one of the second merge map calls return an error, so none of the second merge calls get mapped.

Observable.pipe(
   mergeMap(
     result => {
       return stuff
       });
     }
   ), mergeMap(result => {
     return stuff //one of the calls here will error, but the rest work
   }),
   catchError(error => {
     return of(undefined)
   })
 ).subscribe({
   next: (result) => {
     //this will be undefined if one of the above calls failed, works otherwise
     if(result != undefined)
   { 
   //stuff
   }

I'm still very new to this so any help would be appreciated.

Answer 1

You need to chain catchError() with the nested Observable before the error is propagated to the main chain.

source$.pipe(
  mergeMap(result => stuff.pipe(
    catchError(error => {
      return of(undefined);
    }),
  )),
  mergeMap(result => stuff.pipe(
    catchError(error => {
      return of(undefined);
    })
  )),
);

Of course the second mergeMap needs to be able to handle undefined returned by the first mergeMap.