Issue with Angular 7 and rxjs - Once catchError is triggered, the subscription stops receiving any further values

Question

Issue with Angular 7 and rxjs - Once catchError is triggered, the subscription stops receiving any further values

Consider the following code snippet:

this.service1
  .getValues()
  .pipe(
    mergeMap(response => this.service2.getMoreValues(response.id)),
    catchError(err => of({}))
  )
  .subscribe(response) => {
    console.log(response)
  });

The issue I am facing is that if the catchError method is triggered, new values stop being received in my subscription. Ideally, I would like to return an empty object when catchError is called and continue normally, while still expecting new values from my services.

I'm wondering why the subscription stops working after catchError is invoked. Any insights would be greatly appreciated. Thank you.

angular typescript rxjs

Answer 1

Answer №1

This behavior is accurate. The catchError method will subscribe to the Observable that is returned from its callback function.

Therefore, if you want the Observable to continue emitting values from the source, you can simply resubscribe to it.

import { concat } from 'rxjs';

const source = this.service1
  .getValues()
  .pipe(
    mergeMap(response => this.service2.getMoreValues(response.id)),
    catchError(err => concat(
      of({}),
      source,
    )),
  );

// It may also work using the following alternative approach, although I have not tested it
// catchError((err, caught) => concat(
//   of({}),
//   caught,
// )),

source.subscribe(response) => {
  console.log(response)
});

Another option is to use the retry() operator which automatically resubscribes for you. However, keep in mind that you won't be able to pass of({}) before resubscribing.

Answer 2

This behavior is accurate. The catchError method will subscribe to the Observable that is returned from its callback function.

Therefore, if you want the Observable to continue emitting values from the source, you can simply resubscribe to it.

import { concat } from 'rxjs';

const source = this.service1
  .getValues()
  .pipe(
    mergeMap(response => this.service2.getMoreValues(response.id)),
    catchError(err => concat(
      of({}),
      source,
    )),
  );

// It may also work using the following alternative approach, although I have not tested it
// catchError((err, caught) => concat(
//   of({}),
//   caught,
// )),

source.subscribe(response) => {
  console.log(response)
});

Another option is to use the retry() operator which automatically resubscribes for you. However, keep in mind that you won't be able to pass of({}) before resubscribing.

Answer 3

Answer №2

My objective is to handle errors in a specific way: If catchError is triggered, I want to return an empty object

To achieve this, consider using of({}) within the catchError method like so:

this.service1
 .getValues()
 .pipe(
   mergeMap(response => this.service2.getMoreValues(response.id)),
   catchError(err => {
     return of({});
   })
 )
 .subscribe(response) => {
   console.log(response)
 });

Answer 4

My objective is to handle errors in a specific way: If catchError is triggered, I want to return an empty object

To achieve this, consider using of({}) within the catchError method like so:

this.service1
 .getValues()
 .pipe(
   mergeMap(response => this.service2.getMoreValues(response.id)),
   catchError(err => {
     return of({});
   })
 )
 .subscribe(response) => {
   console.log(response)
 });

Issue with Angular 7 and rxjs - Once catchError is triggered, the subscription stops receiving any further values

Answer №1

Answer №2

Similar questions

When importing a React Component with styling into the pages folder, it fails to function properly

Guide on linking an XML reply to TypeScript interfaces

Angular 4 async pipe not functioning as expected for Observable to update UI

order by truthiness

"Encountering an issue with mounting components in React Unit Testing with Jest and Typescript

Creating a conditional interface based on props in TypeScript: A step-by-step guide

When running the npm install command for Angular, an error occurred stating: "npm ERR! Maximum call stack

Creating a sophisticated union type by deriving it from another intricate union type

The functionality of React useState seems to be operational for one state, but not for the other

The plugin "proposal-numeric-separator" was not found. Please make sure that there is a corresponding entry for it in the ./available-plugins.js file

It seems that every time you save data in Angular, the local storage array gets overwritten

Creating a comprehensive object within a single interface using Typescript

Vue 4 and TypeScript: Dealing with the error message 'No overload matches this call'

When setting up Webpack with TypeScript, an error is encountered related to imports

Exploring nullish coalescing with undefined values

Animated CSS side panel

What steps can I take to allow a third-party JavaScript to access my TypeScript object?

When transitioning between views in Angular App, it freezes due to the large data response from an HTTP request

Exploring TypeScript's type discrimination with objects

Guide to showcasing associated information in HTML using Angular 7