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

2
votes

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)

2
angularobservablethrow
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() - CruelEngine
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/… - Nitin
Try the solution i've suggested and let me know if it works - CruelEngine
Can you replicate this on a Sample StackBlitz? - SiddAjmera
its not working. catchError(err => { this.showError('Outlets', err); return Observable.throw(); }) - Nitin

2 Answers

1
votes

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.

0
votes

Instead of show error did you simply tried following:

 this.httpService.getData(id).subscribe(
          response => {
            // success
          },
          err => {
            console.log("Error", err)
          })