AngularJS / rxjs: Observable not catching error at subscription

user_15229172 0
Viewed 302

Im trying to handle some custom errors on a Observable.

I want to exit a subscription if I throw a new custom error. But no matter what I try it still proceeds the process without any errors thrown.

Im trying to exit the subscribe function and skip to the error handler, but my following code is not working as expected..

const obs = new Observable((observer) => {
      observer.next();
    }).pipe(
      map(() => {
        return "Some Data";
      }),
      tap(() => {
        if (true) { // Some condition
          return throwError( new Error("Test error") )
        }
      }),
      catchError(() => {
        return throwError( new Error("Test error") );
      })
    )

    obs.subscribe((res) => {
      console.log("[OBS]", res); // Actual triggered handler
    }, err => {
      console.log("[OBS]", err); // This handler should be actually triggered
    })
rxjs angular angularjs typescript
2 Answers

A return value in a tap operator has no effect, it is not used by the observable stream in the further Operations. If you use map instead of tap, you should see your error message.

user_49608460

The answer of @Loop is right, but instead of map you could use iif operator in combination with mergeMap.

iif:

Decides at subscription time which Observable will actually be subscribed.

iif accepts a condition function and two Observables. When an Observable returned by the operator is subscribed, condition function will be called. Based on what boolean it returns at that moment, consumer will subscribe either to the first Observable (if condition was true) or to the second (if condition was false). Condition function may also not return anything - in that case condition will be evaluated as false and second Observable will be subscribed.

So you could try something like this:

   const MyCustomError1 = throwError(new Error("Test error 1"));
   const MyCustomError2 = throwError(new Error("Test error 2"));

    const obs = new Observable(observer => {
      observer.next();
    }).pipe(
      map(() => {
        return "Some Data";
      }),
      mergeMap(v =>
        iif(
          () => /** Condition goes here **/ true,
          /** if true **/ MyCustomError1,
          /** if false **/ of(v)
        )
      ),
      catchError(() => {
        console.log("Error catched");
        return MyCustomError2;
      })
    );
user_154258930
Related