The app has app/error.tsx and app/not-found.tsx, but no app/global-error.tsx.
error.tsx only catches errors thrown inside the layout it sits under. An error thrown in the root layout itself, or in the root error boundary, is not caught by it. Next.js falls back to its built-in error page, which is unstyled, unbranded, and in production says nothing more useful than that something went wrong.
For a site people are arriving at from shared links, that is the worst possible first impression, and we would not see it in local development because the dev overlay hides it.
Suggested fix
Add app/global-error.tsx. It must render its own <html> and <body>, since it replaces the root layout. Keep it dependency-free and inline-styled, because whatever broke may be the thing that would have loaded the styles.
Give it a link back to the home page and a way to report the case.
Acceptance
The app has
app/error.tsxandapp/not-found.tsx, but noapp/global-error.tsx.error.tsxonly catches errors thrown inside the layout it sits under. An error thrown in the root layout itself, or in the root error boundary, is not caught by it. Next.js falls back to its built-in error page, which is unstyled, unbranded, and in production says nothing more useful than that something went wrong.For a site people are arriving at from shared links, that is the worst possible first impression, and we would not see it in local development because the dev overlay hides it.
Suggested fix
Add
app/global-error.tsx. It must render its own<html>and<body>, since it replaces the root layout. Keep it dependency-free and inline-styled, because whatever broke may be the thing that would have loaded the styles.Give it a link back to the home page and a way to report the case.
Acceptance
app/global-error.tsxexists and renders its own html and body