Identifying and handling errors in the outer observable of an RXJS sequence to manage

Question

Identifying and handling errors in the outer observable of an RXJS sequence to manage

Encountered a puzzling rxjs issue that has me stumped. Here's the scenario: I have two requests to handle:

const obs1$ = this.http.get('route-1')
const obs2$ = this.http.get('route-2')

If obs1$ throws an error, I want to catch it and emit a static value instead. However, if obs1$ completes successfully, I want to switch over to obs2$ without catching any errors from it. Currently, my solution looks like this:

obs1$.pipe(
   catchError(() => of('my value')),
   switchMap((v) => v === 'my value' ? of(v) : obs2$)
).subscribe(
   (v) => console.log(v, 'got my result'),
   (e) => console.log(e, 'encountered an error')
)

Although this works, it feels a bit convoluted. I'm curious if there's a cleaner way to achieve the same outcome. I've ruled out moving the catchError after switchMap as it would also catch errors from obs2$, which is not ideal. Ideally, I'd like to bypass to the end if an error occurs with obs1$.

javascript typescript rxjs

Answer 1

Answer №1

To improve your code, consider moving the catchError statement below the switchMap function. You can also add another catchError specifically for handling errors from obs2$, ensuring that no emissions occur if there is an error.

obs1$.pipe(
  switchMap(() => obs2$.pipe(
    catchError(() => NEVER)       // or `of('someValue')` if preferred
  )),
  catchError(() => of('my value')),
).subscribe(
   (value) => console.log(value, 'got my result'),
   (error) => console.log(error, 'encountered an error')
)

Answer 2

To improve your code, consider moving the catchError statement below the switchMap function. You can also add another catchError specifically for handling errors from obs2$, ensuring that no emissions occur if there is an error.

obs1$.pipe(
  switchMap(() => obs2$.pipe(
    catchError(() => NEVER)       // or `of('someValue')` if preferred
  )),
  catchError(() => of('my value')),
).subscribe(
   (value) => console.log(value, 'got my result'),
   (error) => console.log(error, 'encountered an error')
)

Answer 3

Answer №2

My suggestion for a solution would be:

obs1$.pipe(
  // the happy path: `obs1$` completed successfully
  concatWith(obs2$),
  catchError(() => of("static value"))
)

concatWith is described as follows:

// `source` in this cases refers to `obs1$`
// `...args` is ...[obs2$]
concatAll()(internalFromArray([source, ...args],  )).subscribe(subscriber as any);

Therefore, obs2$ will only be subscribed if and when obs$1 completes.

concatAll()(internalFromArray([source, ...args],  ))

can be simplified to (roughly) the following code:

from([source, ...args]).pipe(
  concatAll(),
)

As for concatAll, it is defined as

return mergeMap(identity, concurrent);

.

An interesting point about mergeAll is that if an inner observable encounters an error, the error notification will be passed on to the destination stream, in this case it will be caught by catchError.

Fixing an oversight

I overlooked the requirement stating that errors from obs2$ should not be handled:

obs1$.pipe(
  concatWith(obs2$),

  // `caught$` represents the observable that emitted the errors
  catchError((err, caught$) => caught$ === obs1$ ? of("static value") : throwError(err));
)

Answer 4

My suggestion for a solution would be:

obs1$.pipe(
  // the happy path: `obs1$` completed successfully
  concatWith(obs2$),
  catchError(() => of("static value"))
)

concatWith is described as follows:

// `source` in this cases refers to `obs1$`
// `...args` is ...[obs2$]
concatAll()(internalFromArray([source, ...args],  )).subscribe(subscriber as any);

Therefore, obs2$ will only be subscribed if and when obs$1 completes.

concatAll()(internalFromArray([source, ...args],  ))

can be simplified to (roughly) the following code:

from([source, ...args]).pipe(
  concatAll(),
)

As for concatAll, it is defined as

return mergeMap(identity, concurrent);

.

An interesting point about mergeAll is that if an inner observable encounters an error, the error notification will be passed on to the destination stream, in this case it will be caught by catchError.

Fixing an oversight

I overlooked the requirement stating that errors from obs2$ should not be handled:

obs1$.pipe(
  concatWith(obs2$),

  // `caught$` represents the observable that emitted the errors
  catchError((err, caught$) => caught$ === obs1$ ? of("static value") : throwError(err));
)

Identifying and handling errors in the outer observable of an RXJS sequence to manage

Answer №1

Answer №2

Fixing an oversight

Similar questions

Unique loading of images without duplication

Using Next.js and Tailwind CSS to apply a consistent pseudo-random color class both on the server and client side

Encountering a next-i18next 404 error while attempting to access pages with localeSubpaths configuration enabled

Securing specific pages in Angular front-end: A guide to implementing authentication

What is the most efficient way to retrieve the current user's ID within Loopback?

Why does this asynchronous function initially return nothing, only to suddenly return all results on subsequent tries?

having difficulties sorting a react table

I'm puzzled as to why I am unable to invoke a class method within this callback function. The error message indicates a TypeError: 'this' is undefined

What is the reason that other classes in JavaScript do not inherit the static methods of the Object class?

At that specific moment, a plugin is active to monitor the execution of JavaScript functions

I am having difficulty with the fadeIn animation not working as expected in my situation

Accept an empty string as the defaultValue, but disallow it during validation using Zod, react-hook-form, and Material UI

Retrieve storage information when an internet connection is unavailable on React Native

Is it possible to execute a function once an element has finished loading?

Exploring the potential of utilizing functions in express.js to take advantage of the "locals"

When utilizing the post method with fetch to send data, an empty object is returned

Do global variables in a node.js server apply across the entire server or exclusively to individual sessions or users?

Utilizing helper functions in Node based on their specific types

"Encountered a roadblock while attempting to utilize the applyMatrix

React 18 update causes malfunctioning of react-switch-selector component