From 3a30703342304dcc5cc560fe70598c1c4ca85599 Mon Sep 17 00:00:00 2001
From: Floke <floke.com@gmail.com>
Date: Wed, 4 Feb 2026 11:59:58 +0000
Subject: [PATCH] fix([2fd88f42]): add react error boundary to debug blank page

---
 heatmap-tool/frontend/src/App.tsx | 49 ++++++++++++++++---------------
 1 file changed, 26 insertions(+), 23 deletions(-)

diff --git a/heatmap-tool/frontend/src/App.tsx b/heatmap-tool/frontend/src/App.tsx
index 81824e3a..5a2bcfe4 100644
--- a/heatmap-tool/frontend/src/App.tsx
+++ b/heatmap-tool/frontend/src/App.tsx
@@ -4,6 +4,7 @@ import './App.css';
 import FileUpload from './components/FileUpload';
 import FilterPanel from './components/FilterPanel';
 import MapDisplay from './components/MapDisplay';
+import ErrorBoundary from './components/ErrorBoundary';
 
 // Define types for our state
 export interface FilterOptions {
@@ -52,30 +53,32 @@ function App() {
   };
 
   return (
-    <div className="App">
-      <header className="App-header">
-        <h1>German PLZ Heatmap Tool</h1>
-      </header>
-      <main className="App-main">
-        <div className="control-panel">
-          <FileUpload
-            onUploadSuccess={handleUploadSuccess}
-            setIsLoading={setIsLoading}
-            setError={setError}
-          />
-          <FilterPanel
-            filters={filters}
-            onFilterChange={handleFilterChange}
-            isLoading={isLoading}
-          />
+    <ErrorBoundary>
+        <div className="App">
+        <header className="App-header">
+            <h1>German PLZ Heatmap Tool</h1>
+        </header>
+        <main className="App-main">
+            <div className="control-panel">
+            <FileUpload
+                onUploadSuccess={handleUploadSuccess}
+                setIsLoading={setIsLoading}
+                setError={setError}
+            />
+            <FilterPanel
+                filters={filters}
+                onFilterChange={handleFilterChange}
+                isLoading={isLoading}
+            />
+            </div>
+            <div className="map-container">
+            {isLoading && <p>Loading map data...</p>}
+            {error && <p className="error">{error}</p>}
+            <MapDisplay heatmapData={heatmapData} />
+            </div>
+        </main>
         </div>
-        <div className="map-container">
-          {isLoading && <p>Loading map data...</p>}
-          {error && <p className="error">{error}</p>}
-          <MapDisplay heatmapData={heatmapData} />
-        </div>
-      </main>
-    </div>
+    </ErrorBoundary>
   );
 }