#146 Handling HTTP Error Response | Angular HTTP Client | A Complete Angular Course

[Music] so far in this section whenever we made an HTTP request to the server it always succeeded it always returned us a success response but of course when interacting with server there's a lot of things which can go wrong for example you might not have an internet connection to send the request or you are sending a request to the server with some invalid data which can result into an error or maybe your server fails for some reason maybe it's offline or there is some problem on the server itself or you're not authenticated to send or receive data from the server so there are dozens of things that can go wrong when making an HTTP request to the server so if I go to our angular application in here whenever we click on this fetch task button it is going to make a get request to the server and it is is going to fetch all the tasks from this task collection of this database and it is going to display it in the UI now this is possible because when we created this database at that time we selected the test mode so when we selected test mode we enabled test mode for this database which simply means that we are providing read and write access to everyone that means anyone can read data from this database and anyone can create update a delete record in this database for performing these operations the user need not to be authenticated now how does this database This Server knows that it does not need to authenticate any user in order to read create update or delete records in this database well if you go to this rules tab there you will notice that we are defining some rules here basically we are setting this read and write property so here this number which you you see it is basically a time stamp which corresponds to this date 14th of December 2023 and current date it is 22nd of November 2023 so here current date is less than this date this timestamp so this expression here is always going to return true in the same way this expression also it is going to always return true so here instead of writing this condition we can also set it as true because we know that this expression is always going to return true so instead of using this expression we can also set it as true we can do the same thing for right also okay so since we are setting this read and write to True any user can read data from this database and any user can write data into this database but if I go ahead and let's say if I set this read property to false in that case case no user can read data from this database the user can write data to this database because write is set to true but no user can read data from this database even if the user is authenticated since we have set this read property to false that authenticated user also cannot read data from this database so if we go ahead and if we publish these changes by clicking on this publish button so the changes have been published now and these are the new rules so we have disabled read operation on the database but write operation is enabled so if we go to our angular application and from there now if I try to fetch all the tasks if we try to make a get request to the server you will see that we are only seeing this loading indicator we are not seeing any data and if I open developer console here in the developer console you will notice that an error has been logged and if I expand this error first of all this error is of type HTTP error response and here you can see the error code so the error code says permission denied that means the user does not have permission to read data from the database here you can also see the status code of the response which is 401 unauthorized and you can see other details related to that error you can see the error message here so here we have the message property which is storing the error message okay now the end user will not come to know about this error because the end user is not going to check the developer console he is only going to see the UI so in the UI we are only showing this loading indicator we are not showing any error message to the user so what we need to do here is we need to handle this error and we need to show a meaningful error message to the user so let's see how we can handle handle an HTTP response error in our angular application and there are several ways in which we can handle an error so let's see one of the ways so let's go to vs code and there we are making get request from within this fetch all task method so from within this fetchall task method we are calling this get all task method of this task service which is going to return us an observable so if I open this task service here and if we go to get all tasks here you see we are returning an observable the observable which this map operator is going to return us and then we are subscribing to that observable here so if the observable returned by this method if it is going to return us some data we are handling that data using this next call back function but if the observable returned by this get all task method if it returns us an error we can handle that error by passing a second callback function to this subscribe method so in the observables lecture we have learned that to this subscribe method we can pass three callback functions the next callback function which we use to handle the data returned by the observable then we can also pass a second callback function to this subscribe method which is the error call back function and we use the error call back function to handle any error returned by the observable then the third callback function is the complete callback function which we can pass to the Subscribe method and the complete callback function is used to handle the complete signal so when this observable returned by this get all task method it is going to return us some data we are handling that data by passing this first call back function but if that observable is going to return an error if it is going to emit an error we can handle that error by passing a second call back function to it like this okay and this call back function it will receive the error object so here I'm simply calling it as error you can name it anything now when I have passed this second call back function to this subscribe method you will notice that this subscribe method is stried out that means it is deprecated that's because in the newer implementation of this subscribe method we cannot pass call back functions like this instead there what we need to do is we need to pass an object like this in that object we need to specify the call back function name so the first call back function is the next call back function so here the next will be a property and to this property we need to assign a function so let me copy this function from here and let me assign it to this next function this next property then we can specify another property the second property called error okay and to this we need to assign a call back function the error call back function so let me cut this one from here and let's assign it to this error function and now we don't need this comma and now you will see that we don't have any error and this subscribe method is also not stried out okay so the first call back function is the nextest call back function and the second callback function is the error call back function and we use this error call back function of this subscribe method to handle any error returned by the observable all right so as we learned the second call back function is also going to receive the error object which has occurred and for now what we will do is let me go ahead and let me create a property inside this dashboard component class I'm going to call this property error message and this error message property it is either going to store a string value or it will store null and initially let's assign it with this value null so initially this error message will be null but if some error has occurred while making a get request to the server in that case this error call back function will be called and inside that call back function let's set this error message to the error message of this error object so on this error object we have already seen that we will have a property called message so we want to set that error message property with the error message from the error object with this if we save the changes if we go to the web page now you will notice that in the console no error is being logged so in this way we are handling the error and when we are handling the error we might also want to hide this loading indicator so for that here let's also say this dot is loading equals false let's save the changes again let's go to the web page okay so when I click on this fetch task button if it is not able to fetch the data from the the database that loading indicator has been hidden and it says no task has been created yet but we are still not showing any error message to the user we are still not showing that some error has occurred so in the UI we also want to show an error message to the user for that what we are going to do is we are going to show a snack bar here with the error message and for this snack bar I have written some HTML and CSS so for the HTML I'll copy this div and let's go back to vs code and in the dashboard component. HTML inside this div with this class dashboard item container let's go ahead and let's add this div okay and on this div if you see I'm using this CSS class SB and SP errow let's also go ahead and let me copy the CSS okay and let's paste it inside the dashboard component. CSS so after these CSS let's paste it and if we go to the web page the snag bar will look something like this so here we want to show the actual error message and where are we storing the error message we are storing the error message in this error message property so let me copy this property name let's go to our dashboard component. HTML and there instead of showing this hardcoded text there let's use the string interpolation syntax and inside that let's specify the error message property so whatever error will occur we want to show that error message let's save the changes let's go to the web page and let me close this developer console here so here you can see the error message okay now what I also want is I want to hide this snack bar after let's say 3 seconds so for the 3 seconds it should display the snack bar with the error message and after 3 seconds it should disappear it should disappear automatically for that what we will do is let's go back to dashboard component.ts and after we have set the error message okay after that let's use this set timeout function and here let's set the timeout to 300 milliseconds that means 3 seconds so what we want is after 3 seconds we want to set this error message to null so here let's say this. error message equals null now why I am doing this is because now for now let me close this task. service so now what we are going to do is on this div we are going to use NG if directive and to that NG if directive we are going to assign this error message property so this error message property it will store either a value null or it will store a non-empty string value so when the value of this error message will be null null is a falsy value in that case false will be assigned to this NG if and this div will be removed from the Dom but if this error message contains a string value any error message in that case that string value which is a non-empty string value it is truthy value and in that case true will be assigned to this ngf and when true will be assigned to this ngf in that case this div will be rendered in the web page so either this error message will be null in that case this div will not get rendered or this error message will have some string value in that case this div will be rendered so here when there will be some error this error call back function will be called in there we are setting the error message to the message property of this error object so this error message will have some string value in that case this div will be displayed and after 3 seconds we are again setting this error message back to null and when it will be null this div will be removed from the Dom let's see that let's go to the web page okay so you see we are seeing this error message and after 3 seconds it is gone again if I try to fetch tasks you will see this error message and after 3 seconds that error message is gone That Snack Bar has disappeared all right now currently this error message which you see here it will not make any sense to the in user so what we want to do is we want to show some meaningful error message to the user instead of showing this en cryptic error message let's see how we can do that for that let's again go back to vs code let's go to our dashboard component.ts and here after this fetchall task method I'm going to create a new private method and let's call this method set error message okay and to this set error message we are going to pass the error object let's simply call it as ER and it is going to be of type HTTP error response so in the console we saw that the type of the error object was HTTP error response and in order to use this HTTP error response we also need to import it from angular / common / HTTP okay and now that error should be gone now let's specify the body for this method so for now what we will do is we will simply log this error message so here let's write the console.log statement and let's try to log the error this error object which we are going to receive here and now let's call this set error message from within this error call back function so after we have set the error message let's simply call this dot set error message and to that let's pass this error object all right let's save the changes let's go to the web page let me open developer console and here you can see that HTTP error response object logged so this is our error object and in that error object we have this error property and in that error property we have another error property so this error property is storing an object and in that object we have this error property which is set with the error code and the error code is permission denied so we going to check if the error code is permission denied in that case we will show a friendly error message saying that you do not have permission to perform this action so let me copy this error code first let's go back to vs code and in here let's write the if statement and there let's say if err so this ER will be our HTTP error response object in that eror we have the error property which is again an object and in that object again we have the error property so if that error property if it is equal to permission denied in that case we want to set this do error message to something like you do not have permission to perform this action okay and now here let's simply remove this line because now we are setting the error message inside this set error message function which we are calling from here all right with this let's save the changes let's go to the web page and now you see we have a friendly message you do not have permission to perform this action okay let me close the developer console here let's remove this console.log statement we don't need it so in this way if we want to handle an error returned by an observable so we have already learned that all the HTTP method methods for example this get method this delete method of this HTTP client then this post method of this HTTP client all of them are going to return us an observable and that observable can return us some data it can return us some response or it can also return us some error so if we want to handle that error one way to handle that error is to pass the error call back function to the Subscribe method like we are doing here here we are passing a second callback function the error call back function to this subscribe method in order to handle any error returned by this observable the observable which this get all task method is going to return because from within this get all task method if you notice we are returning an observable so this get method it is going to return us some response on that response we are using this map operator and this map operator also it is going to return us an observable so that observable we are returning from this get all task method and we are subscribing to that observable inside this fetchall task method of this dashboard component so if that observable returns us some error we are handling that error by specifying this second call back function for this subscribe method now if I go to task service. CS here when we are making a post request or when we are making this delete request or or when we are making this put request we are subscribing to the observable returned by these methods in the service class itself in case of get method this get all task it is returning as an observable and we are subscribing to that observable in the component class so that's why it is easy to set this error message in the component class but in case of other methods in case of put delete and post we are subscribing to the observable in the service class itself so here we can of course pass the second error call back function to this subscribe method in order to handle errors returned by these observables but the thing is we want to set the error message to this error message property of this dashboard component so here the main thing which we need to do is whenever an error occurs we need to pass that error object to this dashboard component let's see how we can do that in our next lecture

Channel: procademy

Views: 2,072

Keywords: http error, handling error, angular, angular tutorial, complete angular course

Id: ThgS7WDgEZY

Length: 21min 11sec (1271 seconds)

Published: Mon Jan 29 2024