29. Implement Error handling in ngrx effects and show error message when API fails - Angular NGRX

hi friends this is leela welcome to my channel in this video what we'll try to do is we will try to implement the error thing so for example up to now we have implemented the http ah when we are making http call when it is success we are doing when this network fails or any error comes so how we need to show this one let's try to show let's try to see in this video now here what we have did so here we are using tested test.com and one two three four five six something like this one two three four five six and we are trying to log in so we are able to login we are able to get the data but now when i give wrong password okay we are getting the 401 request and the loading symbol is showing like that only and here we are getting invalid underscore password like this so this type of scenario how we can implement let's try to see in this video now here what we can do is so for example if we try to see so these type of errors commonly we will be getting whenever we are getting whenever we are doing the http request so let's try to implement that one as also a universal thing so as a whole thing we will try to implement how we can implement so we have a shared share which shows the loading spinner and let's go to the shared state and here i will try to add error message so before that one let's try i will show you here in the container what i can do uh in the here do okay class is equal to alert alert type and danger okay now here i can show error record something like this so whatever the error occurs universally for us we can show it here directly now if you try to see the output here we are able to see error occur like this right so now we will need to get this data whenever the http fails or anything we'll be trying to get the data and we'll show this one or universally whenever the data fails okay now what i need to do now we let's keep it like this only now let's try to create a shared state here i will try to give error sorry error message of type string and now this error message first time i will keep it as empty so this one is completed state we have defined and let's go to the action and in the action what i will try to do is export constant set underscore error message okay so this one will be of type shared state set error message so now i will create an sorry now i will try to create an action for this one export constant set error message or error message is equal to create action of set set underscore error underscore message and the props what i will try to do is so we will try to send the message whatever the error message we got we'll try to send it as a string and i will try to close it okay so this is the action we have defined and let's go to the reducer and here in the reducer what we'll try to do is so what is this one error it is showing no overload what if you see here we are getting any address or we are getting so many errors i think error message of trip string okay fine it's it yeah so let's go to here and here i will be implementing getting the state oh written what has happened here dot dot right okay now here now i will try to implement on okay on set error message okay for this one let's get the state here and same scenario let try to implement is dot state and the error message will try to set that error message of type we'll be getting the action here so comma action and here i can show it action dot message okay now wherever we're getting that error message we'll try to show it now let's go to the auth effects okay so auth effects now here we have written the success when we get the success we have written now when we get a failure what we need to do so this is the pipe right so here we can catch the errors using operator that is nothing but the catch error okay so this catch error will come from the rxjs operator so here catch error so whenever we are getting an error so this this filter will be called this operator will be called now here you will be getting the error response okay now let's try to console.log the error response okay so we'll try to cancel that response and here we need to return off so we need to return an observable so this expects an observable catcher will not written any observable so we will return an observable dummy observable okay so now we have written a dummy observable so here we will try to print the error response so now if i go here so we are still showing the run okay we will leave it like that and here in the console we will try to use some data and here i am trying to print some data and if i click on login here we got the responsive so here we are able to get the response this one is coming from the auth effects now what i need to do error response in this one what i need to do i need to get the data so error response dot error dot error dot message so here you will be getting error response dot error dot error dot message okay now let's try to give a short again now if i try to print i click here now i got email not phone the data we got it now using this using this all things so you'll be getting like this like this scenarios okay these are the common error codes you'll be getting let's try to convert it into user friendly error code what i will try to do so let's go to the auth service okay we have already auth service for this one and here what i can do format user like this i can create get error message okay i will try to use message of type string and here what i will do is switch i will use the switch case switch off message okay here case first case will be the email not phone we will take only two scenarios email not phone and when email not phone i will return email not phone okay so i can use this one directly and another one what i can do is another one is the invalid password this one also the common scenario how we can we can get so invalid password so here i can return invalid password okay so we have used this invalid password also so now we will try to use the default also if nothing is written so what i can do is written unknown unknown sorry unknown error sorry error occurred please try again okay so these are the error messages what i will try to do i will try to take this one i will go to the authfx.ts and here this so constant error message error message is equal to this dot auth service dot get error message and we will send this error message to that one so that you will be getting a user friendly error message you will get it so here i can add this error message and i can remove this one and i can remove this one okay now what i need to do i got the error message now what i need to do i need to call the action what is that action set error message action so here in this off i can call directly set error message off i will send this message of type message of type error message okay so we have sent successfully now open this catch error we got this one now what i can do now we need to catch the data so let's go to the selector and here let's add f constant get error message okay create selector off what i can do create selector of get error mess sorry get share stated get shared state comma state so which will be having written state dot error message right so we have the get error message one also i can go to the app component.ts so here is the app component.ts and here i can add error message of type observable of type string i can add observable of type string now what i can do here error message i can take this one and i can do this dot error message is equal to this dot store dot select top sorry get error message i can use it directly get a message now we got the data here now what i will try to do error message we got this error message also let us go to the html and here i can write the condition star ng if is equal to error message of type async i can keep and we can keep or something like as error also and we can use the error variable what we have used here we can use this one okay we can use it like this also and now if i try to see here login so now it is working without any perfect tested test.com i am giving the wrong password here now click here now we are getting the invalid password but this loading symbol is there still like this so what we need to do we need to go to the auth effects and here while getting the response so we need to we're getting the response we need to stop this one loading spin up just that's it now if i go to click login again and i can close this one test retest.com and here i will try to give like this and here invalid password perfect now i will try to give some gibberish email id and if i click here email not phone so now if i try to give tested test dot com and one two three four five six if i do log in so now this one is successfully logged in we need to cancel this error how we can cancel this error one way is we can directly use this dispatch thing set error message of message of empty we can call this one as empty okay this is one method so when we are getting success response so we can cancel this one so for example now i am writing some false email id and i am writing like this email not found so now what i will try to do tested test.com one two three four five six and we can click on login here see now the message has been done but this one is successful but now what we what we need to do is so now here this one is successful what we need to we need to redirect it to the home page here success upon successfully logged in we should not stay in the login page it should be successfully redirected to the home page so then how we can do that one so redirecting to the home page how we can do so in the state management how we can do why because in the state management here we are using the effects so here we are getting the success upon here getting the login success i need to i need to send it okay so this dot root chart like that i need to send it so how can i send so here automatically i am writing this one so here this one will not execute the bottom this one will not execute right or otherwise if i want to root it means this here if i wrote it this return will not execute how we can do this one so let's try to let's try to see this one in the next video so here this all the code is available as usual is available in my github repository so each video has been divided into a separate branch and i am pasting the and i am committing the code in the particular video branch okay if you want you can take you can go to that particular branch and you can see that code or otherwise if you want to get the update code means you can go to the master and you can see the update latest code okay we have any doubts or any suggestions please post the comments below to this video and if you like this video please do support me by subscribing to my channel thank you

Channel: Leela Web Dev

Views: 11,759

Keywords: angular, angular ngrx, angular tutorial, angular input output, angular emit event between components, angular emitter, angular eventemitter, angular eventemitter tutorial, ngrx store, angular state management, ngrx store angular, ngrx selectors, ngrx tutorial, selector props, learn ngrx angular, ngrx forfeature, ngrx store tutorial, ngrx effects, angular ngrx effects

Id: yaMHyj7pdmk

Length: 12min 46sec (766 seconds)

Published: Mon Dec 28 2020