#148 Logging Errors with catchError | HTTP Client | A Complete Angular Course

[Music] in the last couple of lectures we learned how to handle HTTP errors in our angular application now let's say that we also want to log the HTTP error messages in the database for analytics purpose so that in the future developers can look into the logs and fix the problem for that let's first go to vs code and let me close this dashboard component. HTML file and the CSS file and what we want is we want to create a new service so in the service folder I'm going to create a new service and I'm going to call this service logging service here let's create and Export a class and let's call this class loging service let's decorate this loging service class with at injectable decorator and in order to use this at injectable decorator we also need to import it from angular /co okay now to this injectable decorator let's pass an object and there let's set provided into root all right now inside this loging service we are going to create two methods the first method will be log error and the second method will be fetch errors okay now from within this log error we are going to make an HTTP request to the server in order to write the error message in a collection so for that first of all inside this logging service we want angular to inject an instance of HTTP client class so let me go to this task service and let me copy this line and let's paste it here and in order to use this HTTP C we also need to import it so let me also go ahead and let me get this import statement from here and let's paste it here okay currently we don't need this HTTP headers and HTTP responses we only want HTTP client and in order to use this inject method also we need to import it from angular /co okay now use using this HTTP client we are going to make a post request to the server so let's say this do HTTP dopost now if you remember to this post method we need to pass three arguments the first argument will be the URL to which we want to make the post request the second argument will be the data which we want to send with the post request and the third argument is an optional argument so for the URL let me go to our Firebase database so this is the database URL so let me copy this URL and let's paste it here now in this database I want to create a table called log okay so let's call it log. Json so with this name a collection called log will be created in our database and for the data let's say we are going to get the data whenever this log error method will be called so here we are going to receive the data let's set its type as an object where we will have the status code of type number and error message of type string okay and we want to pass this data with the post request so we already passing it and then let's also subscribe to the observable which this post method will return so for that let's use the subscribe method and when we are sending a post request we are going to receive some response and we don't want to do anything with that response so I'm not going to pass any call back function to this subscribe method and here when we are getting the status code and error message let me also set the date time so basically when we are inserting This Record okay and it is going to be of type date all right and inside this fetch errors let's again go ahead and let's make an HTTP request for that we are going to use this instance of HTTP client and from here we want to make a get request and we want to get all the records from this logs collection so I'm going to copy this URL and let's paste it here and let's also go ahead and let's subscribe to it and for now whatever data we will receive we are going to log it in the developer console okay so we will simply say console.log and we are going to log the data all right so this is our logging service let's save the changes here and now whenever an error will occur let's go to dashboard component so let's say whenever we are making an HTTP get request to the server for that we are calling this fetchall task method and from within that we making a get request to the server right here we are calling this get all task method of this task service if I go to get all task method you see here we are making a get request and then whatever response we are receiving we are using this map method on that response in order to format it right now instead of getting a success response if we get an error response we want to handle that error response as well so here after this map method to this pipe method I'm going to pass pass a second operator and that operator name is catch error and again in order to use this catch error operator we need to import it from rxj / operators okay and this sketch operator we need to pass a callback function and this call back function is also going to receive the error object which has occurred let's call it err and inside this call back function first we want to write the logic to log the errors in the database and then what we also want to do is we want to return an observable from here which will throw an error because if we don't return an observable if you see from this get all task we need to return an observable and we are subscribing to that observable in the dashboard component here so from here we need to return something which is an observable and that observable should also emit the error so that that error can be handled using this error call back for that we are going to use another operator called Throw error okay and in order to use this throw error we also need to import it from rxjs library so after subject let's also import throw error all right so that error is gone and using this throw error we want to throw this error which we are receiving inside this catch error operator now here we have this dication warning and it says that this signature is deprecated so let's scroll down and let's see what is the new signature so we can do something like this or if we want to throw the same error we can use this approach so let's do that and we want to throw our error object all right now why we are throwing the error because from this get all task we want to return an observable and this throw error it is going to return an observable and that observable is going to emit this error as the data all right so in this way using this catch error operator we can catch any type of error and we can handle that error by for example logging that error in the database now to log the error in the database what we are going to do is we are going to inject this logging service inside this task service so here let's create a property let's call it logging service it is going to be of type loging service and to use this loging service we also need to import it and what we want is we want angular to inject an instance of this logging service class inside this task service okay and once we have that in instance here inside this catch error what we are going to do is first of all let's create an object and here we want to have these properties so basically it is expecting an object with status code error message and date time so let me copy it from here let's paste it here so status code we are going to get it from erra do status error message we are going to get it from erra do message and for date time let's simply say date dot now okay so we want to log the current date and time and now we are going to call this log error method of this logging service so here let's say this dot logging service DOT log error and to this let's let's pass this error object and that's it now here we have an error and it says that the argument of type this cannot be assigned to this so here you see the argument which we are passing there it is taking date time as number but here when we have specified the parameter there we have set the date time as date now this is because when we are using this date time dot now it is going to return us a time stamp and that time stamp will be a numeric value so here instead of using datetime do now what I will do is I will call the Constructor of date class and that will return us the current date and time and with that we should not have any error so we now we don't have any error let's save the changes let's go to the application so currently you see inside this database we don't have any log collection all right so now it has been created that's because when this application was Reloaded there was an error so when this application was reloading a get request was sent to get all the tasks from the task collection but in getting that task there was an error and since there was an error this catch error operator executed this call back function and when this call back function was executed we are calling this log error method which is going to create a new record in the log collection and in there we are going to have the status quod of the error we are going to have the error message and we are going to have the date and time when that error has been created so here if we go let's expand this log collection there you can see the date and time you can see the error message you can see the status code at 401 and it says unauthorized so the same error we were getting earlier right so now what we are going to do is we are going to pass this cetch error to post put and delete so here also before this subscribe the observable which this delete is going to return on that we are going to chain the pipe method and to that pipe method we are going to pass this catch error okay let's do the same thing for this delete task so again the observable which this delete method will return on that we are going to use Dot pipe and to that I'm going to pass the catch error operator and what are we doing inside this catch error we are simply logging the error which has occurred in the database let's do it for the post as well so before subscribing here on this one I'm also going to use pipe method and to that we will specify the catch error okay and let's do the same thing for put as well so before subscribing let's use pipe and to that let's pass the cat eror okay let's save the changes let's go to the web page and currently we have only one error logged here so now the page has been reloaded and you can see the error message now if we go to the database now we should see two errors logged so both are same error and now if I try to create a new record and when I click on this create task button again we should get an error because we had changed the URL in the previous lecture so if I go to post request here you see we have changed the URL we have added these three s after the database name so there also an error should happen we can see that error message and if you go to the database another record has been added and there we can see HTTP failure and we can see the status code AS 404 and date and time when this record was inserted so in this way we can also log the error which occurs in our angular application to a database or to a file and in order to log these errors what we have done we have used this catch error operator so using this catch error operator we can do stuffs like logging the error in the database or a file or we can do something else with the error which has occurred this is all from this lecture if you have any questions then feel free to ask it thank you for listening and have a great day

Channel: procademy

Views: 1,975

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

Id: xj6b_lCsIIA

Length: 14min 47sec (887 seconds)

Published: Wed Jan 31 2024