NGRX/Effects | HTTP API - Error Handling in NGRX | Angular 16- NGRX Tutorial

Hello friends welcome to my channel here at techies and this is our Anglo 16 ngrx tutorial in this video let's talk about how to handle the error in ngrx EFX and also how to display the custom error message in our angular application so let me go to my application we can start our changes from the stair so in this state currently we have only this list so let me go to this model so in this model I am going to declare one more property so that is error message okay so the data type is string and in our state So currently we have this list and one sample data so let me remove this one and here let me include this error message also okay so the default value is mtunely next let me create one action similar to our load blocks access we can create load block failure okay first time declaring this variable load block fail that is enough and here also I just changed next we have to create the action so instead of this load blocks access let me provide the name is load block fail and we can change this variable also and in this props we will get the error message okay so let me provide error text and the data type is string so let me save this one so next let me get back to our effect site so in this CFI side already we have declared this catchy error so instead of the CMT I'm going to use this is the observable operator so let me select this one and here I am going to dispatch our action okay so our action is load block file and here we have to pass the props the CR text basically we will get our error from here so I am just passing this here or message okay so basically in this object we will get the complete information or what is the type of error and error code error message all the details we will get I am just passing this message only okay so if you want to know how to get all the details I will explain at the end okay so now let me save this one next let me move on the reducer side so in this reducer side we have this load block success so let me copy this one just to duplicate it so instead of this load blocks axis I am going to call this load Black Fail okay in this blog list let me make this into empty mtra send this crr message we can set this action dot error text so similarly in this access scenario so in this error message let me change this into empty so these are some basic changes so let me save this one next in our selectors we have to selectors one is get block and another one is the gate blocked by ID here I am going to create one more selector get blog info here I am going to return the complete state so let me save this one so now we are in the final stage let me move on the component so in our blog component I am going to declare one variable blog info and the data type is blocks and in this selector I am going to selector gets blog info now I am setting value into our blog info only so we can remove this console next in our HTML site we have generated the for Loop for this blog list so instead of that I'm going to change like this blog info Dot bloglist okay so let me save this one see the response now okay also we made some changes in our selectors till our blog screen is working fine so our main intention is handling the error and also displaying in our screen so in this HTML side let me create one sample design for showing the error message I am going to use one MAT card and here let me use this MAT card header since this has shown tag I'm just providing error required that's it and in this condensed side we have to display our exact error message so let me provide on P tag we can get our error message from this blog info dot error message so let me save this one and also I'm just providing one condition here and see if if there is a data only I am showing this content so similarly for this blog section I am just added on due tag applying the reverse condition so not equal to error message at the end I'm providing like this see now uh I just refresh the screen it is loaded all the records okay so next what I'm going to do in our service side I am going to provide the wrong URL so let me save this one see once the page is refreshed we are getting the error message so error required HTTP failure response because of this URL format for not found and this is the error message we are getting from our effects finally displaying in our component okay so again I'm just refreshing still we are getting the same error next let me change the correct URL see now the data is loaded so in this real time application we will get different types of error as of now we are using this Json server as GPA so we manually created the error like that only okay and next we have one more scenario so in case if we don't have any record we have to display the message like there is no records okay for that also let me create one more section in the HTML side so in this success scenario let me include one more mad card I am just providing on headphone tag no blood found and here the condition is length so let me save this one see now initially it's loaded all the records so in our data sources this db.json so here let me remove all the records now if I'm refreshing the screen see I am getting this no block founder at the same time if I changing the AP World also see now we are getting this here or message because this is the scenario is different when we are trying to access this URL obviously we are getting this error so we are showing the error message so the next scenario is URL is file but there is no data so we are displaying this no blog found message we can provide the data okay so this is the way handling error is in our ngrx cfx so and also we have displayed the error in our application so similarly if you want create the log files also it's all about the requirement so now we are in the end of the video so in the initial time I said we can capture the complete error information including the CR code and lot of details so let me just to show you for doing this one and let me change this into any this data type next in our effect side so instead of this error.message I am going to pass the complete error okay so next in our reducer side let me put in the console and dip in our application let me change this into message okay you know okay it's not the error scenario and we have to change our service okay so now we got the error similarly if you are checking in this console see HTTP error response see we are getting the complete information HTTP error headers first one is the message so this same message only we are displaying in our application and this work is false and status is 404 the status text is not found and what is the URL so now we are in the end of the video still if you have any doubts or clarification please post in the comment box and also please don't forget to subscribe my channel so in my next video I will explain how to handle the first request so please stay tuned for my next video thank you thanks for watching

Channel: Nihira Techiees

Views: 2,198

Keywords: what is ngrx in angular, why ngrx, ngrx/effects, introduction of ngrx effects, what is ngrx effects, use of ngrx effects, key points in ngrx effects, handle external api in ngrx effects, why ngrx effects needed, implementation of ngrx effects, create effects in angular ngrx, install ngrx effects, how to handle API in angular ngrx, handling api get request in ngrx, how to register EffectsModule, createEffect, ngrx effects example, error handling in ngrx effects

Id: ViNuCoBlm0Q

Length: 11min 26sec (686 seconds)

Published: Tue Jul 18 2023