Try Catch Error Handling With TypeScript

this is a quick tip on how you can deal with error handling in typescript when you have for example a try catch block so what we need to do anyway is we need to deal with errors it doesn't work so we need to know what the error is right so here we can wrap this in a try catch block so I'm going to put everything in try catch so then if this this send a method throws an error we can catch that error so we can see what's going on so we can say catch the error and then just like here we can return an object with an error and we want to see what the error is so we ideally could do arrow.message right so if sent the recent throws an error we catch it here and we want to get its message now typescript is going to complain because if we hover this error is of type unknown right so this Arrow here that we get is basically a type a noun which actually makes a lot of sense because technically this you can throw anything in JavaScript right so you can throw you can throw the number five right you can throw that so technically descent method could throw the number five so we catch five here and then we try to do five Dot message but message message doesn't exist on the number five right so you can throw a new error in JavaScript new error test error and now you can actually get message but this will give us an object with a message property but we don't know if they actually if they actually throw something that was created with new error right now they may actually also just throw a normal JavaScript object with error or message and so we don't really know what they throw if something goes wrong so let's see we can just do a bunch of if statements so we can check if we can check if it actually has a message property and so we can check if this error if this actually is an instance of errors in JavaScript we have this error Constructor new error message if you do this you will get an error object with message property right so we can check if whatever this third parties whatever whatever it is through is an action instance of that error Constructor well in that case yeah we can just use error.message right that's not a problem and we actually saw that they give us an error we actually saw that they gave us an object um I'm not sure if I can still find it but it was somewhere here it was actually an object now that was actually not an object that wasn't actually specifically an instance of error that was just you know they just they just they just created an object literal with message and Status cards right that was it wasn't created with new error so now it's not gonna go it's not gonna return that because you're only checking for if it's actually an instance of the arrow Constructor so here we can also check else if the error what whatever whatever is thrown if it's if it's actually uh if the type of this is actually an object right strictly equal to object and it has that message in that object so you can write it like this you can check if the message property name is in the error right so you can use you can run it like this and now we get an issue because it's saying that error could also be null you cannot check if something is in null so initially here what we can also check if the error is even existing so if error exists and the type of that error is an object and there is a message in that object then we can also return error.essage right we touch good won't give us an issue here because we know now it's going to be an object with a message property now this is getting quite uh you know you can already sense here because now what we also want to do is what if the what if they're not throwing an object maybe they're actually throwing a string maybe they're actually just throwing the message itself maybe just throwing that and now we're not we're not dealing with that here right because that's not going to be an instance of error it's not going to be an object so now we're just losing that so now we have another else we can check if it's a string and just use that as the message so here at this point it's probably best that we extract this into a helper function right because we're gonna have to deal with errors and other server actions and through our application as well might as well extract this into a separate function so what we want to be able to do we're going to put all this stuff in a separate function and ultimately we just want to get the message basically so here we're just going to return an objects and what we want to do here is we want to call function let's call it get error message and just pass that error and that and that function will then just figure out what the message is so let's copy all of this and remove that from here so this is much cleaner now and we're going to extract this logic out to a helper function here we'll call that get error message that will take in that error and it will extract some message from it so indeed it's going to be an error of type unknown and I copied that so I can paste that here what we had before right so this will just return a message so let's actually let's just create a message here and this should be of type string right so we want to return a message of type string and that's what we're going to return here return message and so this message will then be the error here it will be will be here in this object's error and then that message right so this function should return a string well let's make That explicit here okay so now we don't want to return some objects here we just want to return error.message here and so we just extract error. message or not return we want to assign it to message right so then here we'll say a message is error.message as well all right we got an issue here type and known it's not assignable to type string okay so this is really really Advanced so here we're saying if error exists and it's actually an object and it has that message property so for example if they throw an error with well it could just be message but in valid sender email so this in this case we could we could get error.message right now technically they could throw something like this so they could throw an error that exists right another type errors object and message also exists message is an error but then it's actually a number type and here we're saying it should be a string and so if we really this is really uh advanced we can say well we're going to cast that to a string so we can wrap whatever they give us in the string what we get from JavaScript and this will convert whatever that is to a to a string right so this is getting a bit uh Advanced I'm not sure if I should have included that in this tutorial but this is easy to pick up once you've mastered JavaScript itself right so I'll keep hammering on this how important that is and this is this is the real world you need to deal with errors properly all right now what if they throw not an object but for example they throw just a string in a standard email now we're not checking for that here we're only checking for instance of error object and actually if it's just a normal object but we can also check if it's a string so we can also check type of error if that is strictly equal to string then we can just use message is just that error right it's going to be string so we can just use that and else if all of that doesn't give us a message or if if all of that doesn't pass the test of the if block we'll just have a default error here right so then we weren't able to extract it from whatever it is through so here we're just going to say a known error or typically people call this something went wrong and so ultimately this get error message helper function always gives us some message that we can then use here in the catch block and it's nice that we have extracted this into a separate function because now if we have another file another server action you know you have to deal with errors all over the place so you can just reuse this and let's actually put that in the utils file as well so let's copy this and let's put that here in the utilities file and make sure you also export it we're going to export this and then we're going to import this get error message that's not much cleaner and this is much more professional by the way if this was helpful I'd really appreciate it if you could like And subscribe also check out my courses on CSS and JavaScript if you want to take those skills to an advanced level because in there we will build some beautiful real world projects from scratch so you can see how everything fits together and really Master CSS or JavaScript and I will also release other courses soon like react and node.js so if you want to be notified then make sure you are subscribed to the email newsletter you can find the link in the description thanks for watching and I hope to see you soon

Channel: ByteGrad

Views: 4,420

Keywords:

Id: Q1euMQFI35I

Length: 8min 53sec (533 seconds)

Published: Sat Jul 15 2023