From 391eeb9bf93ce7fc490845d9d5fd8d1bdccd5fb2 Mon Sep 17 00:00:00 2001
From: SkateSpots <skatespots>
Date: Fri, 2 Oct 2026 10:52:18 +0700
Subject: [PATCH] fix(ux): recoverable route error screen + smoke-test
 shop/spot routes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- The per-route 'slammed' screen only offered 'Go back', so a stale-chunk
  failure after a deploy trapped the user. Add a primary 'Reload' that clears
  the lazyWithRetry session flag and does a fresh reload.
- Smoke test now boots /shop/:pubkey/:identifier, /spot/…, /event/…, /crew/…
  so a broken detail route can't ship again.
- Investigation note: no reproducible slam across 11 live shops; the report
  matched a transient chunk miss from two rapid deploys.
---
 scripts/smoke-test.mjs                |  4 ++++
 src/components/RouteErrorBoundary.tsx | 31 +++++++++++++++++++++------
 2 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/scripts/smoke-test.mjs b/scripts/smoke-test.mjs
index 6b3df11..aefe887 100755
--- a/scripts/smoke-test.mjs
+++ b/scripts/smoke-test.mjs
@@ -148,6 +148,10 @@ const ROUTES = [
   '/card',
   '/card/npub1yrnuj56rnen08zp2h9h7p74ghgjx6ma39spmpj6w9hzxywutevsst7k5cx',
   '/verify/notarealnaddr',
+  '/shop/abc/def',
+  '/spot/abc/def',
+  '/event/abc/def',
+  '/crew/abc/def',
   '/messages/group/abc123',
 ];
 const problems = [];
diff --git a/src/components/RouteErrorBoundary.tsx b/src/components/RouteErrorBoundary.tsx
index b145630..322ad0e 100644
--- a/src/components/RouteErrorBoundary.tsx
+++ b/src/components/RouteErrorBoundary.tsx
@@ -16,6 +16,15 @@ import { ErrorBoundary } from '@/components/ErrorBoundary';
 export function RouteErrorBoundary({ children }: { children: React.ReactNode }) {
   const location = useLocation();
 
+  // After a deploy an already-open tab can hold a stale module graph, so a lazy
+  // route import 404s. `lazyWithRetry` reloads once; if it still fails the
+  // boundary is shown — so give the user a real way out: clear the "already
+  // reloaded" flag and do a fresh reload (fetching the new index + chunks).
+  const hardReload = () => {
+    try { sessionStorage.removeItem('skatespots:chunk-reload'); } catch { /* ignore */ }
+    window.location.reload();
+  };
+
   return (
     <ErrorBoundary
       key={location.pathname}
@@ -31,15 +40,23 @@ export function RouteErrorBoundary({ children }: { children: React.ReactNode })
               </h2>
               <p className="text-sm text-gray-400">
                 Something on this screen tripped up. Your account and data are safe.
-                Head back and try again.
+                Usually a quick reload sorts it out.
               </p>
             </div>
-            <button
-              onClick={() => window.history.back()}
-              className="w-full px-4 py-3 rounded-full font-black uppercase bg-[#ff0040] text-white hover:bg-[#ff0040]/90 transition-colors"
-            >
-              Go back
-            </button>
+            <div className="flex flex-col sm:flex-row gap-2">
+              <button
+                onClick={hardReload}
+                className="flex-1 px-4 py-3 rounded-full font-black uppercase bg-[#ff0040] text-white hover:bg-[#ff0040]/90 transition-colors"
+              >
+                Reload
+              </button>
+              <button
+                onClick={() => window.history.back()}
+                className="flex-1 px-4 py-3 rounded-full font-black uppercase bg-white/5 text-gray-300 border border-white/10 hover:bg-white/10 transition-colors"
+              >
+                Go back
+              </button>
+            </div>
           </div>
         </div>
       }