Skip to content

fix: show error details in preview environments#8752

Open
ZeroPointSix wants to merge 4 commits intonodejs:mainfrom
ZeroPointSix:fix-preview-error-details
Open

fix: show error details in preview environments#8752
ZeroPointSix wants to merge 4 commits intonodejs:mainfrom
ZeroPointSix:fix-preview-error-details

Conversation

@ZeroPointSix
Copy link

@ZeroPointSix ZeroPointSix commented Mar 22, 2026

Fixes #7464

This updates the localized error page so local development and Vercel preview deployments can surface the underlying error details, while production keeps the generic 500 page.

This PR is intentionally small and focused:

  • show the error message and digest only in development or preview environments
  • keep production behavior unchanged
  • expose the preview environment to client-side code via NEXT_PUBLIC_VERCEL_ENV
  • use a dedicated layouts.error.details key, added only to en.json so other locales continue to fall back to the default message dictionary
  • add unit tests for both the visible-details and hidden-details paths

@ZeroPointSix ZeroPointSix requested a review from a team as a code owner March 22, 2026 10:22
Copilot AI review requested due to automatic review settings March 22, 2026 10:22
@vercel
Copy link

vercel bot commented Mar 22, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
nodejs-org Ready Ready Preview Mar 23, 2026 2:34am

Request Review

@github-actions
Copy link
Contributor

👋 Codeowner Review Request

The following codeowners have been identified for the changed files:

Team reviewers: @nodejs/nodejs-website

Please review the changes when you have a chance. Thank you! 🙏

Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Updates the localized Next.js App Router error page to optionally reveal underlying error information in non-production contexts, addressing missing diagnostics in Vercel Preview and local development (Fixes #7464).

Changes:

  • Add a SHOW_ERROR_DETAILS environment-derived flag to gate error detail rendering.
  • Render error message and digest in a <details> block on the localized 500 error page when the flag is enabled.
  • Add a unit test to cover the “details visible” rendering path.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.

File Description
apps/site/tests/errorPage.test.jsx Adds a unit test asserting that technical details render when SHOW_ERROR_DETAILS is enabled.
apps/site/next.constants.mjs Introduces SHOW_ERROR_DETAILS based on NODE_ENV and VERCEL_ENV.
apps/site/app/[locale]/error.tsx Shows error message/digest in preview/dev via a gated <details> section.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@ZeroPointSix ZeroPointSix requested a review from a team as a code owner March 22, 2026 11:17
@github-actions
Copy link
Contributor

Note

Your Pull Request seems to be updating Translations of the Node.js Website.

Whilst we appreciate your intent; Any Translation update should be done through our Crowdin Project.
We recommend giving a read on our Translation Guidelines.

Thank you!

@ZeroPointSix
Copy link
Author

I pushed a follow-up commit that addresses the preview/client environment handling, adds a dedicated error-page details key, and covers the hidden-details path in tests.

I also noticed the repository policy requires the github_actions:pull-request label to trigger the full PR checks. I don't have permission to add labels on the upstream PR from the fork side, so could a maintainer please add it when convenient? Thanks!

@ZeroPointSix
Copy link
Author

I pushed a small follow-up to align with the translation guidelines: the new layouts.error.details key now only lives in packages/i18n/src/locales/en.json, and other locales fall back to English via the existing dictionary merge in apps/site/i18n.tsx. That keeps the PR focused on the preview-error fix while still using a dedicated error-page key.

basePath: BASE_PATH,
// Vercel/Next.js Image Optimization Settings
images: getImagesConfig(),
env: {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change isn't necessary


const ErrorPage: FC<ErrorPageProps> = ({ error }) => {
const t = useTranslations();
const errorDetails = [
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we not make an array? I think simply rendering:

{error.message}
{error.digest && `digest: ${error.digest}`}

Would probably be cleaner...

@ZeroPointSix
Copy link
Author

Follow-up on the latest review feedback:\n\n- removed the unnecessary env exposure from apps/site/next.config.mjs\n- simplified the error details rendering in apps/site/app/[locale]/error.tsx so it no longer builds an intermediate array\n\nThe dedicated layouts.error.details key and the hidden-details test coverage from the previous follow-up commits are still in place.

Comment on lines +17 to +27
/**
* Public-facing Vercel environment, safe to use in client-side code.
*/
export const PUBLIC_VERCEL_ENV =
process.env.NEXT_PUBLIC_VERCEL_ENV || VERCEL_ENV;

/**
* Error details should only be exposed in local development or Vercel preview
* deployments, never in production.
*/
export const SHOW_ERROR_DETAILS = IS_DEV_ENV || PUBLIC_VERCEL_ENV === 'preview';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need this variables, or can we just always show error details?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

No indication of cause when dev deployment is broken

4 participants