Observable reuse after erroring

Question

I discovered, when an Observable errors, it does not emit any values anymore. So how am i supposed to use an Observable, which may error in some cases (containing http call or anything), inside my template?

Say, i have a Subject, which contains a string given by an input, and switchMap to a http call. http call errors because wrong user input. Now, when i call next on the subject with another user input, the switchMap + http call are not gonna be executed, because the observable is in error state. catchError does not work too.

i.e.

  string$ = new Subject<string>();
  errorS$ = this.string$.pipe(switchMap(s =>
    s == '1' ?
      throwError('mein eroor') : 
      of(s)
  )).pipe(catchError(() => EMPTY))

  constructor(){
    timer(1000, 2000)
      .pipe(take(3))
      .subscribe(i => {
          console.log(i)    
          this.string$.next("" + i)
      })
  }

in this example, when i use errors$ inside my template, it is not updated anymore after error. So how to get this to update again, and where do i get my error.

Example on Stackblitz

Answer 1

You need to use retry in pipe to resubscribe on error pipe

  string$ = new Subject<string>();
  errorS$ = combineLatest({ s: this.string$ }).pipe(
    mergeMap(({ s }) => (s == '1' ? throwError('test') : of(s))),
    retry()
  );

  constructor() {
    this.errorS$.subscribe((result) => console.log(result));
    this.string$.next('0');
    this.string$.next('1');
    this.string$.next('2');
  }

As you can see in the console output is 0 and 2 which mean the errorS$ pipe is running!