Angular 2 Subject.next not working once the Observable its listens throws an error

Question

I'm struck at a scenario, where I have Angular service class (WeatherService) which performs a REST call to an external api and fetches data in searchWeather() function.

I have a component WeatherSearchComponent, which has input field search in its template which has keyup event bound to a function onSearch() in the component. Its basically a TypeAhead input field. I have a Subject defined in the class and in onSearch() function I'm initializing the next() function of the subject as below.

WeatherSearchComponent:

private searchStream = new Subject<string>();
onSearch(cityName:string) {
        this.searchStream
            .next(cityName);
    }

constructor(private _weatherService:WeatherService) {
    }

ngOnInit() {
        this.searchStream
            .debounceTime(300)
            .distinctUntilChanged()
            .switchMap((input:string) => this._weatherService.searchWeatherData(input))
            .subscribe(
              data => this.data = data
            );
    }

WeatherService:

searchWeatherData(cityName: string): Observable<any> {
        return this._http.get('URL')
            .map(response => response.json())
            .catch(error => {
                console.error(error);
                return Observable.throw(error.json())
            });
    }

The issue I'm facing is, if the REST call fails or returns an error, Im logging it, but the Subject searchStream life cycle is ending once it gets an error and its not accepting inputs after that. I tried handling the error in the ngOnInit() method but its not working.

I would like to know how to handle this scenario?

score 3 · Accepted Answer · edited Sep 23 '17 at 16:57

3

It's not an issue with the Subject. This is general Rx behavior. When you send an error notification the chain is disposed.

You're already using .catch() so you can just modify its callback not to rethrow the error but suppress it or whatever you want:

.catch(error => {
    console.error(error);
    return Observable.empty()
});

By the way, Subjects do have an internal state you should be aware of, but in your use-case the error doesn't reach the Subject.

edited Sep 23 '17 at 16:57

Graham

7,431
18
59
84

answered Jun 20 '17 at 05:43

martin

93,354
25
191
226

Yes, the above implementation worked. I would like to know if the implementation is correct and appropriate to use on a production environment ? Or should I something different ? – Ganesh chaitanya Jun 20 '17 at 16:25

Angular 2 Subject.next not working once the Observable its listens throws an error

1 Answers1