fix: show error details in preview environments

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

@@ -4,11 +4,17 @@ import { useTranslations } from 'next-intl';
 
 import Button from '#site/components/Common/Button';
 import GlowingBackdropLayout from '#site/layouts/GlowingBackdrop';
+import { SHOW_ERROR_DETAILS } from '#site/next.constants.mjs';
 
 import type { FC } from 'react';
 
-const ErrorPage: FC<{ error: Error }> = () => {
+type ErrorPageProps = {
+  error: Error & { digest?: string };
+};
+
+const ErrorPage: FC<ErrorPageProps> = ({ error }) => {
   const t = useTranslations();
+  const hasErrorDetails = Boolean(error.message || error.digest);
 
   return (
     <GlowingBackdropLayout kind="default">
@@ -22,6 +28,21 @@ const ErrorPage: FC<{ error: Error }> = () => {
         {t('layouts.error.internalServerError.description')}
       </p>
 
+      {SHOW_ERROR_DETAILS && hasErrorDetails && (
+        <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('layouts.error.details')}
+          </summary>
+
+          <pre className="mt-3 overflow-x-auto font-mono text-xs leading-6 break-words whitespace-pre-wrap">
+            {error.message}
+            {error.digest
+              ? `${error.message ? '\n' : ''}digest: ${error.digest}`
+              : ''}
+          </pre>
+        </details>
+      )}
+
       <Button href="/">{t('layouts.error.backToHome')}</Button>
     </GlowingBackdropLayout>
   );

apps/site/next.constants.mjs

@@ -14,6 +14,18 @@ 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 = 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

@@ -0,0 +1,77 @@
+import assert from 'node:assert/strict';
+import { describe, it } from 'node:test';
+
+import { render, screen } from '@testing-library/react';
+
+describe('ErrorPage', () => {
+  const setupErrorPage = async (t, showErrorDetails, suffix = '') => {
+    t.mock.module('#site/components/Common/Button', {
+      defaultExport: ({ children, href }) => <a href={href}>{children}</a>,
+    });
+
+    t.mock.module('#site/layouts/GlowingBackdrop', {
+      defaultExport: ({ children }) => <main>{children}</main>,
+    });
+
+    t.mock.module('#site/next.constants.mjs', {
+      namedExports: {
+        SHOW_ERROR_DETAILS: showErrorDetails,
+      },
+    });
+
+    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
+        error={Object.assign(new Error('Preview deployment failed'), {
+          digest: 'abc123',
+        })}
+      />
+    );
+
+    assert.equal(
+      screen.getByRole('heading').textContent,
+      'layouts.error.internalServerError.title'
+    );
+    assert.equal(
+      screen.getByRole('link').textContent,
+      'layouts.error.backToHome'
+    );
+    assert.equal(
+      screen.getByText('layouts.error.details').textContent,
+      'layouts.error.details'
+    );
+    assert.match(
+      screen.getByText(/Preview deployment failed/).textContent,
+      /Preview deployment failed/
+    );
+    assert.match(
+      screen.getByText(/digest: abc123/i).textContent,
+      /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": {