How to deal with Observable 'Cannot read property 'ngOriginalError' of undefined'

Question

I have created a service which handles HTTP calls and returns the response to the caller only if the result is successful.

I'm using Angular observable Map operator to check the result and status code and if the response does not have desired output then it should stop the observer pipeline after throwing a custom error message, which is being caught in catchError block which is working but at the same time getting uncaught Error in the console.

Angular version - 5+, Rxjs version- 5+

fetchRecords(): Observable < any > {
  return this.httpService.getData('cmpgnInfo/outlets').pipe(
    map((response: any) => {
      if (response[0].status !== 'ERROR') {
        throw new Error('Not able to details.');
      }
      return response[0].results;
    }),
    catchError(err => Observable.throw(this.showError('Outlets', err)))
  );
}

showError(logString: string, message ? : string) {
  this.logService.error(`Failed to load ${logString}`);
  this.modalService.showErrMessage(message);
}

how to deal with this Subscriber uncaught error? what is wrong with the code which is causing this.

Subscriber.js:247 Uncaught TypeError: Cannot read property 'ngOriginalError' of undefined at getOriginalError (core.js:1430) at ErrorHandler._findOriginalError (core.js:1548) at ErrorHandler.handleError (core.js:1505) at Object.next (core.js:5508) at SafeSubscriber.schedulerFn [as _next] (core.js:4342) at SafeSubscriber.__tryOrUnsub (Subscriber.js:243) at SafeSubscriber.next (Subscriber.js:190) at Subscriber._next (Subscriber.js:131) at Subscriber.next (Subscriber.js:95) at EventEmitter.Subject.next (Subject.js:56) at EventEmitter.emit (core.js:4322) at eval (core.js:4782) at ZoneDelegate.invoke (zone.js:334) at Zone.run (zone.js:126) at NgZone.runOutsideAngular (core.js:4708)

Solution

I got this error, when I threw a null accidentally. Like this:

throw null;

It had nothing to do with any subscriptions or observables, at least not explicitly.

Comments

[CruelEngine]

this.showError() is always undefined as its scope has changed . And also Observable.throw() throws error but you are calling a function instead . Change it to catchError(err =>this.showError('Outlets',err)) and then return Observable.throw() inside showError()

[Nitin]

I saw one of the posts which have this suggested ans and I followed the same and ended up with this error stackoverflow.com/questions/46018259/…

[CruelEngine]

Try the solution i've suggested and let me know if it works

[SiddAjmera]

Can you replicate this on a Sample StackBlitz?

[Nitin]

its not working. catchError(err => { this.showError('Outlets', err); return Observable.throw(); })

[Nitin]

@SiddAjmera let me try

[CruelEngine]

@Nitin , are you facing the same error ?

[Nitin]

some syntax error it has. let me know if below code is correct first. catchError((err:any) => { this.showError('Outlets',err); Observable.throw(); //tried adding return statment as well but still error }

[CruelEngine]

@Nitin can you remove this.showError() and try return Observable.throw(err)? let me know if error persists

[Nitin]

since I'm not handling this error and simply using this observable.throw(err); console displays the error passed from map operator R ZoneAwareError {__zone_symbol__error: Error: Not able to load Outlets. Contact IRI support. at MapSubscriber.eval [as project] (webpac…, …}

[TRiNE]

same here. it was a mistake to had throw instead of return