fix([2fd88f42]): add react error boundary to debug blank page

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">
+    <ErrorBoundary>
-      <header className="App-header">
+        <div className="App">
-        <h1>German PLZ Heatmap Tool</h1>
+        <header className="App-header">
-      </header>
+            <h1>German PLZ Heatmap Tool</h1>
-      <main className="App-main">
+        </header>
-        <div className="control-panel">
+        <main className="App-main">
-          <FileUpload
+            <div className="control-panel">
-            onUploadSuccess={handleUploadSuccess}
+            <FileUpload
-            setIsLoading={setIsLoading}
+                onUploadSuccess={handleUploadSuccess}
-            setError={setError}
+                setIsLoading={setIsLoading}
-          />
+                setError={setError}
-          <FilterPanel
+            />
-            filters={filters}
+            <FilterPanel
-            onFilterChange={handleFilterChange}
+                filters={filters}
-            isLoading={isLoading}
+                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">
+    </ErrorBoundary>
-          {isLoading && <p>Loading map data...</p>}
-          {error && <p className="error">{error}</p>}
-          <MapDisplay heatmapData={heatmapData} />
-        </div>
-      </main>
-    </div>
   );
 }