From e91d88e9ec0a67621a3940ab7e19451846a6a1b4 Mon Sep 17 00:00:00 2001
From: Maher El Gamil <maherelgamil@gmail.com>
Date: Thu, 28 May 2026 05:08:17 +0300
Subject: [PATCH] fix(error-page): render gracefully when panel prop is missing

The error page assumed `panel` was always provided, but a 500 thrown
outside the panel middleware stack (or before `RenderMonorailErrorPages`
injects the panel data) arrives with `panel === undefined`. The page then
crashed at `panel.translations`, masking the original server error with a
React render error.

Make `panel` optional, fall back to safe defaults, and render a standalone
centered layout when the panel shell can't be used.
---
 resources/js/pages/error.tsx | 43 ++++++++++++++++++++++--------------
 1 file changed, 26 insertions(+), 17 deletions(-)

diff --git a/resources/js/pages/error.tsx b/resources/js/pages/error.tsx
index 9b32769..8297595 100644
--- a/resources/js/pages/error.tsx
+++ b/resources/js/pages/error.tsx
@@ -19,7 +19,7 @@ type PanelProp = {
 };
 
 type Props = {
-    panel: PanelProp;
+    panel?: PanelProp;
     status: number;
     title: string;
     message: string;
@@ -32,24 +32,33 @@ function iconFor(status: number) {
 }
 
 export default function ErrorPage({ panel, status, title, message }: Props) {
-    const __ = create__(panel.translations ?? {});
+    const __ = create__(panel?.translations ?? {});
     const Icon = iconFor(status);
+    const homeHref = panel?.path ? `/${panel.path}` : '/';
 
-    return (
-        <PanelShell panel={panel}>
-            <div className="flex min-h-[60vh] flex-col items-center justify-center text-center">
-                <div className="rounded-full bg-muted p-4">
-                    <Icon className="size-10 text-muted-foreground" />
-                </div>
-                <p className="mt-6 font-mono text-sm text-muted-foreground">{status}</p>
-                <h1 className="mt-2 text-2xl font-semibold tracking-tight">{title}</h1>
-                <p className="mt-2 max-w-md text-sm text-muted-foreground">{message}</p>
-                <div className="mt-6 flex items-center gap-2">
-                    <Button variant="ghost" asChild>
-                        <Link href={`/${panel.path}`}>{__('Back to dashboard')}</Link>
-                    </Button>
-                </div>
+    const body = (
+        <div className="flex min-h-[60vh] flex-col items-center justify-center text-center">
+            <div className="rounded-full bg-muted p-4">
+                <Icon className="size-10 text-muted-foreground" />
             </div>
-        </PanelShell>
+            <p className="mt-6 font-mono text-sm text-muted-foreground">{status}</p>
+            <h1 className="mt-2 text-2xl font-semibold tracking-tight">{title}</h1>
+            <p className="mt-2 max-w-md text-sm text-muted-foreground">{message}</p>
+            <div className="mt-6 flex items-center gap-2">
+                <Button variant="ghost" asChild>
+                    <Link href={homeHref}>{__('Back to dashboard')}</Link>
+                </Button>
+            </div>
+        </div>
     );
+
+    if (!panel) {
+        return (
+            <div className="flex min-h-screen items-center justify-center bg-background p-6">
+                {body}
+            </div>
+        );
+    }
+
+    return <PanelShell panel={panel}>{body}</PanelShell>;
 }