Keep the Observable alive after error

faulty-component.ts

public class Component {
  constructor(private service: Service) {}
  handleClick$ = new Subject();
  ngOnInit() {
    this.handleClick$.pipe(
      switchMap(() => {
        return this.service.someObservable$;
      })
    ).subscribe(console.log);
    // this observable would stop firing as soon as there is an error, subsequent button clicks will not trigger it.
  }

  handleClick() {
   this.handleClick$.next();
  }
  
}

observable-errors

How to keep an observable alive even if an inner observable has errored out.

service.ts

import {interval} from 'rxjs';

export class Service {
   public someObservable$: Observable<number>;
  constructor() {
     someObservable$ = interval(1000).pipe(
        map((x: number) => {
          if (x === 10) {
            throw new Error('oops!');
          }
          return x;
        }),
        take(20)
     )
  }
}

working-component.ts

public class Component {
  constructor(private service: Service) {}
  handleClick$ = new Subject();
  ngOnInit() {
    const someObservable$ = this.service.someObservable$.pipe(
      catchError((error) => {
        return of(null);
      })
    )
    this.handleClick$.pipe(
      switchMap(() => {
        return someObservable$;
      })
    ).subscribe(console.log);
    // this observable would not stop firing as soon as there is an error, subsequent button clicks will not trigger it.
  }

  handleClick() {
   this.handleClick$.next();
  }
  
}