angular: catching errors in rxjs pipe/mergemap sequence

Question

currently I have my code structured like this, and it is working great:

// service:
getRequestA() { return this.http.get(someUrl) }
getRequestB(id) { return this.http.get(someUrl + id) }
getRequestC(id) { return this.http.get(someUrl + id) }
getAll() {
  return getRequestA()
    .pipe(
      mergeMap((resp) => {
        return this.getRequestB(resp.id)
      }),
      mergeMap((resp) => {
        return this.getRequestC(resp.id)
      })
    )
}

which allows me to do this in my component:

// component:
service.getAll().subscribe(resp => {
  // result of service.getRequestC()
}, error => {
  // error occurred in any 1 of the 3 http calls
});

This is great as I need the result of each call before firing off the next, and I only care about the final result. However, now I have a desire to know which specifically of the 3 http calls failed, to display a better error to the user. I've tried a bunch of stuff but can't figure out to throw custom errors in the service that I could then differentiate between in the component. Thanks in advance for any suggestions!

cartant · Accepted Answer · 2018-02-10 01:46:49Z

6

An arrangement like this should let you tag and re-throw any errors:

const tagError = (tag, error) => {
  error.tag = tag;
  return error;
};

getAll() {
  return getRequestA().pipe(
    catchError(error => { throw tagError("A", error); }),
    mergeMap(resp => this.getRequestB(resp.id).pipe(
      catchError(error => { throw tagError("B", error); })
    )),
    mergeMap(resp => this.getRequestC(resp.id).pipe(
      catchError(error => { throw tagError("C", error); })
    ))
  );
}

In fact, you could take this further and turn the tagError function into a pipeable operator:

const tagError = tag => catchError(error => {
  error.tag = tag;
  throw error;
});

getAll() {
  return getRequestA().pipe(
    tagError("A"),
    mergeMap(resp => this.getRequestB(resp.id).pipe(tagError("B"))),
    mergeMap(resp => this.getRequestC(resp.id).pipe(tagError("C")))
  );
}

edited Feb 10, 2018 at 1:46

answered Feb 10, 2018 at 1:40

cartant

58.6k17 gold badges169 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angular: catching errors in rxjs pipe/mergemap sequence

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related