Master NextJS Error Handling in 10 Minutes

a key skill that separates entry level from myth or senior level developers in my experience is knowing how to handle errors properly it not only increases the quality of your code but also makes you look way more professional in your portfolio for example if employers take a look at your code but also it definitely increases the user experience if they know what's going on they get a little cool button they can click to try again right that's just super user friendly and overall just massively increases the quality of your web app okay let's learn how we can handle errors in Nexus 13 Lego Pro and Nexus makes it super easy actually it's very enjoyable if you know react you know there is something called a an error boundary right if something fails to render during suspense which may or may not happen then the error boundary is called to display a user-friendly message as what just happened right and let's say this page is an auth only page nobody that is not logged in is able to access this page but let's say the cons session is equal to no so we are marking the case that the user is not authenticated in that case an error should be thrown if not session then we are gonna throw a new error and we can say for example auth is required to access this resource which is a very user-friendly message right it's very clear and now when we go to this page what should happen is that this Arrow gets thrown because there is no session that we're mocking so if we go into the browser and navigate to this page we can see auth is required to access this resource great well what's not great is that our application currently crashes right because this is an unhandled runtime error that's pretty bad but the good thing is that we know the arrow works correctly and now we can actually handle that error like a pro and the way we can do that in Nexus 13 and the experimental app directory is by creating a new file called error dot PSX or dot jsx um whatever you prefer this is not typescript specific at all and this is going to create an automatic react error boundary meaning if something fails to load in suspense right there is an error boundary to catch that and that's what this page right here is I'm going to create this as a functional component but as I said no type script needed you could leave all this away if you wanted to and just save that and by default um these error components because we're passing them a function implicitly next year as does it for us they need to be turned into a client component as though otherwise this would not work and now let's see what happens so we are navigated to the error page and we can see the error right here which is fine but this means the error is now handled right we are navigating the user to another page that is about to handle the error and that is way more user friendly and this page gets two properties from next shares one being the actual error and the second property being the reset it's a function that's what I was talking about earlier that's why this is a client component a function we can call to redo the last action and see if that fixes the error super cool that we get access to that now if you're in typescript you might get an error because the types of these two are not defined error in that case would be of class or of type error which is a class and then the reset would be a function that returns void but just if you're in typescript if your JavaScript don't worry about that and no for example we could render out a button saying try again and on click of this button we want the reset function to be called let's save that go back into our browser we get the button right here and if we try again you can see the error pop up again which is great right I mean in this case it doesn't make any sense because we know the error is about to happen but if something just went wrong because an API that you rely on in your app had a short outage this try again would work properly right just as you expected which is a super good measure to make error handing user friendly and then to make this even more user friendly I've prepared just a little example right here that we can copy and paste this is not about the styling at all so I'm just going to paste this in it has a bunch of Tailwind classes prepared for us but I just want to um you to understand the gist of it right I'm going to save that and as I said this is just for the siding it doesn't make sense to get into that essentially if I save that as you can see right here in the H1 we are displaying the Aero Dot message and if we take a look at what we get access to on this error we get a stack a name a message and a course and I'm about to show you a way that is super convenient to make this even better okay this looks pretty bad because my browser is by default in dark mode and this is in light mode so let's give this a background of gray 900 for example and I think that should now work yeah okay that looks better um so we are displaying that the auth is required to access this resource right so the message that you can see right here is what we called in this error and one way we can abstract that I think is super convenient and we don't have to type this every time instead we can create one exception that we can always throw when there is an error problem an auth problem for example meaning we could instead of this do something like throw new auth required error and that's it now this doesn't exist yet but we can create that so every time auth is required you could just throw that error and be totally good to go now let's create that I'm going to do that in a file called lib and then under Loop let's create a folder called exceptions and in this or actually we can just create that as a file we don't need that as a separate folder let's make a file called exceptions dot TS and inside of this exceptions we can create our custom auth required error the way we do that is by exporting a class with the name of that we just specified the auth required error and we don't even need to type this out ourself we can just say extends error meaning we are copying all the properties from the regular error and putting them into or auth required error then let's put a Constructor in here and that Constructor takes the error message and we are going to default that to something like auth is required required to access this page period right and then a super in here that we pass the message and also this dot name this refers to wherever this is rendered like this particular instance of the class that we are invoking for example in this um in this example it would be you know this it's kind of a weird keyword kind of weird to explain I hope you got the hang of it and then we can call this for example requires auth or that's let's call this the same thing as we called it up here auth required error there we go we can save that and that is all we need to do right now we have created a custom exception we can throw every time we want to handle this error and we can import it now let's just invoke that and as you can see the message is optional because we defaulted it to something we could still change it if we wanted to but we don't have to we can just throw this error like that go back to our page and if we try to render this page again we can see auth is required to access this page and we can throw that in every in every page that we want to be auth only right let's create another one called this something like dashboard and dashboard gets a page dot TSX so the route for this would be localhost 3000 or whatever Port you're hosting on slash dashboard because the that's the routing structure in extra s13 it's a file based routing structure where we create a page.tsx inside of the folders and only the folders are actually going into the URL name I'm going to initialize this as another component and also throw a new auth required error in here making this an auth page now just just throwing an error wouldn't make any sense you would obviously do this conditionally based on whether there is a session for example and now if we try to navigate to the slash dashboard hit enter auth is required to access this page and we cannot access it so in a very user-friendly and convenient fashion we have created a next JS custom error boundary that we can then use to handle every exception that occurs somewhere in our component we can display it to the user even provide them with a try again option which is super good and if you through the error conditionally based on you know something that might have an outage currently but that's about to be fixed after some time and we are also offering them the option to navigate back to the home page that's all I wanted to share I really hope you enjoyed this approach of handling errors I really liked it I think this is super convenient and you can do a lot of stuff with it if you build something cool let me know that's all I want to share for now thank you very much for watching and I'll see in the next one have a good one and bye bye

Channel: Josh tried coding

Views: 38,947

Keywords: nextjs, next js, react, nextjs react error handling, next.js, web development, nextjs tutorial, reactjs tutorial, react js, next.js tutorial, next, reactjs, react tutorial, javascript, error handling, api, josh tried coding, joshtriedcoding

Id: CfkiO8wTSOY

Length: 9min 48sec (588 seconds)

Published: Sun Apr 02 2023