Confusion about error.tsx vs global-error.tsx

[g1na1011]

Hi there! We are using Next.js App Router to develop a new architecture for our app. We are starting off with a pure static page that is fairly simple, no nested routes required. Can you help me explain why or when we would want both an error.tsx and a global-error.tsx page? Our error pages would have the same design, so we thought we can remove error.tsx and just keep global-error.tsx. To our surprise, using just global-error.tsx renders a blank white page when we throw a 500. Renaming that page back to error.tsx renders the expected page. Should we have both even though the designs are the same and we do not have a component-based error page?

thank you for your help!

[knarrff]

Hi @g1na1011

From what I read from here and here, you need both:

"An error.js boundary will not handle errors thrown in a layout.js component in the same segment because the error boundary is nested inside that layouts component.

• To handle errors for a specific layout, place an error.js file in the layouts parent segment.
• To handle errors within the root layout or template, use a variation of error.js called app/global-error.js. "

"The root app/error.js boundary does not catch errors thrown in the root app/layout.js or app/template.js component.

To specifically handle errors in these root components, use a variation of error.js called app/global-error.js located in the root app directory."

Which I understand as: global-error.js isn't used when error.js should be but isn't there.

[g1na1011]

@knarrff Thanks for your response and clarifying! I've read that previously, but thought that the since this app currently only has one route, app/layout.tsx, we can utilize global-error.tsx to catch the error instead of having both global-error.tsx and error.tsx under the app/ directory. I guess my confusion started by not fully understanding what "segments" mean.

In this case, do you think it still makes sense to have two error files with the same design? Thank you for your help!

[ksuraj112]

@g1na1011 The issue is you might not be adding and tags in the global-error.tsx file, that is why you were seeing blank white page. global-error.tsx is capable of handling all errors since its on top. error.tsx is just to prevent the layout styles from crashing while showing your custom fallback error page.