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.
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?
@@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.
@@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.
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."
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?
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?
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.
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 😢
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")
-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
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'}
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
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.
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?
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
@@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.
@@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.
Thx@@nabiabdelkader9833
Thanks, I'm struggled at ErrorBoundary at first, no idea that nextjs handle it automatically. 😂
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."
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?
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?
yeah I am also interested in this. Did you figure it out?
@@thePINGUSTAR I didn't find solution for this 😢
I learned something. Thanks Josh - Big fan of you.
Dude this makes me so happy! Thank you for caring ❤
this is sweet thank you. would love to have those error messages in a toast notification... time to experiment
Can you tell us how can we access req object/context/headers in app directory that we accessed before using getServerSideProps in Next.Js
Maybe return them in getServerSidePropsb
How to access this name property inside of error.tsx template? I get "Error" value every time.
you are amazing Josh. Thank You
Amazing and helpful video broo; but I'm asking the extension that you use to calculate the size of imports in the vscode
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.
If you don't want a redirect, you can just pop up something like a toast with a timer
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 😢
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
Great video. Where does the error message toast on the bottom left come from?
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")
can you share mote about handle "Error: Hydration failed because the initial UI does not match what was rendered on the server. " ?
i dont know why but nextjs returns 200 status code when error occurs, why not 503?
How do i send error with status code from api?
-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
Can this also be implemented in a pages router? If not, i would consider migrating to app router just for this
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
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'}
Awesome content!
can i use the app router error handling in a component?
THank you so much josh
Can I ask what snippets do you use?
How to remove left-bottom error notation button from nextjs default error?
does this work via the catch error when fetching data?
Error name is always "Error", so i cant make error.tsx dynamic based on error.name
I'm having the same issue =(
@@juanfrancomartin5342 we are all having the same problem xD
It doesn't work in production mode
You will not see errors as next js doesn't allow to show them
Hey josh, what do you prefer new app directory or pages directory for new projects? I was using remix run its is also great
what's the difference with remix
@@emmanuelezeagwula7436 Remix run is server side framework it performs better than next js.
definitely prefer the new app directory
Thank you for your content!
Josh, would you mind sharing your snippets extension? I find it very convenient for ts components
Hi for sure, it's a custom snippet and not an extension. I've covered that here: th-cam.com/video/Dert_kpLWE0/w-d-xo.html
@@joshtriedcoding ty
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
Im also stuck on this, has anyone figured out how to fix this?
@@terenceng3704 This not be visible in production build.
can i use next 13 app directory with trpc?
Thank you my friend very nice content
this was awesome
Cheers dude!
Thank you
thank you so mush bro
please brush thank you !!
Josh keep tried coding