This article will examine:
The code for this article is available on github.
This article will be dealing with infinite observables – those that you expect to keep getting values from. That’s because if you do error handling wrong, they cease to be infinite observables and finish – which will be very bad since your application is expecting it to be infinite.
These will be studied:
The first case study will focus on handling DOM events and doing searches based off of them. There will be two input boxes that you type in a Star Wars character’s name. When you stop typing for 300 milliseconds and the text is different than the last one, it will search for those names using the Star Wars API and display the results. The first input box will continue to work after an error. The second input box will stop working after an error.
The relevant HTML:
The component code:
The error handling code for this case study is in the rxjsService:
Bad Error Handling
The “searchBadCatch” method has our bad error handling code. Just looking at it, it looks fine, right? It is debouncing for 300 ms, has the distinctUntilChanged to make sure we don’t search for the same thing twice in a row. There is a switchMap that calls the “searchStarWarsNames” method and we are catching errors using the catchError method. What’s wrong with it?
If you catch the error using “catchError” at the first level of the Observables “pipe” method (in this case return terms.pipe()), it will allow you to handle the error and return one more result in the stream but will then end the observable stream. And that means it won’t listen to “keyup” events anymore. Therefore, at all cost, never allow an error to percolate to this level.
Good Error Handling
The “search” method has our RxJS best practice error handling code:
Always put the “catchError” operator inside a switchMap (or similar) so that it only ends the API call stream and then returns the stream to the switchMap, which continues the Observable. If you are not calling an API, make sure to add a try/catch block so that you can handle the error in the catch block and not allow it to percolate to the first level “pipe”. Don’t assume your code will “never fail”, use a try/catch block.
First, I’ll type “error” in both input boxes as shown:
I’ll leave it as an exercise for you to see the console output. Now for the real test, can I type in something and get results after handling the error?
The first one works but the second one doesn’t anymore:
The second input box is what I was talking about with a “unexpected problem” in the introduction. You would have a tough time figuring out why your search quit working.
Nothing fancy here:
- “Success” – calls the Star Wars API with “person/1” (Luke Skywalker) and outputs the name on the screen
- “Error – Stops Listening” – calls the API with a wrong URL so it generates an error – the catch is done wrong so it stops listening for the effect
- “Error – Don’t catch error” – calls the API with a wrong URL so it generates an error – not catching the error
- “Error – Keeps Listening” – calls the API with a wrong URL so it generates an error – properly catching the error so you can click it multiple times
I’ll skip the HTML for this since it’s just buttons calling component methods. Here is the component code:
This is our success case:
In this case, the “catchError” at the first level of the this.actions$.pipe will get called, thus ending the effect because its Observable stream will end. This is just like in the case study above using just RxJS Observables. We should see “Error – You’re doomed!” on the page after clicking it. If we try clicking that button again, it will not fire the effect.
The output for this:
Wrong URL Handled Properly
The right way to handle the RxJS error is by putting the “catchError” inside the http.get “pipe”. It will end the http.get observable but that doesn’t matter because it is a finite observable anyways and only emits one value. When it returns the SetName action, the switchMap will emit it and continue the Observable stream. Note that the finalize here will never be called.
The output for this:
When You Don’t Catch Error
Custom Application Development For Line-of-Business Needs
Understanding your industry is one thing. Understanding the technology you are currently using and being able to look to the future and suggest the best pathway forward is another. Add the unique benefit of being tied to a training division that keeps everyone on your team up-to-date, and you get a blend of exceptional knowledge that plugs in, does what you need, and leaves your business stronger.
When you read studies that tell you that 75% of projects are doomed from the beginning, it has to make you wonder if you have the right team in place. Consider letting our proven professionals take a look at your project. They’ve seen what can go wrong and know how to avoid the costly errors. At Intertech we ask the right questions and we tell you the right answers. From design to rollout, Intertech takes the worry out of custom software development.
We Bring You…
Balanced-Cost Account Management
Intertech specializes in top-tier developers, but not everyone on a project needs to be a lead consultant. That’s where Intertech’s Momentum-Based Budgeting comes in. Providing a balanced approach, Intertech always offers you a completely integrated solution that meets the requirements and leaves your team stronger.
Soft-Skills For A Winning Experience
Sometimes the most critical person in the room is the one with a calm voice and the right words. Bringing a development team together or presenting a difficult concept for stakeholders to understand can make all the difference in success or failure. Intertech consultants are at the top of their field. They navigate challenging decisions, guide with a confident voice, and know when to get out of the way.