Master NextJS Error Handling in 10 Minutes (2023)


In this video, you'll learn my approach to handling errors using "error boundaries". Handling errors this way is super user-friendly and drastically improves the reliability and user-friendliness of your code.

My GitHub:

Wishing you lots of fun building your own cool stuff with this knowledge!


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.


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.


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.


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.


What is the best error handling for Nextjs? ›

Handling Client Errors

To use Error Boundaries for your Next.js application, you must create a class component ErrorBoundary and wrap the Component prop in the pages/_app.js file. This component will be responsible to: Render a fallback UI after an error is thrown. Provide a way to reset the Application's state.

What is error 500 in Nextjs? ›

The error 500 is a client-side error that shows on your browser and error 500 typically means something has gone wrong on the server end. If you can open up the terminal where you are running the development server, you should see a more detailed error explanation.

How to handle API error in next js? ›

The most important thing is to wrap our handler function in a try/catch block. Wrapping the block allows us to catch errors from the handler and then do something with it. Therefore, whenever you're throwing an error from within an API function, I would suggest to: use this or another class created by yourself.

How do you use error boundaries in functional components? ›

Error boundaries in functional components work similarly to how they work in class-based components. Error boundaries for functional components are typically implemented as Higher-Order Components (HOC) that wraps a functional component, and handle errors that occur within the wrapped component.

How do I make Next.js faster? ›

10 Ways to Improve Your Next. Js App Performance
  1. Multi zones. A zone is a single deployment of a Next. ...
  2. Doing dynamic imports. ...
  3. Delay loading the non-essential scripts until it gets neutral. ...
  4. Optimizing images. ...
  5. Additional optimization. ...
  6. Caching. ...
  7. ISR. ...
  8. Analyze bundles.
Oct 21, 2022

Does Next.js prevent XSS? ›


This header helps prevent cross-site scripting (XSS), clickjacking and other code injection attacks. Content Security Policy (CSP) can specify allowed origins for content including scripts, stylesheets, images, fonts, objects, media (audio, video), iframes, and more.

How do you avoid 500 error? ›

How to Fix the 500 Internal Server Error?
  1. Try Reloading the Page.
  2. Clear Your Browser Cache.
  3. Check Your Server Logs.
  4. Check for Errors in Establishing a Database Connection.
  5. Check Your Plugins and Themes.
  6. Reinstall WordPress Core.
  7. Check for Permissions Error.
  8. Increase PHP Memory Limit.
Jun 15, 2023

How long does error 500 last? ›

This error message is often temporary and the website may quickly fix itself. For example, many people may be connecting to the website at once, causing the problem. You may just need to wait a few minutes — or a few seconds — before trying again, and the website may work properly.

Why do I constantly get error 500? ›

A 500 internal server error is, as the name implies, a general problem with the website's server. More than likely, this means there's an issue or temporary glitch with the website's programming.

How to trigger Next.js default 500 error page? ›

The only solution I found is to throw an unhandled error from getServerSideProps : res. statusCode = 500; throw new Error('Internal Server Error');

How do you handle API timeout error? ›

If one of your calls times out, we recommend first re-trying the call after a few seconds of idle time, since it may have been caused by a network issue that has resolved itself. You should re-try at least three times, to allow time for any network issues to resolve.

How to catch every error in js? ›

To catch all JavaScript errors, we can use the window. onerror() method which acts like a global try-catch statement. The onerror event handler was the first feature to facilitate error handling in JavaScript. The error event is fired on the window object whenever an exception occurs on the page.

Which lifecycle method is used to handle errors? ›

React provides two lifecycle methods that a component can implement to determine if a rendering error has occurred in its child tree and respond accordingly. These two methods are componentDidCatch() and static getDerivedStateFromError() .

What is the difference between error boundary and try catch? ›

Try catch block works with imperative code whereas error boundaries are meant for declarative code to render on the screen.

Should I use error boundary? ›

In practice, most of the time you'll want to declare an error boundary component once and use it throughout your application. Note that error boundaries only catch errors in the components below them in the tree. An error boundary can't catch an error within itself.

Why is Next.js so slow? ›

js is slow performance caused by dynamic imports. Dynamic imports allow developers to load chunks of code on demand instead of loading everything at once. This can improve the initial load time of the application, but it can also cause slow performance if not implemented properly.

Is Next.js faster than React? ›

The web apps built using NextJS are very fast. The web apps built using ReactJS are slow as compared to NextJS.

Why is Next.js faster than React? ›

The major difference between Next JS and React JS is performance. If we talk about Next. js applications, they are extremely fast because of the static destinations and server-side rendering. Of course, they are viable due to many performance enhancement features, such as Image Optimization.

Is Next.js vulnerable? ›

0, Next. js is vulnerable to User Interface (UI) Misrepresentation of Critical Information.

Does Next.js automatically cache? ›

Next.js automatically adds caching headers to immutable assets served from /_next/static including JavaScript, CSS, static images, and other media.

How can I improve my Next.js website performance? ›

Optimize Next. js App Bundle and Improve Its Performance
  1. Analyze First Load JS. We start by analyzing and identifying the bundles included in the First Load JS. ...
  2. Dynamic imports. ...
  3. Lazy load images using next/image. ...
  4. Lazy load Google Ads. ...
  5. Specific imports. ...
  6. Optimize next/link. ...
  7. Optimize fonts. ...
  8. Lazy load React components (optional)
Oct 19, 2022

What is the most common 500 error? ›

500 - Internal Server Error

Perhaps the most common message encountered, this indicates a generic server error that's displayed when the server cannot determine the exact problem.

Should you return a 500 error? ›

Every 500 error indicates a problem on your side. The more 500 responses your system returns, the more unstable it appears for end users. Ideally, you want to eliminate this class of errors completely. However, it' important to note that although 5xx errors are unwanted, you shouldn't pretend they never happen.

When should you throw a 500 error? ›

The HyperText Transfer Protocol (HTTP) 500 Internal Server Error server error response code indicates that the server encountered an unexpected condition that prevented it from fulfilling the request. This error response is a generic "catch-all" response.

What is error 500 in frontend server? ›

The HTTP 500 error means that the server encountered an unexpected condition that prevented it from fulfilling the request. The HTTP status code “500 – Internal Server Error” is one of the many 5. X.X. HTTP error codes (500, 502, 503, 504, etc.).

What is a 400 error? ›

The HyperText Transfer Protocol (HTTP) 400 Bad Request response status code indicates that the server cannot or will not process the request due to something that is perceived to be a client error (for example, malformed request syntax, invalid request message framing, or deceptive request routing).

How to handle 500 internal server error in javascript? ›

How to Fix the 500 Internal Server Error
  1. Reload the web page.
  2. Clear your browser's cache.
  3. Delete your browser's cookies.
  4. Troubleshoot as a 504 Gateway Timeout error instead.
  5. Contacting the website is another option.
  6. Come back later.
Jun 23, 2022

How do you handle 500 internal server error in react? ›

To handle a 500 error when using React's fetch function with Typescript, you can use the catch method to catch any errors thrown during the fetch request:
  1. 1fetch(url)
  2. 2 . then(response => {
  3. 3 if (! response. ok) {
  4. 4 throw new Error(response. statusText);
  5. 5 }
  6. 6 return response. json();
  7. 7 })
  8. 8 . catch(error => {
Mar 13, 2023

How to catch error in promise JavaScript? ›

The catch method on a promise is pretty simple because it is an alias for then(null, errorCallback) . var promise = request(); promise. catch(function(error) { displayError(error); }); // This is the same code as this: promise. then(null, function(error) { displayError(error); });

How to avoid JavaScript error? ›

To avoid such syntax errors, you should spend time learning the grammatical rules of the JavaScript programming language. With extensive coding practice, you can spot the grammatical mistakes easily and avoid shipping them with your developed application.

How do I create a custom 500 error page? ›

How do I set up custom 404 or 500 error pages? Print
  1. Create your custom error pages: Create the custom error pages in HTML or any other format you prefer. ...
  2. Upload the custom error pages: Upload the custom error pages to your server, in a directory accessible from the web.

What is the max timeout for API? ›

The maximum value is 30 seconds.

What is the most common API error? ›

1. 400 Bad Request Error. This error is one of the most commonly encountered API errors, and it occurs when a server can't parse the request itself. This could be caused by an incorrect URL, something wrong with how the API request was composed, or even an issue within the application itself.

What is the best practice for API timeout? ›

Solution: For APIs, it's always better to define your own timeouts at the function level, which should be very short – around 3-6 seconds. Setting the short timeout will ensure that we don't wait for an unreasonable time for a downstream response and cause a timeout.

How to catch runtime error in js? ›

JavaScript provides error-handling mechanism to catch runtime errors using try-catch-finally block, similar to other languages like Java or C#. try: wrap suspicious code that may throw an error in try block. catch: write code to do something in catch block when an error occurs.

How to handle error without try catch in JavaScript? ›

If an error object is not needed, we can omit it by using catch { instead of catch (err) { . We can also generate our own errors using the throw operator. Technically, the argument of throw can be anything, but usually it's an error object inheriting from the built-in Error class.

How to avoid multiple try catch in JavaScript? ›

To avoid writing multiple try catch async await in a function, a better option is to create a function to wrap each try catch. The first result of the promise returns an array where the first element is the data and the second element is an error. And if there's an error, then the data is null and the error is defined.

What are the three lifecycle methods? ›

There are three categories of lifecycle methods: mounting, updating, and unmounting.

What is fallback UI? ›

A React fallback UI is a component rendered when an error occurs within React component tree or when a component is suspended due to a network request for data that is asynchronous.

How do you handle an error without try-catch? ›

You can handle exceptions still without having catch blocks also, only thing you need to do is declare the throws clause in your method signature, so that the calling function would handle the exception. Before throwing exception, it executes the finally block.

How do you describe the proper error handling using try-catch? ›

The try statement defines the code block to run (to try). The catch statement defines a code block to handle any error. The finally statement defines a code block to run regardless of the result. The throw statement defines a custom error.

Can we use try without catch or finally error? ›

Yes, It is possible to have a try block without a catch block by using a final block. As we know, a final block will always execute even there is an exception occurred in a try block, except System. exit() it will execute always.

In which scenarios error boundaries do not catch errors? ›

Error boundaries do not catch errors for the following events: Event Handlers. Asynchronous code(Example request Animation Frame etc) Server-Side Rendering.

What type of errors are not detected by error boundary? ›

However, error boundaries do not catch errors for: Event handlers (for that, you need to use regular try/catch ) Asynchronous code (e.g., setTimeout or requestAnimationFrame callbacks) Server-side rendering.

What is the proper placement for error boundaries? ›

The placement of the error boundary is entirely up to you. You can just wrap the top-level component or wrap any nested individual components so that only that component has a fallback UI, leaving the rest of your user interface works as expected.

What is the best class for error and exception? ›

Throwable is the superclass of all exceptions and errors. You can use it in a catch clause, but you should never do it! If you use Throwable in a catch clause, it will not only catch all exceptions; it will also catch all errors.

What is the best practice of error handling in React js? ›

In React, you can use try-catch blocks to handle errors that occur within a component's render method. For example: Suppose you have a component that fetches data from an API and displays it to the user. If there is a problem with the API call, you might want to display an error message to the user instead of the data.

Which is the best way to handle errors in net? ›

You can handle default errors at the application level either by modifying your application's configuration or by adding an Application_Error handler in the Global. asax file of your application. You can handle default errors and HTTP errors by adding a customErrors section to the Web. config file.

What is the best way to handle error in go? ›

The most common way to handle errors is to return the error type as the last return value of a function call and check for the nil condition using an if statement.

Which programming error is most difficult to solve? ›

The hardest type of coding error to locate and fix is the logic error. With logic errors, there are no crashes or helpful highlighting to point out the problem. Instead, the program runs successfully. But it doesn't do what you wanted it to do.

Which error detection is best? ›

Error Detection

The best-known error-detection method is called parity, where a single extra bit is added to each byte of data and assigned a value of 1 or 0, typically according to whether there is an even or odd number of "1" bits.

Which type of programming error is the most difficult to debug? ›

Logical errors are the most difficult to fix. They occur when the program runs without crashing, but produces an incorrect result. The error is caused by a mistake in the program's logic.

How do you catch a 500 error in React? ›

To handle a 500 error when using React's fetch function with Typescript, you can use the catch method to catch any errors thrown during the fetch request:
  1. 1fetch(url)
  2. 2 . then(response => {
  3. 3 if (! response. ok) {
  4. 4 throw new Error(response. statusText);
  5. 5 }
  6. 6 return response. json();
  7. 7 })
  8. 8 . catch(error => {
Mar 13, 2023

What are the error handling techniques? ›

The tasks of the Error Handling process are to detect each error, report it to the user, and then make some recovery strategy and implement them to handle the error. During this whole process processing time of the program should not be slow.

Top Articles
Latest Posts
Article information

Author: Fr. Dewey Fisher

Last Updated: 01/12/2023

Views: 5269

Rating: 4.1 / 5 (62 voted)

Reviews: 85% of readers found this page helpful

Author information

Name: Fr. Dewey Fisher

Birthday: 1993-03-26

Address: 917 Hyun Views, Rogahnmouth, KY 91013-8827

Phone: +5938540192553

Job: Administration Developer

Hobby: Embroidery, Horseback riding, Juggling, Urban exploration, Skiing, Cycling, Handball

Introduction: My name is Fr. Dewey Fisher, I am a powerful, open, faithful, combative, spotless, faithful, fair person who loves writing and wants to share my knowledge and understanding with you.