Ver Fonte

debug: add ErrorBoundary around MapView to catch iOS security error

neyrogovnarik há 1 mês atrás
pai
commit
02c5c8ec39
1 ficheiros alterados com 29 adições e 2 exclusões
  1. 29 2
      frontend/src/app/page.tsx

+ 29 - 2
frontend/src/app/page.tsx

@@ -1,13 +1,40 @@
 'use client'
 
 import dynamic from 'next/dynamic'
+import { Component, type ReactNode } from 'react'
 
-const MapView = dynamic(() => import('@/components/MapView'), { ssr: false })
+const MapViewInner = dynamic(() => import('@/components/MapView'), { ssr: false })
+
+interface State {
+  hasError: boolean
+  error: string
+}
+
+class MapErrorBoundary extends Component<{ children: ReactNode }, State> {
+  state: State = { hasError: false, error: '' }
+
+  componentDidCatch(error: Error) {
+    this.setState({ hasError: true, error: `${error.name}: ${error.message}\n${error.stack}` })
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="flex h-screen w-screen items-center justify-center bg-[#0f172a] p-8 text-white">
+          <pre className="whitespace-pre-wrap text-sm text-red-400">{this.state.error}</pre>
+        </div>
+      )
+    }
+    return this.props.children
+  }
+}
 
 export default function HomePage() {
   return (
     <main className="relative isolate h-screen w-screen overflow-hidden">
-      <MapView />
+      <MapErrorBoundary>
+        <MapViewInner />
+      </MapErrorBoundary>
     </main>
   )
 }