Jelajahi Sumber

debug: add ErrorReporter to catch and display SecurityError on iOS

neyrogovnarik 1 bulan lalu
induk
melakukan
c775a6de32
2 mengubah file dengan 42 tambahan dan 0 penghapusan
  1. 2 0
      frontend/src/app/layout.tsx
  2. 40 0
      frontend/src/components/ErrorReporter.tsx

+ 2 - 0
frontend/src/app/layout.tsx

@@ -3,6 +3,7 @@ import '@/styles/globals.css'
 import { AuthProvider } from '@/hooks/useAuth'
 import Header from '@/components/Header'
 import { ErrorBoundary } from '@/components/ErrorBoundary'
+import { ErrorReporter } from '@/components/ErrorReporter'
 
 export const metadata: Metadata = {
   title: 'PhotoPlaces — карта мест и студий для фотографии',
@@ -16,6 +17,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <ErrorBoundary>
           <AuthProvider>
             <Header />
+            <ErrorReporter />
             {children}
           </AuthProvider>
         </ErrorBoundary>

+ 40 - 0
frontend/src/components/ErrorReporter.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+export function ErrorReporter() {
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    const handler = (event: ErrorEvent) => {
+      setError(`${event.error?.name || 'Error'}: ${event.message}\n${event.error?.stack || '(no stack)'}`)
+    }
+    const rejectionHandler = (event: PromiseRejectionEvent) => {
+      const err = event.reason
+      setError(`Unhandled Rejection: ${err?.name || 'Error'}: ${err?.message || String(err)}\n${err?.stack || '(no stack)'}`)
+    }
+
+    window.addEventListener('error', handler)
+    window.addEventListener('unhandledrejection', rejectionHandler)
+
+    return () => {
+      window.removeEventListener('error', handler)
+      window.removeEventListener('unhandledrejection', rejectionHandler)
+    }
+  }, [])
+
+  if (!error) return null
+
+  return (
+    <div className="fixed bottom-4 left-4 right-4 z-50 max-h-[50vh] overflow-auto rounded-lg bg-red-900/90 p-4 text-white">
+      <p className="mb-2 font-bold">Ошибка:</p>
+      <pre className="whitespace-pre-wrap text-xs">{error}</pre>
+      <button
+        onClick={() => setError(null)}
+        className="mt-2 rounded bg-white/20 px-3 py-1 text-sm hover:bg-white/30"
+      >
+        Закрыть
+      </button>
+    </div>
+  )
+}