Master NextJS Error Handling in 10 Minutes

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: github.com/jos...
Wishing you lots of fun building your own cool stuff with this knowledge!

[@n8body_dev]

I don't think that's the right way to use error.js, because the documentation says "An error file defines an error UI boundary for a route segment. It is useful for catching unexpected errors that occur in Server Components and Client Components and displaying a fallback UI." where the word "unexpected" is specially bolded. That explains why we actually can't use custom error classes - the name of the caught error will always be "Error" (as one other guy pointed out in the comments) and we won't be able to get any custom props.

[@nabiabdelkader9833]

You are right I have created custom error classes
Inside the error file, I was trying to display the appropriate component, but to no avail, because the error was always of the type Error (instance)
if (error instanceof FetchException) return ()
else if (error instanceof AuthException) return (
...rest of the code
Are there any suitable solutions in your opinion?

[@nabiabdelkader9833]

Suggested solution (but it doesn't seem ideal to me)
1-create custom error class
#FetchException.ts
export const FetchExceptionMessage = "error when fetch data"
export default class FetchException extends Error {
constructor() {
super(FetchExceptionMessage);
this.name = 'FetchException'
}
}
#error.ts
const Error = ({error, reset}: { error: Error; reset: () => void }) => {
if (error.message === FetchExceptionMessage) return ()
else if (error.message === AuthExceptionMessage) return ()
return (unexpected error)
};
export default Error

[@n8body_dev]

@@nabiabdelkader9833For now, I've just created CustomErrorPage component with the following props:
export type CustomErrorPageProps = {
error: {
name: string
status?: number
reason?: string
}
reset?: () => void
}
And I use this it in not-found.tsx, error.tsx files as well as in all my pages, when I need to return early due to an error.

[@n8body_dev]

​@@nabiabdelkader9833By the way, interesting solution, but I think that AuthError is an expected error, so we probably shouldn't handle it in error.tsx. Hmmm.

[@pouriakalantari6537]

Thx​@@nabiabdelkader9833

[@akmaldiraa]

but on the production, u just can see
"An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error."

[@bongkotsaelo4239]

Thanks, I'm struggled at ErrorBoundary at first, no idea that nextjs handle it automatically. 😂

[@techwithimad4672]

Nice!
What about production error messages?
They are often hidden to ensure that no sensitive data is leaked.
How can we deal with this to know exactly which exceptions were thrown?

[@thePINGUSTAR]

yeah I am also interested in this. Did you figure it out?

[@user-xu3lj1ej8d]

@@thePINGUSTAR I didn't find solution for this 😢

[@monirhrabby]

I learned something. Thanks Josh - Big fan of you.

[@alaeddinemenai5380]

Thank you Josh- Big fan of you-. I went in depth with documentation and I just confused between expected and unexpted exceptions. Based on the documentation, this file is used for unexpected errors during the runtime. LIke network interruption, ... and we use this file to display human friendly errors to the users with the ability to recover the situation ( recovered network ) instead of refresh the page. While we can track the errors using error reporting service like sentry. Correct me if I'm wrong?

[@satyabhangt]

Dude this makes me so happy! Thank you for caring ❤

[@motivation2code]

you are amazing Josh. Thank You

[@starmorph]

this is sweet thank you. would love to have those error messages in a toast notification... time to experiment

[@nirjoyhasanantor3149]

Can you tell us how can we access req object/context/headers in app directory that we accessed before using getServerSideProps in Next.Js

[@lacascadaobregon]

Maybe return them in getServerSidePropsb

[@GuilhermeSiebert]

Awesome content!

[@fiendsgaming7589]

How do i send error with status code from api?

[@aymenbachiri-yh2hd]

THank you so much josh

[@julianari8768]

If you don't want a redirect, you can just pop up something like a toast with a timer

[@LevyneTu]

Great video. Where does the error message toast on the bottom left come from?

[@yabuking84]

Why does error.tsx on APP Router doesnt work if "use client" is used on a component? It works if i removed the "use client". (error.tsx is "use client")

[@user-lb3wu9xi5g]

Amazing and helpful video broo; but I'm asking the extension that you use to calculate the size of imports in the vscode

[@microspacer]

Thank you for your content!

[@dedrunker]

Hey josh , how could yo remove the red box with the warning of error? everytime that i click there it show a part of my code
where the exception was throwed

[@terenceng3704]

Im also stuck on this, has anyone figured out how to fix this?

[@xenomorph80]

@@terenceng3704 This not be visible in production build.

[@ju5263]

Hi Josh !
I'm interested in knowing how you manage to keep explicit server error message in production mode as well, as I could'nt find any workaround.

[@hasst9261]

It doesn't work in production mode
You will not see errors as next js doesn't allow to show them

[@janikaikkonen6384]

I tried creating a custom error class, but I can’t access the custom error.name in error component. error.name is just always ’Error’. I’d like to give user different options depending on the error type, but with only error.message it gets quite messy 😢

[@nabiabdelkader9833]

Suggested solution (but it doesn't seem ideal to me)
1-create custom error class
#FetchException.ts
export const FetchExceptionMessage = "error when fetch data"
export default class FetchException extends Error {
constructor() {
super(FetchExceptionMessage);
this.name = 'FetchException'
}
}
#error.ts
const Error = ({error, reset}: { error: Error; reset: () => void }) => {
if (error.message === FetchExceptionMessage) return ()
else if (error.message === AuthExceptionMessage) return ()
return (unexpected error)
};
export default Error

[@galusmarcin87]

i dont know why but nextjs returns 200 status code when error occurs, why not 503?

[@ronhenly7936]

can i use the app router error handling in a component?

[@LaluIbnuHidayatullah]

can you share mote about handle "Error: Hydration failed because the initial UI does not match what was rendered on the server. " ?

[@andrepadez]

Can this also be implemented in a pages router? If not, i would consider migrating to app router just for this

[@edmilson8890]

Thank you my friend very nice content

[@yousuf4you]

How to remove left-bottom error notation button from nextjs default error?

[@aroojshahid5658]

can you please talk about prerender error on nextjs 13? i am having this error on my cart folder which consists of components and 1 page.tsx file

[@tabmax22]

does this work via the catch error when fetching data?

[@anuj7286]

Hey josh, what do you prefer new app directory or pages directory for new projects? I was using remix run its is also great

[@emmanuelezeagwula7436]

what's the difference with remix

[@anuj7286]

@@emmanuelezeagwula7436 Remix run is server side framework it performs better than next js.

[@joshtriedcoding]

definitely prefer the new app directory

[@andersbraathen1256]

Thank you, great video! Wouldn`it be easier to just put all the Auth error code on the error.ts page? Use session and show message since every error redirects to error page instead of putting AuthRequiredError on every page? Like: {!session && 'Please log in if you want to continue'}

[@Rinace]

Can I ask what snippets do you use?

[@1chbinamin]

At 4:32: what keybinding did you execute on the component for a window to popup with import suggestion?

[@jonathadeoliveiratargino1479]

ctrl + .

[@solimanfarag2845]

-1
I used google as an auth provider with nextjs and i deplyed the app but receive There is a problem with the server configuration. Check the server logs for more information. nextjs

[@Unknown-so7qv]

Error name is always "Error", so i cant make error.tsx dynamic based on error.name

[@juanfrancomartin5342]

I'm having the same issue =(

[@user-xu3lj1ej8d]

@@juanfrancomartin5342 we are all having the same problem xD

[@naman_dw]

can i use next 13 app directory with trpc?

[@nicolasribeirodossantos2760]

Josh, would you mind sharing your snippets extension? I find it very convenient for ts components

[@joshtriedcoding]

Hi for sure, it's a custom snippet and not an extension. I've covered that here: ua-cam.com/video/Dert_kpLWE0/v-deo.html

[@nicolasribeirodossantos2760]

@@joshtriedcoding ty

[@abdelkarimelalaoui1538]

thank you so mush bro

[@lostin8159]

Thank you

[@psyferinc.3573]

this was awesome

[@joshtriedcoding]

Cheers dude!

[@JokerNationYt]

please brush thank you !!

[@kidslovehistory-y8j]

Josh keep tried coding