Ionic Angular Error Handling Best Practices | LinkedIn Clone [21]

welcome back to the continuation of our linkedin clone using ionic angular and sjs in this video we'll focus on the front end and we'll be dealing with error handling so if i just refresh the page here and i go ahead and i log in we can see that we've got this error here and if i refresh that again we get the error code no post to retrieve and then we get this bug symbol to dismiss and if i click this they'll dismiss the bug and we also get handling of the no post component or the all post component in the case that there's no posts so what i've done is i've gone to the database and i've deleted all the posts and we will set up some generic error handling on the front end so that we can handle our errors so let's go ahead and get started i'll start by seeding into the api and running an npm run start colon dev to get the server going and i will also cd into the front end to linkedin project and i will run an ionic serve and that should get the front end going now we'll be working exclusively in the front end and what i want to do is just look at the folder structure here inside of the app folder we have an auth and a home module now i'm going to add another module or another section here and i'm going to call it core similar to the back end video the core folder represents uh files that can be in any project whereas if you have a shared folder that might signify that that can be handled within the application so you might have a header for example in multiple pages but that head is exclusive to your particular application whereas a more generic stuff like error handling and api requests and stuff like that they're going to be in every project so we can put this in core and of course this is all just personal preference you can put this wherever you want but we're going to start off by making an error handler service dot typescript and we can see right now we don't have an image let's just go ahead and get an image here but more importantly uh we've got this component here and it's just a big white square or rectangle and that's because there's no post in the database and whilst there are is herat handling on the back end so we're getting back the particular empty array in this particular case we want more general error handling so we're returning back the data that we want and presenting it in a nice way in the ui so let's just go ahead and work on our class here so we're going to have a class and we'll call it the error handler service and we can give it this decorator of injectable comes from angular core and it just takes an object and we can just say provided in root and they'll be accessible all throughout our application we don't need to declare in the module just a simple service so what i want to do here is i want a way to handle an error and i want it to be generic so if i take a look at the or post component so in home in components in all posts if i scroll down to where we're getting the post we're calling this get selected posts so i can f12 here into the post service and essentially what i want to do here is in the method where we're getting the post so get selected post here we can tell the return type because it's in here the post uh array and that in typescript implies the type there or you could put observable post array there as well but it's implied but we can actually go ahead and we can pipe into this observable and we can say okay well firstly we're going to tap and what tat allows us to do is it gets the response that we're expecting so the post which is of the type post array and we can do something with this and basically right now we we just want to detect if the post if there's any post so we can say if the post has a length equal to zero we can just go ahead and we can throw a new error here and we can just say no post to retrieve so this will throw the error but we obviously need to handle the error and there's another pipeable operator that we can use here and we can use the catch error so we're explicitly throwing an error because we're going to handle it here in the catch error and that error and this error message does indeed get passed into the catch error and what we can do here is we can start to work on a method that we can pass in this particular function name but our error handler service will be able to pass in any of the you know functions that are called throughout the application that deal with http um and it can give the particular type so in this case a post array and it can also return a default value because we have an empty array if there's some sort of error that's been thrown for the no post retrieve so we want to handle that gracefully by just returning an empty array if we weren't handling an empty array we could get some sort of errors and it will impact on the user experience so let's just go ahead and import this control period from rxjs operators now we do need to firstly write the method so in the error handler service what i'm going to do is i'm going to handle the error and basically we're going to have a particular operation and if that's not specified we'll just say operation and that operation just relates to what the function is that called it so we might say get selected post the method name is the operation and we could say something like get selected post didn't work um or if that's not passed in we just say the operation didn't work and we can also have a result here and this may be null but it could be the type that we're after and to use this generic type in our function here we just need to say in the angled brackets next to the function name that it's going to be a generic function because it's going to handle a generic argument and then we can just have our code block here so in this case if we give back an empty array that is going to be of the type post array whereas in other circumstances we might not be turning an array we might as have a number or a string and then you know this result won't need to be uh passed in because it would just revert to the null case so what we want to do here is we can say we can return something here and we know that we're getting an error because we're going to call this uh service here so i might go ahead and inject this into the constructor here so private error handler service and i'll just make this a lowercase e and bring in that service and that allows us to go to our method here in the catch error and we can say this error handler service and then we can call the service so handle error and even though we're not um you know passing in the error directly the fact that this is a um in the catch error the error will be present in the function that's calling it so we see we have this operation here and this result of the generic type here so in this particular case what we want to do is we can say okay we want to handle an error for this post array and if we go ahead and just type in the name of the method for the operation that we want to handle and in this case we do want to just pass in an array here so it can default to an array an empty array or there's no post in the case that the post length is equal to zero and so we throw the error we catch the error we handle the error and since we have the error we can go ahead and we can return and for the error that got passed in and this can be of any type here we can say we want to give back an observable of the generic type so in this case it's going to be a post array but of course you can be calling this function anywhere for any of your methods here now we'll have to bring in uh observable and this is just going to be an arrow function here and we can say we can just have a message console log or let's make it a console warn and then we can have our template literal syntax here and then we can say the operation whatever that was failed let's go ahead and get the error message and remember the error message is coming through the catch error where we threw the error and in as an argument here and we've used the operation of the name of the function and we don't need to log out the result and i'm just going to have a little note here it's like a to do uh remove in production because we don't want any console logs in production but we do want to just see what this is doing for us and then finally what we'll do here is we're going to return observable which is going to just be the result as the generic type that's specified and we can just go ahead and save this here now we are getting an error in the post service so let's investigate that uh so let's see here where's the constructor we got the error handler service all right is this an old error i'm just going to rerun this so i've just recompiled and now we can see that we're getting this get selected post failed no post to retrieve now i'm here i'm just going to delete these other logs because they seem to be getting in the way a little so i'm just going to search for my 888 log and remove that and i'll also search for my 33 log and i'll just remove that and i'll just make a little easier to follow while we're looking in the logs so let's go ahead and just reload this and we can see as this warning here we can see get selected post file no post to retrieve so that's cool now what we want to do is we want to display a pop-up here so let's go ahead and go to our error handler service now i will say that i'm going to use the toast controller from ionic and you might want to refactor this into its own uh area like a toast service or something like that and then use that globally i'm just going to use it specifically within this error handling uh component so i'm just going to write it here but of course you can make things more abstract if you are working on a larger project and refactor things a little uh nicer but i'll leave that up to you so we can just go ahead and we can just get the toast controller in from ionic angular so that means in the constructor we've injected that um so we can go ahead and we can what i want to do is i want to have a function it needs to be a sync because we're going to need to wait for something and what i want to do is since i have this error message when this operation is executed and it's returned so this observable of the generic type what i want to do is i want to display the toast so basically i want to pipe into this observable here and that allows me to use the tap operator if you import it from rxjs and [Music] what we can do here is we can say this dot present toast and i'm going to pass in the error message here like this just the error message we got that we created ourselves and let's see here tap i think i'm missing a bracket or something uh so tap is this this all right um and then of course we need to add as a parameter the error so i'm just going to say the error message is going to be of the string and then we can open up our code block here now we have our parameter set and our argument passed in to the function and we can say all right we want our toast and we need to await the creation of the toast from the toast controller and there's a create method there which takes in an object and you know you can give it a header and we'll just say error occurred and of course you could put this into its own component if you wish or sign a service pass in more arguments and reuse it you can have a message here so error message now i'm going to have a default duration of two seconds or two thousand milliseconds i'm going to give it the red color so in ionic you have the danger worn primary tertiary and those sorts of things and then i'm going to have a button in case you see the message and you want to cancel it before the duration is up so this button or buttons because you can have multiple takes in an object and it could take in multiple objects if you had more than one and there's a bunch of these parameters defined in the ionic documentation for the toast and basically i just want to have the bug icon here i want to have the text of dismiss with the role of cancel and that takes care of just closing things up for us and we've waited for his toast but then we just need to present it so we wait for that to you know be created and then we can just say okay well we want to present it and when we are handling an error we pass in the error message creates the toast and then it displays it for us so now we see we've got this error code no post to retrieve and we've got this dismiss button here we can click that and then that removes that for us so i just want to clean some things up if we go to the or post component so control p or post component one thing i want to just add here is i just want to say if the allowed [Music] um oh if the or if all the loaded posts uh has a length greater than zero uh you know display it so now that we've got no post here we're not displaying this white block here and of course we could create a post here and then delete it so that's that and in the all post component in the type script rather than having this error and console log error message and we'll see that this subscribed uh it's a deprecated version of subscribe meaning you know passing in this error here as a second uh argument we can just go ahead and we can delete this here then we get our ides showing our text a little nicer and we can just go ahead and we can save that and that pretty much wraps up the video so we've got error handling here we can dismiss it and we can create posts so thanks so much for watching this video if you liked it please give it a like subscribe to the youtube channel in the next video i'm going to work on testing both on the back end and on the front end so if that's something you're interested in please stay tuned for the series and thanks so much for watching cheers i'll see you in the next one

Channel: Jon Peppinck

Views: 176

Keywords: ionic, angular, ionic angular, ionic framework, ionic 4, ionic 5 angular, ionic 4 angular, ionic tutorial, ionic4, angular tutorials, ionic for beginners, learn ionic, ionic guide, ionic 5, ionic tutorials, ionic course, angular2, angular 9, ionic 4 tutorial, angular 2 httpclient error handling, angular 7, ionic 5 tutorial, angular 7 tutorial, ionic 5 for beginners, ionic 4 for beginners, ionic 4 course, learn ionic 5, learn ionic 4, ionic academy

Id: dAxO1sfrnjM

Length: 21min 52sec (1312 seconds)

Published: Tue Aug 10 2021