RxJS: Observable.never() acts like an eternal subscription

Question

RxJS: Observable.never() acts like an eternal subscription

Currently, I am working with rxjs version 5.5.6.

Below is a snippet of code that showcases a specific behavior:

Observable.of(1, 2)
    .do(a => {
        console.log(a);
        let d:string = null;
        let r = d.length;  // this line throws a null exception
    })
    .catch(() => {
        console.log("error caught");  
        return Observable.never();
    })
    .subscribe();

Expected output:

1
error caught
2
error caught

Actual output:

1
error caught

The subscription terminates even though an Observable.never() is returned in the .catch(...) method chain.

Any suggestions on how to handle this?

ANOTHER SCENARIO

this.subs = Observable
    .merge(this.$searchQuery, this.$lazyQuery)
    .do(() => this.loadingPage())
    .map(filter => this.buildURL(user, app, filter))
    .switchMap(url => this.service.getItemsFromService(url))
    .map(response => this.buildPage(response))
    .do(page => this.loadedPage(page))
    .catch(() => {
        this.loadedPage(pojo.Page.EMPTY);
        return Observable.never();
    })
    .takeUntil(this.$unsubscribe)
    .subscribe();

angular typescript rxjs

Answer 1

Answer №1

The result you receive is:

1 
error caught

This occurs because the initial value triggers an error within the tap method, which then travels through the onError channel causing the sequence to stop. By using catch, you are able to capture this error and continue on to the next sequence (never), but the original sequence (of(1,2)) remains halted. Therefore, after 1 encounters an error, 2 is not processed by tap.

Once you return never in the catch block, no values are emitted and the Observable never reaches completion. If you place logs inside the subscribe function for the next, error, and complete callbacks, you will observe that they do not get executed.

Answer 2

The result you receive is:

1 
error caught

This occurs because the initial value triggers an error within the tap method, which then travels through the onError channel causing the sequence to stop. By using catch, you are able to capture this error and continue on to the next sequence (never), but the original sequence (of(1,2)) remains halted. Therefore, after 1 encounters an error, 2 is not processed by tap.

Once you return never in the catch block, no values are emitted and the Observable never reaches completion. If you place logs inside the subscribe function for the next, error, and complete callbacks, you will observe that they do not get executed.

Answer 3

Answer №2

Indeed, all the information provided by @frido is accurate. I would like to supplement that answer with the following:

If you wish to handle any errors occurring within a specific Observable (such as an HTTP request), then you must manage it within that particular Observable.

  let correct = Observable.of("correct")
  let inCorrect = Observable.throw('inCorect')

  let obs = [inCorrect, correct];
  let handledObs = obs.map(eachObs => {
    return eachObs.catch((e) => {
      console.log("Individual handler, Good Catch!");
      return Observable.of("I am tampered");
    })
  })

  forkJoin(...handledObs)
  .do(a => {
      console.log(a);
  })
  .catch(() => {
      console.log("error catched");
      return Observable.never();
  })
  .subscribe(data => {
    console.log(`data`, data)
  },(e) => {
      console.log(`error`, e)
  });

}

Check out an example here: https://stackblitz.com/edit/angular-7mmhn7?file=src/app/app.component.ts

UPDATE

Upon reviewing your code, it appears that you are attempting to log something and the returned data may not have a length property. Even in this scenario, if you wish to continue with the stream, you can add a basic try catch block within do().

  from([1, 2])
  .do(a => {
      try {
        console.log(a);
        let d:string = null;
        let r = d.length;
      } catch(e) {
        console.log(`catched under do`, e)
      }
  })
  .catch(() => {
      console.log("error catched");
      return Observable.of('catched');
  })
  .subscribe(data => {
    console.log(`data`, data)
  },(e) => {
      console.log(`error`, e)
  });

See an example here: https://stackblitz.com/edit/angular-bcrava?file=src/app/app.component.ts

Answer 4

Indeed, all the information provided by @frido is accurate. I would like to supplement that answer with the following:

If you wish to handle any errors occurring within a specific Observable (such as an HTTP request), then you must manage it within that particular Observable.

  let correct = Observable.of("correct")
  let inCorrect = Observable.throw('inCorect')

  let obs = [inCorrect, correct];
  let handledObs = obs.map(eachObs => {
    return eachObs.catch((e) => {
      console.log("Individual handler, Good Catch!");
      return Observable.of("I am tampered");
    })
  })

  forkJoin(...handledObs)
  .do(a => {
      console.log(a);
  })
  .catch(() => {
      console.log("error catched");
      return Observable.never();
  })
  .subscribe(data => {
    console.log(`data`, data)
  },(e) => {
      console.log(`error`, e)
  });

}

Check out an example here: https://stackblitz.com/edit/angular-7mmhn7?file=src/app/app.component.ts

UPDATE

Upon reviewing your code, it appears that you are attempting to log something and the returned data may not have a length property. Even in this scenario, if you wish to continue with the stream, you can add a basic try catch block within do().

  from([1, 2])
  .do(a => {
      try {
        console.log(a);
        let d:string = null;
        let r = d.length;
      } catch(e) {
        console.log(`catched under do`, e)
      }
  })
  .catch(() => {
      console.log("error catched");
      return Observable.of('catched');
  })
  .subscribe(data => {
    console.log(`data`, data)
  },(e) => {
      console.log(`error`, e)
  });

See an example here: https://stackblitz.com/edit/angular-bcrava?file=src/app/app.component.ts

RxJS: Observable.never() acts like an eternal subscription

Answer №1

Answer №2

Similar questions

Determine data types for functions in individual files when using ElysiaJS

Issue with noUnusedLocals flag detection within function* block

Encountering issues with MediaSession.setPositionState() and seekto functionalities not functioning properly

Angular - issues with delete functionality

Failure to validate Google KMS asymmetric keys

Calculate the total of JSON objects while eliminating duplicates in an array

Differences Between Public and Private Constructors in TypeScript

Having trouble binding component property in VueJS with TypeScript?

MSW is not effective when utilized in functions within certain contexts

How to preselect a value in a select tag in Angular 8

I am facing issues with my filtering functionality on the Angular Typescript mat-table component

Tips for Implementing a Button Click Sound in Ionic 2

Encountering a new challenge in Angular: The error "InvalidPipeArgument: '' for pipe 'AsyncPipe'

Uh oh! There seems to be an issue with the property 'getProjection', as it is undefined

"Exploring the power of Angular 16 coupled with Firebase 9 for seamless file

Issue with displaying Angular chart only resolves after resizing window following routing updates

Create a unique TypeScript constant to be mocked in each Jest test

Error message: Duplicate identifier found in Typescript

Guide on extracting the id from the path parameter in an HTTP request using Cloud Functions and nodejs

Dealing with Angular Forms: Addressing the absence of a value accessor for