Next.js Discord

Discord Forum

what is the difference between global-error.tsx and error.tsx

Answered
American black bear posted this in #help-forum
Open in Discord
American black bearOP
My app for some reason is returning 500 on production. I want to debug and try to understand why this is happening, so after reading the next.js docs, I saw these two different error pages. Which one should I use for this case?
Answered by LuisLl
error.tsx will only catch the unhandled exception that happened under the root layout, since it’s wrapping children, it can also be places per route segment to have more granular control.

global-error.tsx will help you catch unhandled errors that happen in the root layout, since it’s going to replace your root layout, and because of this, it needs to have the <html> and <body> tags, like a root layout would.

So, figure out where the exception is being thrown, if it’s inside a page, error.tsx is enough, it’s inside the root layout, you’ll need global-error.tsx (not very likely)
View full answer

1 Reply

error.tsx will only catch the unhandled exception that happened under the root layout, since it’s wrapping children, it can also be places per route segment to have more granular control.

global-error.tsx will help you catch unhandled errors that happen in the root layout, since it’s going to replace your root layout, and because of this, it needs to have the <html> and <body> tags, like a root layout would.

So, figure out where the exception is being thrown, if it’s inside a page, error.tsx is enough, it’s inside the root layout, you’ll need global-error.tsx (not very likely)
Answer