Show a crash outside a page instead of a white screen

Moving between pages sometimes left a white screen until a reload: an
error outside the page's own error boundary (the layout, the sign-in
gate) unmounted the whole app. An error boundary now wraps the whole
app, shows the error's name and message, and tries again when the route
changes.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/main.tsx

@@ -3,9 +3,10 @@ import { createRoot } from 'react-dom/client'
 import { ClerkProvider } from '@clerk/react'
 import { enUS, idID } from '@clerk/localizations'
 import { MutationCache, QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { BrowserRouter } from 'react-router-dom'
+import { BrowserRouter, useLocation } from 'react-router-dom'
 import { EngineError } from './api/client'
 import App from './App'
+import { ErrorBoundary } from './components/ErrorBoundary'
 import { forgetReads } from './express/results'
 import { useLang } from './i18n'
 import './styles/mockup.css'
@@ -40,6 +41,13 @@ const clerkAppearance = {
   variables: { colorPrimary: '#1570ef', colorText: '#101828', fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif", borderRadius: '12px' },
 }
 
+// A crash outside a page (the layout, the sign-in gate) would otherwise unmount everything and leave
+// a white page until a reload; moving to another page tries again.
+function AppBoundary() {
+  const { pathname } = useLocation()
+  return <ErrorBoundary resetKey={pathname} className="card app-crash"><App /></ErrorBoundary>
+}
+
 // Clerk's own sign-in and organization screens follow the app language.
 function Root() {
   const lang = useLang()
@@ -47,7 +55,7 @@ function Root() {
     <ClerkProvider publishableKey={clerkPubKey} afterSignOutUrl="/" localization={lang === 'id' ? idID : enUS} appearance={clerkAppearance}>
       <QueryClientProvider client={queryClient}>
         <BrowserRouter>
-          <App />
+          <AppBoundary />
         </BrowserRouter>
       </QueryClientProvider>
     </ClerkProvider>