rxjs/operators#catchError TypeScript Examples

onSubmit() {
    this.confirmButtonEnabled = false;
    const loading$ = this.showRegisteringUserLoading();
    const signup$ = this.privateCouponService.signup(this.onboardingForm.controls.email.value)
      .pipe(
        catchError((err: HttpErrorResponse) => {
          if (err.error.reason === 'USED_EMAIL') {
            console.log('The API returns USED_EMAIL error.');
            return of(null);
          }
          console.error(err);
          this.confirmButtonEnabled = true;
          this.presentToast(err.error.reason || err.statusText);
          throw (err);
        }),
        map((res: SignupResponse) => ({
          email: this.onboardingForm.controls.email.value,
          newUser: false,
          recordPreset: RecordPreset.COMMON_COLD,
          userId: (res) ? res.response.user_id : null,
        })),
        switchMap(userDataPatch => this.dataStore.updateUserData(userDataPatch)),
      );

    loading$
      .pipe(
        tap(loadingElement => this.loadingElement = loadingElement),
        switchMap(loadingElement => signup$.pipe(map(() => loadingElement))),
        switchMap(loadingElement => loadingElement.dismiss()),
      )
      .subscribe(() => {
        this.router.navigate(['/']);
      }, () => {
        this.loadingElement.dismiss();
      });
  }

handleAcceptOffer(hex: string) {
    console.debug('handleAcceptOffer()', hex)
    if (hex) {
      if (!this.validateHex(hex)) return

      this.messageService.sendMessage(getMessageBody(CoreMessageType.decodeoffer, [hex]), false)
      .pipe(catchError(error => of({ result: null }))).subscribe(r => {
        console.debug('decodeoffer', r)

        if (r.result) {
          this.onAcceptOffer(<OfferWithHex>{ offer: r.result, hex })
        } else {
          const dialog = this.dialog.open(ErrorDialogComponent, {
            data: {
              title: 'dialog.error',
              content: 'buildAcceptOffer.invalidOfferHex',
            }
          })
        }
      })
    }
  }

private getCreateUserCallback$(): (user: User) => Observable<void> {
    return (user: User) =>
      this.accountService.createUser(user).pipe(
        switchMap(() => this.loadUsers$()),
        tap(() => this.showResultSnackbar("Success")),
        catchError((errorResponse) => {
          this.showResultSnackbar(errorResponse.error?.msg ?? "Unknown error");
          return of(errorResponse);
        })
      );
  }

constructor(
    @Inject(Auth0ClientService) private auth0Client: Auth0Client,
    private configFactory: AuthClientConfig,
    private navigator: AbstractNavigator,
    private authState: AuthState
  ) {
    const checkSessionOrCallback$ = (isCallback: boolean) =>
      iif(
        () => isCallback,
        this.handleRedirectCallback(),
        defer(() => this.auth0Client.checkSession())
      );

    this.shouldHandleCallback()
      .pipe(
        switchMap((isCallback) =>
          checkSessionOrCallback$(isCallback).pipe(
            catchError((error) => {
              const config = this.configFactory.get();
              this.authState.setError(error);
              this.navigator.navigateByUrl(config.errorPath || '/');
              return of(undefined);
            })
          )
        ),
        tap(() => {
          this.authState.setIsLoading(false);
        }),
        takeUntil(this.ngUnsubscribe$)
      )
      .subscribe();
  }

saveCourse(courseId:string, changes: Partial<Course>): Observable<any> {

        const courses = this.subject.getValue();

        const index = courses.findIndex(course => course.id == courseId);

        const newCourse: Course = {
          ...courses[index],
          ...changes
        };

        const newCourses: Course[] = courses.slice(0);

        newCourses[index] = newCourse;

        this.subject.next(newCourses);

        return this.http.put(`/api/courses/${courseId}`, changes)
            .pipe(
                catchError(err => {
                    const message = "Could not save course";
                    console.log(message, err);
                    this.messages.showErrors(message);
                    return throwError(err);
                }),
                shareReplay()
            );
    }

removeBookFromCollection$ = createEffect(() =>
    this.actions$.pipe(
      ofType(SelectedBookPageActions.removeBook),
      mergeMap(({ book }) =>
        this.storageService.removeFromCollection([book.id]).pipe(
          map(() => CollectionApiActions.removeBookSuccess({ book })),
          catchError(() => of(CollectionApiActions.removeBookFailure({ book })))
        )
      )
    )
  );

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(
      catchError((httpError: HttpErrorResponse) => {
        console.error('Error from interceptor', httpError);
        this.notification.error(httpError.error || 'An unexpected error occurred!');
        return throwError(httpError);
      })
    ) as Observable<HttpEvent<any>>;
  }

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req)
      .pipe(catchError((error: HttpErrorResponse) => {
        if (error.status === 401) {
          this.router.navigate(['auth/login']);
        }
        // TODO: handle 403 error ?
        return throwError(error);
      }));
  }

intercept(
    request: HttpRequest<unknown>,
    next: HttpHandler
  ): Observable<HttpEvent<unknown>> {
    return next.handle(request).pipe(
      catchError((responseError: HttpErrorResponse) => {
        if (responseError.error.Errors && responseError.error.Errors.length > 0)
          responseError.error.Errors.forEach((error: any) =>
            this.toastrService.error(error.ErrorMessage)
          );
        else if (responseError.error.message)
          this.toastrService.error(responseError.error.message);
        else this.toastrService.error('An problem has occurred.');

        console.log(
          `! ~ file: http-error.interceptor.ts ~ line 24 ~ error`,
          responseError
        ); // Test

        return throwError(responseError);
      })
    );
  }

private showLinkNavigationDialog(href: string, domains: string[]): Observable<any> {
    const dialogRef = this._dialog.open(ExternalUrlConfirmationDialogComponent, {
      data: {
        title: this._translateService.instant("APP.LINK_NAVIGATION.TITLE"),
        message: this._translateService.instant("APP.LINK_NAVIGATION.MESSAGE", { url: href }),
        url: href,
        domains,
      },
    });

    return dialogRef.afterClosed().pipe(
      first(),
      switchMap((result: DialogResult) => {
        if (!result.success) {
          return of(undefined);
        }

        if (result.trustDomain !== "") {
          return from(this._wowUpService.trustDomain(result.trustDomain)).pipe(
            switchMap(() => from(this.openExternalLink(href)))
          );
        } else {
          return from(this.openExternalLink(href));
        }
      }),
      catchError((e) => {
        console.error("failed to open external link", e);
        return of(undefined);
      })
    );
  }

// eslint-disable-next-line @typescript-eslint/no-unused-vars
  loadUser(queryParams: Record<string, unknown> = {}): TApolloResponse<IUser> {
    return this.apollo
      .query<{ user: IUser}>( {query: UserQieries.usersRequest.query} )
      .pipe(
        map(result => extractApolloResponse(result, UserQieries.usersRequest.keys)),
        catchError((error: ApolloError) => throwError(error))
      )
  }

ngOnInit(): void {
		this.appService.subscription.pipe(
			filter(sub => sub !== null),
			switchMap(sub => this.restService.Discord.Widget().pipe(
				RestService.onlyResponse(),
				tap(d => this.discordInvite = d.body?.instant_invite ?? ''),
				catchError(() => of(sub)),
				mapTo(sub)
			)),

			// Fetch gifter?
			switchMap(sub => iif(() => !!sub?.gifter_id,
				this.restService.v2.GetUser(sub?.gifter_id as string).pipe(
					map(res => this.dataService.add('user', res.user)[0]),
					tap(u => this.gifter = u),
					mapTo(sub)
				),
				of(sub)
			))
		).subscribe({
			next: sub => {
				this.subscription.next(sub);
			}
		});

		this.appService.egvaultOK.pipe(filter(x => x !== null)).pipe(
			tap(ok => {
				this.available.next(ok);
				if (!ok) {
					this.clientService.openSnackBar('Subscription service is currenty unavailable, try again in a minute', 'OK', { duration: 3000, verticalPosition: 'top' });
					this.router.navigate(['/']);
				}
			})
		).subscribe({
			complete: () => this.cdr.markForCheck()
		});
	}

/**
 * Catches and logs errors, and resubscribes to the source observable.
 *
 * @ignore
 */
function catchErrorAndRetry<T>(): MonoTypeOperatorFunction<T> {
  return catchError((error, caught) => {
    Beans.get(Logger).error('[UnexpectedError] An unexpected error occurred.', error);
    return caught;
  });
}

intercept(
    _context: ExecutionContext,
    next: CallHandler,
  ): Observable<ExceptionBase> {
    return next.handle().pipe(
      catchError(err => {
        /**
         * Custom exceptions are converted to nest.js exceptions.
         * This way we are not tied to a framework or HTTP protocol.
         */
        if (err instanceof NotFoundException) {
          throw new NestNotFoundException(err.message);
        }
        if (err instanceof ConflictException) {
          throw new NestConflictException(err.message);
        }
        return throwError(err);
      }),
    );
  }

lookForBarcode(barcode: string): Observable<ExternalProduct> {
    if (!this.enabled) {
      return EMPTY;
    }

    return this.http.get<ItemLookupResponse>(
      "https://api.upcitemdb.com/prod/trial/lookup",
      {
        params: {
          upc: convertToUpcAIfRequired(barcode)
        }
      }
    ) .pipe(
      catchError(() => EMPTY),
      switchMap(r => {
      if (r.items.length === 0) {
        return EMPTY;
      } else {
        let name = r.items[0].title;

        if (r.items[0].brand) {
          name += ` (${r.items[0].brand})`;
        }

        return of({ name });
      }
    })
    );
  }

getUsers$ = createEffect(() =>
    this.actions$.pipe(
      ofType(APP_ACTIONS.GET_USERS),
      mergeMap(() =>
        this.userService.getUsers().pipe(
          map((users) => {
            return getUsersSuccess({
              users,
            });
          }),
          catchError((error) =>
            of(
              getUsersFailure({
                error,
              })
            )
          )
        )
      )
    )
  );

private loadAsset(assetKey: string) {
    return this.http.get(`assets/${this.assetsToLoad[assetKey].path}`, {responseType: 'text'})
      .pipe(
        switchMap(res => {
          this.store$.dispatch(setLoadingMessage({message: `<i><pre>[200]</pre> LOADED </i>: ${assetKey}`}));
          return of(res);
        }),
        catchError(err => {
          this.store$.dispatch(setLoadingMessage(
            {message: `<small>ERROR</small>: ${assetKey} - <small>${err.status} - ${err.statusText}</small>`}));
          return of(null);
        })
      );
  }

private postArchive(blob: Blob) {
    const hostUrl = {
      LOCAL: 'http://127.0.0.1:8000',
      DEV: 'https://logboard-dev.numbersprotocol.io',
      PROD: 'https://mylog14.numbersprotocol.io',
    };
    const endpoint = '/api/v1/archives/';
    const formData = new FormData();
    formData.append('file', blob, 'mylog.zip');
    const hostType = 'PROD';
    const url = hostUrl[hostType] + endpoint;
    return this.http.post(url, formData)
      .pipe(
        map((res: string) => res.replace(hostUrl.PROD, hostUrl[hostType])),
        tap(logboardUrl => this.generatedUrl.next(logboardUrl)),
        catchError(err => this.httpErrorHandler(err)),
      );
  }

fetchCouponListEpic: Epic = (
  action$: ActionsObservable<Actions>,
  _,
  { productService }: Service,
) =>
  action$.pipe(
    filter(isActionOf(fetchCouponListAsync.request)),
    switchMap(() =>
      of(productService.getCoupons()).pipe(
        switchMap(payload => {
          return of(fetchCouponListAsync.success({ data: payload }));
        }),
      ),
    ),
    catchError(err => {
      return of(fetchCouponListAsync.failure(err));
    }),
  )

protected requestCache(pre: CombErr<Tin>): Observable<CombErr<Tout>> {
		return ajax(this.requestAjax(pre)).pipe(
			map(x => [{ ajaxRsp: x }, []] as CombErr<AjaxFlowInteralNode>),
			catchError(
				(err): Observable<CombErr<AjaxFlowInteralNode>> =>
					of([{}, [err]] as CombErr<AjaxFlowInteralNode>)
			),
			map(x => this.reconstructAjaxResult(x))
		);
	}

/* ----------------------------------------------------------------------------
 * Functions
 * ------------------------------------------------------------------------- */

/**
 * Resolve a pattern
 *
 * @param pattern - Pattern
 * @param options - Options
 *
 * @returns File observable
 */
export function resolve(
  pattern: string, options?: ResolveOptions
): Observable<string> {
  return from(glob(pattern, options))
    .pipe(
      catchError(() => EMPTY),
      switchMap(files => from(files)),
      options?.watch
        ? mergeWith(watch(pattern, options))
        : identity
    )
}

// Try mergeMap, switchMap, concatMap
  product$ = this.productSelectedAction$
    .pipe(
      filter(id => !!id),
      switchMap(selectedProductId =>
        this.http.get<Product>(`${this.productsUrl}/${selectedProductId}`)
          .pipe(
            tap(response => console.log(JSON.stringify(response))),
            map(p => ({ ...p, profit: p.price - p.cost }) as Product),
            catchError(this.handleError)
          )
      ));

/**
   * Calculates what amount of BRBC user will get if withdraw provided amount of xBRBC.
   * @param amount Amount of tokens that user wants to withdraw.
   * @return Observable<BigNumber>
   */
  public calculateLeaveReward(amount: BigNumber): Observable<BigNumber> {
    if (amount.isZero()) {
      return of(new BigNumber(0));
    }
    return from(
      this.web3PublicService[BLOCKCHAIN_NAME.BINANCE_SMART_CHAIN].callContractMethod(
        this.stakingContractAddress,
        this.stakingContractAbi,
        'canReceive',
        {
          methodArguments: [amount.toFixed(0)]
        }
      )
    ).pipe(
      catchError((error: unknown) => {
        this.errorService.catchAnyError(error as RubicError<ERROR_TYPE.RAW_MESSAGE>);
        return EMPTY;
      }),
      map(res => Web3Pure.fromWei(res))
    );
  }