Error Handling with Observables

When we issue an http request to get or update data, there is always the chance that something will go wrong! The item the user requested isn't found, the updated data doesn't pass the server-side validation, our boss hasn't paid the electric bill and our server is down ...

We look at several scenarios: Catch and Rethrow, Catch and Continue, Retry on Error, and Action Streams

*Links*

*Content*
00:00 Why error handling?
00:24 Options for handling http errors
00:59 Catch and Rethrow (service)
01:54 Observable of never
03:30 Catch and Rethrow (component)
03:44 EMPTY
03:57 Result of Catch and Rethrow
04:04 Catch and Continue (service)
06:06 Getting a message to the template
06:35 Result of Catch and Continue
06:44 Retry on Error
07:27 RetryWhen
08:24 Action streams
09:54 Wrapping up

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
😊About Me
Hey! I'm Deborah Kurata
I'm a software developer and YouTube content creator. I speak at conferences such as VS Live and ng-conf. I write articles for freeCodeCamp. And I'm a Pluralsight author with courses in the top 10 most popular (out of 10,000+) over the past 5 years. For my work in support of software developers, I've been recognized with the Microsoft Most Valuable Professional (MVP) award, and I'm a Google Developer Expert (GDE).

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
#angular #angulartutorial #bestpractices #demo #errorhandling #exceptionhandling #rxjsangular #angularrxjs #catcherror

[metric]

I didn’t know about the retry when operator. That looks really nice so you can fine-tune how you want it to retry the request. Thanks for the tutorial.

[EvertonCanez]

I love your content, Miss Debora! Thank you so much!

[davidcooper]

I'm new and am building a few little apps to learn. Every video I've watched of yours in the last few days has covered a specific issue I'd noticed but couldn't find a satisfying answer for. The observable<never> thing is the latest such example. Thanks a bunch for these videos.

[mtvspec]

Thank you, Deborah! I have a case there user submits a form via http post request and if this request fails stream completes and user can't submit form again. In implementation I used your approach with Subject + asObservable + switchMap. I tried catch + re throw + Observable<never>, this approach help me in a situation, which forces me to transform stream in catch error part with returning another type in error case, and in outer stream in tap I used type guards to handle two different types (for success and error result). Can you help me with scenario in which user can continue to change form data and submit it again even if http error occurs? Can we somehow combine approach with observable `never` and does not re throw error?

[looovequran]

Thanks a lot ! Very useful and well explained !

[Dimitri]

Isn't the retryWhen operator deprecated? You could also do: retry({count: 3, delay: 1000})

[avrimalka]

Hey, thanks alot for the video, it is great!!

I have a question:
You mentioned that type of Observable<never> represents an observable that neither send 'next' nor 'complete' notifications, however, according to rx js, EMPTY is also type of Observable <never> which is an observable that completes only.
Perhaps type of Observable<type> represents an observable that might emit 'complete ' or 'error' notification only?
What do you think?

[bongguiao]

Hi Deborah, another very useful video, how about convert it to signal?

[imjmakki]

hope you're gonna making video about api and how it been consumed from backend specially with @Input and standalone it's a little bit confusing

[dg-cggi]

Hey Deborah, I've been testing out the catch and continue and it's really slick, but can you give the code for your HTML how you are passing it along to the HTML? I have it written very identical with the wrapper class in my service call and when logged to the console it grabs the error! Amazing! But how do I transfer that to my component and then to my HTML? All that's done in my service class, but in my component I actually have another variable like grabdata$ = map(res => res.data.objectArray)

So my service it's catching the error with that wrapper, but In my component I'm actually map data down to get specific data, so how do I pass that error to my component or my HTML? I didn't see that in the video! Thank you for everything!!

[TheZukkino]

what about using an interface Response<T> as follow?
interface Response<T>{ data: T, message?: string }
or something similar?

Great video, really interesting, important and clear for newbie like me approaching Angular

[nathanalberg]

You should rarely have to declare a return type at all with Typescript. TS can infer the type by what you return in the function. In fact.. you should avoid it.. you can muck up your code. throwErrors return type is already Observable<never>

[dg-cggi]

Hey Deborah, I enjoyed the video, but I believe there is an error here. Atleast, that's what is happening in my code. Returning the EMPTY doesn't actually work because the type, in your case users$, subscribes to that and you aren't ever able to re-do another request. Same thing happened in my code, I have a data stream with an action stream, and with the same error-handling you have, I can do a negative request and then try to do a positive request (without refreshing the page) and it will not do anything because my variable is stuck with the EMPTY constant.

[osph]

Nice video. But this is RXJS making simple things complicated. I suggest using Axios and signals. Then call it a day.