fix(typeahead): Typeahead, Observable error callback. When API call fails, application stops working

[astroanu]

How do i write an error callback when the typehead is bound to an http observable. Currently it just prints an error on to the console and the component stops working. My typehead is fetching options by calling a remote url, if the remote server fails i want to show a message to the user.

[astroanu]

I'm putting the code that is responsible for this here

TypeaheadDirective.prototype.asyncActions = function () {
        var _this = this;
        this.keyUpEventEmitter
            .debounceTime(this.typeaheadWaitMs)
            .mergeMap(function () { return _this.typeahead; })
            .subscribe(function (matches) {
            _this.finalizeAsyncCall(matches);
        }, function (err) {
            console.error(err); <- instead this, call my error handler, or a common ngx bootstrap error handler 
        });
    };

[dilumdarshana]

Am also having the same issue, when API call fails, application breaks. Doesn't work till refresh the application.

[vlaco]

I have a simmilar issue. My API call fails and application breaks when I have set typeaheadMinLength="3" and typeaheadWaitMs="300" and the user starts deleting the input faster than the debounce time, the Observable sends input with length<3 and my API fails. I dont need to show the error to the user, I just need a way to somehow prevent the application from breaking or prevent sending the input with length<3 at all.

[krooshua]

Hi!
Any progress on this issue?

[vlaco]

@krooshua I tried your solution and it didn't work for me :/ API still returns an error and the application breaks and won't send any more requests. I solved this by simply adding catch to Observable like this:

this.dataSource = Observable.create((observer: any) => {
      // Runs on every search
      observer.next(this.asyncSelected);
    }).mergeMap((token: string) => this.getStatesAsObservable(token))
.catch((error: any) => {
      // console.log(error);
      return [];
    });

This works for me but there must be a better solution.