Using RxJs in Angular, you can invoke an observable from within an error callback

Question

Using RxJs in Angular, you can invoke an observable from within an error callback

I have a scenario where two observable calls are dependent on each other. Everything works fine, but when an error occurs in the response, I need to trigger another observable to rollback the transaction.

Below 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
    });

In the TODO section, I intend to call another service if there's an error with the res.orderId, but I want to avoid nested subscriptions.

Is there a way to achieve this without creating nested subscriptions?

angular typescript rxjs

Answer 1

Answer №1

One of the solutions, pointed out by @Emilien, is to use the catchError method.

To implement this solution, you need to provide a function to catchError that takes an error as input and returns an Observable.

Here is an example implementation:

// store orderId in case of error
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) => {
    // create Observable for rolling back transaction
    return this.rollBack(orderId, error)
  })
).subscribe(console.log);

In this approach, there is only one subscription for the entire chain of Observables.

Answer 2

One of the solutions, pointed out by @Emilien, is to use the catchError method.

To implement this solution, you need to provide a function to catchError that takes an error as input and returns an Observable.

Here is an example implementation:

// store orderId in case of error
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) => {
    // create Observable for rolling back transaction
    return this.rollBack(orderId, error)
  })
).subscribe(console.log);

In this approach, there is only one subscription for the entire chain of Observables.

Answer 3

Answer №2

Maybe this solution could work, have you considered using CathError ?

give this a try: return this.myService.createOrder().pipe(
  concatMap((res: MyResponse) => this.addProduct(res.orderId, PRODUCT_ID)), 
  catchError((res: MyResponse) => {
    // Implement your logic here with the response
  })
).subscribe(console.log);

Answer 4

Maybe this solution could work, have you considered using CathError ?

give this a try: return this.myService.createOrder().pipe(
  concatMap((res: MyResponse) => this.addProduct(res.orderId, PRODUCT_ID)), 
  catchError((res: MyResponse) => {
    // Implement your logic here with the response
  })
).subscribe(console.log);

Answer 5

Answer №3

Fishing and Releasing

If you prefer the original observable to encounter an error. You can catch the error, execute your rollback process, and then re-raise the error once it has been resolved.

An implementation could resemble the following:

this.myService.placeBet().pipe(
  mergeMap((res: BetResponse) => this.addStake(res.betId, STAKE_ID).pipe(
    catchError(err => concat(
      this.undoBet(res.betId),
      throwError(() => err)
    )
  )  
).subscribe(...);

Answer 6

Fishing and Releasing

If you prefer the original observable to encounter an error. You can catch the error, execute your rollback process, and then re-raise the error once it has been resolved.

An implementation could resemble the following:

this.myService.placeBet().pipe(
  mergeMap((res: BetResponse) => this.addStake(res.betId, STAKE_ID).pipe(
    catchError(err => concat(
      this.undoBet(res.betId),
      throwError(() => err)
    )
  )  
).subscribe(...);

Using RxJs in Angular, you can invoke an observable from within an error callback

Answer №1

Answer №2

Answer №3

Fishing and Releasing

Similar questions

Exploring Angular 2 Beta 8: An Introduction to @Query Usage

Tips for resolving the "trim" of undefined property error in Node.js

Error-throwing constructor unit test

Exploring Angular 2: Incorporating multiple HTML pages into a single component

I am encountering an issue with my code where the function this.ProductDataService.getAllProducts is not recognized when

Mapping properties between objects in Typescript: transferring data from one object to another

TypeScript's type casting will fail if one mandatory interface property is missing while an additional property is present

I need help combining my node project with Angular - how do I do it?

Converting JSON objects into TypeScript classes: A step-by-step guide

Discrepancy in Angular Material Buttons with theme design

The type '{}' is lacking the specified attributes from type 'RouteComponentProps<{},,>'

Continuously flowing chain of replies from a series of queries using RxJS

The custom declaration file for the 'react-dates' module could not be located

Is there any distinction between using glob wildcards in the tsconfig.json file when specifying "include" as "src" versus "include" as "src/**/*"?

Please convert the code to async/await format and modify the output structure as specified

Utilizing Typescript to pass props to a material-ui button enclosed in styled-components

An empty constant object can trigger an endless cycle of re-rendering

Determining the appropriate scenarios for using declare module and declare namespace

Utilize ASP.NET Boilerplate Core and Angular on Microsoft Azure for seamless deployment

Automatically identify the appropriate data type using a type hint mechanism