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.

[IlyaSurmay]

Typeahead doesn't do any http requests itself, it only takes an Observable as input. So all http errors should be handled outside if this component.

[vlaco]

Http error is not the point of this issue. The point is that it shouldn't do anything if input length is less than 3 if typeaheadMinLength="3", it shouldn't accept it as an input and it does. Works perfectly fine if you type slowly enough for the debounce to catch it but if you type any faster it fails. I think there should be some additional input length check.

[astroanu]

@IlyaSurmay you haven't let the developers exactly handle those errors outside your component. Check the code it's right in front of you.

[IlyaSurmay]

@astroanu my bad :( We'll come up with plunkr that shows how to handle errors or PR that fixes the issue

[IraErshova]

@astroanu Hi! Do you still have this issue? Typeahead component has had a lot of changes since 2017. I added PR with a new demo for async typeahead. It's not merged yet but you can check how I handle http error.

https://github.com/valor-software/ngx-bootstrap/pull/5637/files#diff-f68a35042d5e6635f58cce1aea50df39

I'm going to close the issue because it's not the issue anymore.
@vlaco your issue is not related to the initial topic of the issue. Could you please open a new issue?