fix: expose preview error details to clients

Author: ZeroPointSix

apps/site/app/[locale]/error.tsx

@@ -36,7 +36,7 @@ const ErrorPage: FC<ErrorPageProps> = ({ error }) => {
       {SHOW_ERROR_DETAILS && errorDetails && (
         <details className="max-w-2xl rounded-lg border border-neutral-300 bg-neutral-950/90 px-4 py-3 text-left text-neutral-50">
           <summary className="cursor-pointer font-medium">
-            {t('components.downloadReleasesTable.details')}
+            {t('layouts.error.details')}
           </summary>
 
           <pre className="mt-3 overflow-x-auto font-mono text-xs leading-6 break-words whitespace-pre-wrap">

apps/site/next.config.mjs

@@ -29,6 +29,10 @@ const nextConfig = {
   basePath: BASE_PATH,
   // Vercel/Next.js Image Optimization Settings
   images: getImagesConfig(),
+  env: {
+    NEXT_PUBLIC_VERCEL_ENV:
+      process.env.NEXT_PUBLIC_VERCEL_ENV || process.env.VERCEL_ENV,
+  },
   serverExternalPackages: ['twoslash'],
   outputFileTracingIncludes: {
     // Twoslash needs TypeScript declarations to function, and, by default, Next.js

apps/site/next.constants.mjs

@@ -14,12 +14,17 @@ export const IS_DEV_ENV = process.env.NODE_ENV === 'development';
  */
 export const VERCEL_ENV = process.env.VERCEL_ENV || undefined;
 
+/**
+ * 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 =
-  process.env.NODE_ENV === 'development' || VERCEL_ENV === 'preview';
+export const SHOW_ERROR_DETAILS = IS_DEV_ENV || PUBLIC_VERCEL_ENV === 'preview';
 
 /**
  * This is used for telling Next.js to do a Static Export Build of the Website

apps/site/tests/errorPage.test.jsx

@@ -4,7 +4,7 @@ import { describe, it } from 'node:test';
 import { render, screen } from '@testing-library/react';
 
 describe('ErrorPage', () => {
-  it('renders technical details in preview environments', async t => {
+  const setupErrorPage = async (t, showErrorDetails, suffix = '') => {
     t.mock.module('#site/components/Common/Button', {
       defaultExport: ({ children, href }) => <a href={href}>{children}</a>,
     });
@@ -15,11 +15,15 @@ describe('ErrorPage', () => {
 
     t.mock.module('#site/next.constants.mjs', {
       namedExports: {
-        SHOW_ERROR_DETAILS: true,
+        SHOW_ERROR_DETAILS: showErrorDetails,
       },
     });
 
-    const { default: ErrorPage } = await import('../app/[locale]/error.tsx');
+    return import(`../app/[locale]/error.tsx${suffix}`);
+  };
+
+  it('renders technical details in preview environments', async t => {
+    const { default: ErrorPage } = await setupErrorPage(t, true);
 
     render(
       <ErrorPage
@@ -38,8 +42,8 @@ describe('ErrorPage', () => {
       'layouts.error.backToHome'
     );
     assert.equal(
-      screen.getByText('components.downloadReleasesTable.details').textContent,
-      'components.downloadReleasesTable.details'
+      screen.getByText('layouts.error.details').textContent,
+      'layouts.error.details'
     );
     assert.match(
       screen.getByText(/Preview deployment failed/).textContent,
@@ -50,4 +54,24 @@ describe('ErrorPage', () => {
       /digest: abc123/i
     );
   });
+
+  it('hides technical details when the flag is disabled', async t => {
+    const { default: ErrorPage } = await setupErrorPage(
+      t,
+      false,
+      '?show-error-details-disabled'
+    );
+
+    render(
+      <ErrorPage
+        error={Object.assign(new Error('Production should stay generic'), {
+          digest: 'hidden123',
+        })}
+      />
+    );
+
+    assert.equal(screen.queryByText('layouts.error.details'), null);
+    assert.equal(screen.queryByText(/Production should stay generic/), null);
+    assert.equal(screen.queryByText(/digest: hidden123/i), null);
+  });
 });

packages/i18n/src/locales/en.json

@@ -370,6 +370,7 @@
         "title": "Internal Server Error",
         "description": "This page has thrown a non-recoverable error."
       },
+      "details": "Details",
       "backToHome": "Back to Home"
     },
     "download": {

packages/i18n/src/locales/es.json

@@ -275,6 +275,7 @@
         "title": "Error interno del servidor",
         "description": "Esta página ha generado un error no recuperable."
       },
+      "details": "Detalles",
       "backToHome": "Volver al inicio"
     },
     "download": {

packages/i18n/src/locales/fr.json

@@ -370,6 +370,7 @@
         "title": "Erreur interne du serveur",
         "description": "Cette page a généré une erreur irrécupérable."
       },
+      "details": "Détails",
       "backToHome": "Retourner à l'accueil"
     },
     "download": {

packages/i18n/src/locales/id.json

@@ -360,6 +360,7 @@
         "title": "Kesalahan Server Internal",
         "description": "Halaman ini mengalami error yang tidak dapat diperbaiki."
       },
+      "details": "Rincian",
       "backToHome": "Kembali ke Beranda"
     },
     "download": {

packages/i18n/src/locales/ja.json

@@ -370,6 +370,7 @@
         "title": "内部サーバーエラー",
         "description": "このページで回復不可能なエラーが発生しました。"
       },
+      "details": "詳細",
       "backToHome": "ホームに戻る"
     },
     "download": {

packages/i18n/src/locales/ko.json

@@ -249,6 +249,7 @@
         "title": "Internal Server Error",
         "description": "이 페이지에서 복구할 수 없는 오류가 발생했습니다."
       },
+      "details": "세부정보",
       "backToHome": "홈으로 돌아가기"
     },
     "download": {