Calling observable inside an error callback in Angular with RxJs

Question

I have two observable calls relying on each other, this works fine, but once an error occurs in the response I need to call another observable which rolls the transaction back.

ZThat is my code:

return this.myService.createOrder()
    .pipe(
        concatMap((res: MyResponse) => this.addProduct(res.orderId, PRODUCT_ID))  
    ).subscribe({
          error: (error: any): void => // TODO: Call another observable here passing res.orderId to rollback transaction
    });

As you can see in the TODO my plan is to call another service when an error occurs with res.orderId, but I don't like having nested subscriptions.

Is it possible to do that without creating nested subscriptions???

Picci · Accepted Answer · 2021-12-22 14:18:01Z

As @Emilien has pointed out, catchError is your friend in this case.

catchError expects, as parameter, a function which itself expects an error as input and return an Observable.

So, the code could look like this

// define a variable to hold the orderId in case an error occurs
let orderId: any

return this.myService.createOrder().pipe(
  tap((res: MyResponse) => orderId = res.orderId),
  concatMap((res: MyResponse) => this.addProduct(res.orderId, PRODUCT_ID)), 
  catchError((error: any) => {
    // this.rollBack is the function that creates the Observable that rolls back the transaction - I assume that this Observable will need orderId and mybe the error to be constructed
    // catchError returns such Observable which will be executed if an error ouucrs
    return this.rollBack(orderId, error)
  })
).subscribe(console.log);

As you see, in this case there is only one subscription for the entire chain of Observables.

Emilien · Accepted Answer · 2021-12-22 13:35:51Z

0

Don't know if it will solve but could you try with CathError ?

return this.myService.createOrder().pipe(
  concatMap((res: MyResponse) => this.addProduct(res.orderId, PRODUCT_ID)), 
  catchError((res: MyResponse) => {
    // Call here your observable with res
  })
).subscribe(console.log);

answered Dec 22, 2021 at 13:35

Emilien

2,7534 gold badges17 silver badges29 bronze badges

1 Comment

DAG Over a year ago

Yes I have this, but at this point the observable is still open and I would rather not add another subscription to it. I think the best way is to catch the error with catchError and then pipe with map and there call the subscription...something like that...

Mrk Sef · Accepted Answer · 2021-12-22 16:01:14Z

0

Catch and Release

If you still want the source observable to error out. You can catch the error, run your rollback observable, then once it completes, re-throw the error.

That might look like this:

this.myService.createOrder().pipe(
  concatMap((res: MyResponse) => this.addProduct(res.orderId, PRODUCT_ID).pipe(
    catchError(err => concat(
      this.rollBack(res.orderId),
      throwError(() => err)
    )
  )  
).subscribe(...);

answered Dec 22, 2021 at 16:01

Mrk Sef

8,0721 gold badge14 silver badges25 bronze badges

Collectives™ on Stack Overflow

Calling observable inside an error callback in Angular with RxJs

3 Answers 3

Comments

1 Comment

Catch and Release

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Catch and Release

Comments

Your Answer

Sign up or log in

Post as a guest

Related