fix: show error details in preview environments

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

@@ -4,11 +4,22 @@ 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 errorDetails = [
+    error.message,
+    error.digest && `digest: ${error.digest}`,
+  ]
+    .filter(Boolean)
+    .join('\n');
 
   return (
     <GlowingBackdropLayout kind="default">
@@ -22,6 +33,18 @@ const ErrorPage: FC<{ error: Error }> = () => {
         {t('layouts.error.internalServerError.description')}
       </p>
 
+      {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')}
+          </summary>
+
+          <pre className="mt-3 overflow-x-auto font-mono text-xs leading-6 break-words whitespace-pre-wrap">
+            {errorDetails}
+          </pre>
+        </details>
+      )}
+
       <Button href="/">{t('layouts.error.backToHome')}</Button>
     </GlowingBackdropLayout>
   );

apps/site/next.constants.mjs

@@ -14,6 +14,13 @@ export const IS_DEV_ENV = process.env.NODE_ENV === 'development';
  */
 export const VERCEL_ENV = process.env.VERCEL_ENV || undefined;
 
+/**
+ * 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';
+
 /**
  * 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,53 @@
+import assert from 'node:assert/strict';
+import { describe, it } from 'node:test';
+
+import { render, screen } from '@testing-library/react';
+
+describe('ErrorPage', () => {
+  it('renders technical details in preview environments', async t => {
+    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: true,
+      },
+    });
+
+    const { default: ErrorPage } = await import('../app/[locale]/error.tsx');
+
+    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('components.downloadReleasesTable.details').textContent,
+      'components.downloadReleasesTable.details'
+    );
+    assert.match(
+      screen.getByText(/Preview deployment failed/).textContent,
+      /Preview deployment failed/
+    );
+    assert.match(
+      screen.getByText(/digest: abc123/i).textContent,
+      /digest: abc123/i
+    );
+  });
+});