Spec Drift: Missing /500 Server Error Route

Version identified: v0.1.59
Status: Pending fix

Overview

The myProp application specification requires a dedicated static server error page accessible at the /500 route. This page is intended to be shown whenever the application encounters a server-side error — specifically when the getThemes function receives a non-200 HTTP response from the theme endpoint and calls router.push('/500').

As of v0.1.59, this route does not exist in the application.

---

What the Spec Requires

• A dedicated GET /500 route rendered as a static server error page.
• The page is navigated to programmatically via router.push('/500') in the getThemes function when the theme API returns a non-200 status.
• The page should clearly communicate that a server-side error has occurred, distinct from a 404 Not Found page.

---

Current Behaviour

The application currently uses Next.js error boundaries (src/app/error.tsx and src/app/global-error.tsx) for runtime error handling. While these cover component-level and global errors respectively, they do not handle direct navigation to the /500 path.

Navigating directly to /500 (whether via browser URL bar or router.push('/500')) currently falls through to the global 404 page — giving users a misleading "page not found" response when the actual problem is a server error.

---

Affected Code Path

getThemes()
  └─ fetch theme endpoint
       └─ non-200 response received
            └─ router.push('/500')   ← navigates to a missing route
                 └─ fallback: global 404 page shown  ← incorrect

---

Suggested Fix

Either of the following approaches will resolve the spec drift:

Option A — Create a dedicated /500 page (recommended)

Create the file src/app/500/page.tsx with a static server error page component:

// src/app/500/page.tsx
export default function ServerErrorPage() {
  return (
    <main>
      <h1>500 — Server Error</h1>
      <p>Something went wrong on our end. Please try again later.</p>
    </main>
  );
}

This ensures /500 resolves to a clear, branded error page consistent with the rest of the application.

Option B — Add a redirect from /500

Add a redirect in next.config.js (or equivalent) to forward /500 to an appropriate existing error route:

// next.config.js
module.exports = {
  async redirects() {
    return [
      {
        source: '/500',
        destination: '/error',   // replace with the appropriate route
        permanent: false,
      },
    ];
  },
};

---

Why This Matters

Showing a 404 page in response to a server error creates confusion for end users and makes debugging harder. A correct 500 page:

• Accurately communicates the nature of the problem (server-side, not missing content).
• Allows the agency branding/theme to still be applied (if available).
• Gives users a clear next step (e.g. retry, contact support).
• Ensures programmatic navigation to /500 behaves as the spec intends.

---

Related Files

File	Role
src/app/error.tsx	Next.js component-level error boundary
src/app/global-error.tsx	Next.js global error boundary
src/app/500/page.tsx	Missing — needs to be created