ValueChanges stops working as soon as an error occurs in an Rx.Observable

Question

I am following some Rx.Observable tutorials from an Angular 2 application and using an AutoComplete style of system.

As I type into a field, the valueChanges event fires from the Angular 2 FormControl.

This is chained through to Observable that is making a HTTP request against a JSON endpoint.

The moment the endpoint returns a 404 Status, the valueChanges event stops working.

I can see the error in my subscribe method, but not really sure what the best technique is to recover and keep going.

I am also a little confused why the KeyUp or ValueChange event would stop firing.

Sample Value Change - Observable Chain

this.userNameControl
    .valueChanges
    .do(r => {
            // As soon as a 404 status is thrown from getGitHuybUser$, all value change (keyup) events stop working
            console.log
        }
    )
    .switchMap(userName => {
        return this.getGitHubUser$(userName);
    })
    .catch(err => {
        return Observable.of(err)
    })
    .subscribe(v => {
            console.log(v);
        },
        (err) => {
            // As soon ass there is a 404 status, I end up here
            console.log(err);
        },
        () => {
            console.log('Complete');
        });

getGitHubUser$(username) {
    return this.http
        .get(`https://api.github.com/users/${username}`)
}

HTML Form Control

<input type="text" [value]="userName" [formControl]="userNameControl" />

I tried returning Observable.empty() and Observable.never() in the catch

.catch(err => {
    // Observable.of(err)
    // return Observable.empty();
    return Observable.never();
})

And the result was that the subscribe method called my complete method and still and so the valueChanges still do not fire.

Answer 1

Figured out my issue, the .catch() that I had hanging of the .switchMap() really needed to be hanging of the this.getGitHubUser$(userName)

this.userNameControl
    .valueChanges
    .do(r => {
            // As soon as a 404 status is thrown from getGitHuybUser$, all value change (keyup) events stop working
            console.log(r);
        }
    )
    .switchMap(userName => {
        console.log('GET GIT HUB USER');

        return this.getGitHubUser$(userName)
            .catch(err => {
                console.log('CATCH INNER');
                console.log(err);
                return Observable.of(err)
            })
    })
    // .catch(err => {
    //     // THIS CODE IS NOT NEEDED
    //     console.log('CATCH');
    //     console.log(err);
    //     return Observable.never(); // Observable.of(err)
    // })
    .subscribe(v => {
            console.log('SUCCESS');
            console.log(v);
        },
        (err) => {
            console.log('ERROR');
            console.log(err);
        },
        () => {
            console.log('COMPLETE');
        });