抛出错误后如何避免执行concatMap？

Question

I have the following a stream of click events:

this.createReestrClick
            .pipe(
                concatMap(() =>
                    this.documentsRepository.selectedDocumentsFilesIds$.pipe(
                        take(1),
                        tap((ids: number[]) => {
                            if (ids.length == 0) throw new Error('Error messsage!');
                        }),

                        indicate(this.createReestrloading$),
                        tap((ids: number[]) => (this.dialogConfig.data = { data: { ids }, width: '500px' })),
                        concatMap(() =>
                            this.dialog
                                .open(DialogDocumentCreateRegisterComponent, this.dialogConfig)
                                .afterClosed()
                                .pipe(
                                    filter(Boolean),
                                    concatMap((data: { date: Date; ids: number[] }) =>
                                        this.documentsRepository.CreateMailReestrById(data.ids, data.date),
                                    ),
                                    handleResponseMessage(this.messageService),
                                ),
                        ),
                    ),
                ),
                catchError((e) => of(e)),
            )
            .subscribe((e) => {
                if (e instanceof Error) this.messageService.showMessage('', e.message, 'warning');
            });

Firts it listens clicks, then concat with selectedDocumentsFilesIds$ . In case there are no values in array it throws an exeption:

if (ids.length == 0) throw new Error('Error messsage!');

First problem when in happend the inner stream selectedDocumentsFilesIds$ does not work more. To solve this I have moved catchError((e) => of(e)), on the line:

tap((ids: number[]) => {
   if (ids.length == 0) throw new Error('Error messsage!');
 }),
catchError((e) => of(e))

In this case as I return an empty observer of(e) it allows to continue concatMap(() => , but should not.

How to fix it, dont allow to execute concatMap(() => if exception happens and dont stop steam?

Answer 1

As an abstract, you can do something like this

let hadError=false;
observable.pipe(
  ....
  yourThrowingErrorOperator(),
  catchError(err=> hadError=true),
  takeUntil(v=>hadError),
  concatMap(...)
.....

)

so once error will be cought in the upstream, downstream will be terminated. If you want to keep it up and running, use filter instead of takeUntil to "block" values in the stream while flag is set. Just remember to reset it somehow.