From 41ead01e0213c4df5615940f02ef00b6459234cd Mon Sep 17 00:00:00 2001
From: aramesh-site deploy <deploy@aramesh-site.local>
Date: Sat, 3 Oct 2026 08:38:07 +0000
Subject: [PATCH] =?UTF-8?q?fix(map):=20=D9=85=D8=B1=D8=B2=20=D8=AE=D8=B7?=
 =?UTF-8?q?=D8=A7=DB=8C=20=D9=86=D9=82=D8=B4=D9=87=20=E2=80=94=20=D8=AA?=
 =?UTF-8?q?=D8=A8=D9=90=20=D9=82=D8=AF=DB=8C=D9=85=DB=8C=20=D9=BE=D8=B3=20?=
 =?UTF-8?q?=D8=A7=D8=B2=20=D8=A7=D8=B3=D8=AA=D9=82=D8=B1=D8=A7=D8=B1=20?=
 =?UTF-8?q?=D8=A8=D9=87=E2=80=8C=D8=AC=D8=A7=DB=8C=20=D9=85=D8=B1=DA=AF=20?=
 =?UTF-8?q?=D8=A8=DB=8C=E2=80=8C=D8=B5=D8=AF=D8=A7=DB=8C=20=D9=86=D9=82?=
 =?UTF-8?q?=D8=B4=D9=87=D8=8C=20=D8=AF=DA=A9=D9=85=D9=87=D9=94=20=D8=A8?=
 =?UTF-8?q?=D8=A7=D8=B1=DA=AF=DB=8C=D8=B1=DB=8C=20=D8=AF=D9=88=D8=A8=D8=A7?=
 =?UTF-8?q?=D8=B1=D9=87=20=D9=85=DB=8C=E2=80=8C=DA=AF=DB=8C=D8=B1=D8=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/map/LazyMaps.tsx | 52 ++++++++++++++++++++++++++++++-----
 1 file changed, 45 insertions(+), 7 deletions(-)

diff --git a/frontend/src/map/LazyMaps.tsx b/frontend/src/map/LazyMaps.tsx
index c2480c3..2d4bd94 100644
--- a/frontend/src/map/LazyMaps.tsx
+++ b/frontend/src/map/LazyMaps.tsx
@@ -1,4 +1,5 @@
-import { lazy, Suspense } from 'react'
+import { Component, lazy, Suspense } from 'react'
+import type { ReactNode } from 'react'
 import type { ProjectsMapAllProps } from './ProjectsMapAll'
 import type { ProjectsMapSingleProps } from './ProjectsMapSingle'
 
@@ -17,18 +18,55 @@ function MapSkeleton({ className = '' }: { className?: string }) {
   return <div className={`animate-pulse rounded-3xl border border-ivory/10 bg-char/50 ${className}`} />
 }
 
+/**
+ * مرز خطای نقشه — تبِ باز از پیش از استقرار، تکه‌های قدیمی را درخواست می‌کند
+ * که دیگر وجود ندارند (۴۰۴) و نقشه بی‌صدا می‌میرد. این مرز خطا را می‌گیرد و
+ * بارگیری دوبارهٔ کامل صفحه را پیشنهاد می‌دهد که تازه‌ترین نسخه را می‌آورد.
+ */
+class MapErrorBoundary extends Component<{ children: ReactNode; className?: string }, { failed: boolean }> {
+  state = { failed: false }
+  static getDerivedStateFromError() {
+    return { failed: true }
+  }
+  render() {
+    if (this.state.failed) {
+      return (
+        <div
+          className={`flex flex-col items-center justify-center gap-3 rounded-3xl border border-ivory/10 bg-char/50 ${this.props.className ?? ''}`}
+        >
+          <p className="px-6 text-center text-sm font-light text-ivory/60">
+            بارگیری نقشه ناموفق بود — نسخهٔ صفحه در این تب قدیمی است
+          </p>
+          <button
+            type="button"
+            onClick={() => window.location.reload()}
+            className="border border-copper/50 px-5 py-2 text-xs font-bold text-copper transition-colors duration-200 hover:bg-copper hover:text-char"
+          >
+            بارگیری دوبارهٔ صفحه
+          </button>
+        </div>
+      )
+    }
+    return this.props.children
+  }
+}
+
 export function LazyProjectsMapAll(props: ProjectsMapAllProps) {
   return (
-    <Suspense fallback={<MapSkeleton className={props.className} />}>
-      <ProjectsMapAll {...props} />
-    </Suspense>
+    <MapErrorBoundary className={props.className}>
+      <Suspense fallback={<MapSkeleton className={props.className} />}>
+        <ProjectsMapAll {...props} />
+      </Suspense>
+    </MapErrorBoundary>
   )
 }
 
 export function LazyProjectsMapSingle(props: ProjectsMapSingleProps) {
   return (
-    <Suspense fallback={<MapSkeleton className={props.className} />}>
-      <ProjectsMapSingle {...props} />
-    </Suspense>
+    <MapErrorBoundary className={props.className}>
+      <Suspense fallback={<MapSkeleton className={props.className} />}>
+        <ProjectsMapSingle {...props} />
+      </Suspense>
+    </MapErrorBoundary>
   )
 }