Http Error handling in angular 13 | Exception handling globally using interceptor

hey guys welcome to negrata case this is our angular 13 tutorial part of this video i am going to explain error handling in angular application and also i am going to cover the below topics like displaying the custom error messages and handling the error in global way using this interceptor concept for explaining this concept let me go to my code so this is my created application the application already in the running state so when i am clicking this get employee it will fetch the record from our http services and it's populating in our table so this is the normal scenario so let me show the service code here so this is the method is basically returning the values for the employee so now let me explain the possible error scenarios the services down or else passing any rank input and also if you are providing the wrong input url in that scenarios basically we will get an error so let me try to change the url i am going to give some ranking world now we can see so possibly we will get on some error so when i'm clicking this get employee actually i'm not getting any data so when i'm going to the console i can see the error messages she failed to load the resource or the server responded within status of 404 error so as a developer i know i supposed to check in the console but the end user basically he is not the technical person then they don't know the error what actually happened so be how to provide the proper error message to the users then only they have to understand so that's why we are going to handle the error here for handling the error the angular providing some kind of mechanisms called http error messages something like that okay this is our angular official website if you go here i will share this url also in the description uh in the right side if you see the getting error details so they have provided one default function so let me copy and use in my code so i'm going to add in the services okay i included the handle error so this http error response is showing error for that we need to import it okay the error is resolved because it's included in the import section so manually also you can include so let me explain the first one is error dot status double equal to zero that means it's a client-side error if you have any status code value then it is the server-side error so in the error.error we will get the complete error information that's all about it and if you want give some custom messages we can include in that area like i am provided that something bad happen please try again later so one parties we have completed now we have to include this handle error in our services okay for that we have to use the pipe option so inside the pipe we have to use the catcher so here we can use this hand layer that's it okay now we have completed in the service side let me move on the component side so if i'm going to the ts file i have the function is called get all employee so here i'm calling this loadall doing the callback and in the callback we are getting the information so in case if you are getting error we have to give one more call back and let me q error okay done so first we can do everything in the console so console.log error so when i'm clicking this get employee actually i'm getting like error something bad happen try again later okay and if i want the complete error messages then i have to do some changes uh let me go to the service side because here only we are returning the values so let me declare on the error message so the initial value should be empty so instead of this console.error i can get all the values in the error message okay great and and i am going to include this error message also let me give some space so now i am going to return or is passing this error message here so we can check now so you know the error back and returned 4.4 the body was something bad happened so please try again later so as of now we are getting all the responses in the console actually we need to display in the browser so let me do some changes in my html site here i am going to use one more view for showing the error messages also i am going to give one more element so h5 and the class would be text today danger for showing the red color so error message now let me come to my ts file it's okay look like already and declared so after that i have to assign the values so instead of the console log i am going to ascend this error in the error messages so let me commend this console.lag okay done now let me go to the screen so if i'm clicking the error back and return to code format for and we are getting the complete error message but still it's showing this header of the table this one also it's not required so we can include some conditions if you have any values in the error message then only this block is required otherwise it's not required the similar way if you have any error this area is not required so okay initially it's showing so when i'm clicking get employee we are getting only the error messages now i am trying to change the correct url see now the datas are coming so error handling in angular we have done in the component level so the final one is error handling the global way using this interceptor concept that is a very important thing because the small application is fine to handle error in the component level but in the big application may have more than 100 components so we cannot write the same logic in for all the components so instead of that we have to move everything in the globally so that we can use the interceptor concept so in this code i am already included the interceptor if you are new about the interceptor i will include the interceptor concept video also in the description you can watch it also you can create using this angular cla commands nc generate and the interceptor then you have to give the interceptor name so it will create the interceptor then you have to include the logics so basically the interceptor we are using to pass the authentication token see here also i am passing the same thing so this is enough up to the handle for handling the error we have to use the same pipe concept the same way only we have did in our services also the similar way we are doing here also pipe and inside the pipe we are using the catch error so inside the error we have the object is called error data okay so as per my previous logic i am verifying whether the status quo is 4.1 i am trying to log out so that's what i have implemented like this so let me see what are the values are coming from this error data so let me include everything in the console.log see now so basically it's returning the http error response only it has the headers and status status text and the final one is url with an error messages we can see the error messages okay we have the complete information so whatever information we want to show to the users that we can implement and for showing the error messages here i'm going to use the electrify concept so electrify is the third party plugin or basically it is providing the kind of notification alert something like that so that also i'm created one more video i how to include that video link also in the description you can watch it first i'm going to include the altify here so i already included in my some of the services so let me copy this one okay it's done so now let me copy this one and here let me command this console.log we are showing the error so let me use the same error if you if i'm using this error it will show in the red color the notification if i'm using the success it will show in the green color that's the difference only so we can show the message okay this is fine see now it's showing the http failure response for the employee and also it's showing the error response code and if you want to give some additional messages also that you can include something been strong you know something been wrong if record the space also we can include and let me change the url also then only we'll get some better idea i am going to change the force number also then we are getting some undefined response okay let me try okay see now the failure response and it's unknown error because even the port number also it's not working fine so that's what we are getting this kind of messages so if you implement like this from the interceptor it will work for all the components so what are the components basically depending on this interceptor it will work if you are new to the interceptor as i mentioned you have to watch the video and also the very important thing is once you have completed the logic in the insert interceptor you have to include in the app model so in the app model we have the provider section and there you have to use this three important things one is the provide and the use class we have to provide the class of the interceptor and the multi is true because we are using the multiple components so the class is nothing but it's generated automatically so far if you are using the selectify you we have the npm packages you have to install it and we have to do some configuration related things so that's what i have created the separate video for this one that also i am included in the description you can watch it still if you have any doubts or clarification about this exception handling and showing the customer messages you have to specify in the comment box and also please don't forget to subscribe my channel thank you thanks for watching

Channel: Nihira Techiees

Views: 17,437

Keywords: Http Error handling in angular 13, Exception handling globally using interceptor, Displaying customer error message in angular, how to capture client side error in angular, how to get server side error in angular, how to get error code in angular, http services error handling in angular, exception handling in angular, Interceptor in angular, how to implement custom error messages in angular 13, what is Catcherror in angular, rxjs in angular, alertifyj, pipes-angular, nihiratechiees

Id: aiknsMjF1n0

Length: 16min 33sec (993 seconds)

Published: Thu May 19 2022