Build Reactive Websites with RxJS: Master Observables and Wrangle/

...

/

Adding Error Handling in Typeahead

Adding Error Handling in Typeahead

Let's add error handling in our application using catchError, updatePageOrErr, and prevent an errored state in the typeahead application using the merge operator.

We'll cover the following...

Right now, a single function (updatePage) is handling all the results. There’s also no error handling.

Error handler

Quick, add an error handler using the techniques you learned in Managing Async:

Press + to interact
fromEvent(searchBar, 'keyup')
.pipe(
  pluck('target', 'value'),
  filter(query => query.length > 3),
  distinctUntilChanged(),
  debounceTime(333),
  switchMap(query => ajax(endpoint + searchVal))
)
.subscribe(
  results => updatePage(results),
  err => handleErr(err)
);

This error handler handles the error gracefully and unsubscribes from the stream. When your observable enters the errored state, it no longer detects keystrokes, and the typeahead stops working.

We need some way to handle errors without entering the error state. The catchError operator does just that.

Using catchError

The catchError operator is simple on the surface. It triggers whenever an error is thrown, but it provides plenty of options for how ...