From 51d2d58f8ecb31b0c9870140f965a2947aff05bd Mon Sep 17 00:00:00 2001 From: ISA Date: Fri, 6 Jun 2025 11:36:06 +0200 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor:=20cleanupMarkers?= =?UTF-8?q?=20util=20eingef=C3=BChrt=20f=C3=BCr=20alle=20Marker-Typen=20+?= =?UTF-8?q?=20=E2=9C=A8=20Feature:=20Heap-Memory-Monitoring=20=C3=BCber=20?= =?UTF-8?q?Redux-Slice=20mit=20Auto-Reload=20bei=20>8GB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 23 +++++++++++++++++++++++ components/mainComponent/MapComponent.js | 7 +++++++ config/appVersion.js | 2 +- redux/slices/heapMonitorSlice.js | 22 ++++++++++++++++++++++ redux/store.js | 2 ++ utils/common/monitorMemory.js | 13 ++++++++++++- 6 files changed, 67 insertions(+), 2 deletions(-) create mode 100644 redux/slices/heapMonitorSlice.js diff --git a/CHANGELOG.md b/CHANGELOG.md index d1c7486c3..27370c300 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,29 @@ Alle bedeutenden Änderungen an diesem Projekt werden in dieser Datei dokumentie --- +## [1.1.238] – 2025-06-06 + +### ♻️ Refactor + +- Zentrale `cleanupMarkers()`-Funktion erstellt, um Memory Leaks bei Leaflet-Markern zu vermeiden. +- Marker-Cleanup in `MapComponent.js`, `createAndSetDevices.js`, `setupPOIs.js` und `markerUtils.js` + integriert. +- Marker werden jetzt zuverlässig bei Kartenwechsel oder Neuladung entfernt. + +### ✨ Feature + +- Neue Überwachung des Speicherverbrauchs über `monitorMemory.js`. +- Redux-Slice `heapMonitorSlice.js` speichert regelmäßig `usedJSHeapSize`. +- Heap-Wachstum kann live über Redux DevTools beobachtet werden. +- Automatischer Reload der Seite bei mehr als **8 GB** Heap-Verbrauch (z. B. bei iFrame-Nutzung in + TALAS.web). + +### 🔧 Version + +- 📦 `appVersion.js` auf Version **1.1.238** erhöht + +--- + ## [1.1.232] – 2025-06-04 ### ✨ Added diff --git a/components/mainComponent/MapComponent.js b/components/mainComponent/MapComponent.js index 9b786e53b..68be1106b 100644 --- a/components/mainComponent/MapComponent.js +++ b/components/mainComponent/MapComponent.js @@ -80,6 +80,7 @@ import useDataUpdater from "@/hooks/useDataUpdater"; import { cleanupPolylinesForMemory } from "@/utils/polylines/cleanupPolylinesForMemory"; import { cleanupMarkers } from "@/utils/common/cleanupMarkers"; import { monitorHeapAndReload } from "@/utils/common/monitorMemory"; +import { monitorHeapWithRedux } from "@/utils/common/monitorMemory"; //----------------------------------------------------------------------------------------------------- const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { //------------------------------- @@ -787,6 +788,12 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { return () => clearInterval(interval); // wichtig: aufräumen! }, []); + //-------------------------------------------- + useEffect(() => { + const interval = monitorHeapWithRedux(10000); // alle 10s + + return () => clearInterval(interval); + }, []); //--------------------------------------------- //-------------------------------------------- return ( diff --git a/config/appVersion.js b/config/appVersion.js index 4489961ff..4bc422281 100644 --- a/config/appVersion.js +++ b/config/appVersion.js @@ -1,2 +1,2 @@ // /config/appVersion -export const APP_VERSION = "1.1.238"; +export const APP_VERSION = "1.1.239"; diff --git a/redux/slices/heapMonitorSlice.js b/redux/slices/heapMonitorSlice.js new file mode 100644 index 000000000..e1b64f132 --- /dev/null +++ b/redux/slices/heapMonitorSlice.js @@ -0,0 +1,22 @@ +import { createSlice } from "@reduxjs/toolkit"; + +const initialState = { + heapBytes: 0, + heapMB: 0, + lastUpdated: null, +}; + +export const heapMonitorSlice = createSlice({ + name: "heapMonitor", + initialState, + reducers: { + updateHeap(state, action) { + state.heapBytes = action.payload; + state.heapMB = +(action.payload / 1024 / 1024).toFixed(2); + state.lastUpdated = new Date().toISOString(); + }, + }, +}); + +export const { updateHeap } = heapMonitorSlice.actions; +export default heapMonitorSlice.reducer; diff --git a/redux/store.js b/redux/store.js index 943400473..feef8277b 100644 --- a/redux/store.js +++ b/redux/store.js @@ -35,6 +35,7 @@ import selectedDeviceReducer from "./slices/selectedDeviceSlice"; import selectedAreaReducer from "./slices/selectedAreaSlice"; import zoomTriggerReducer from "./slices/zoomTriggerSlice"; import urlParameterReducer from "./slices/urlParameterSlice"; +import heapMonitorReducer from "./slices/heapMonitorSlice"; //---------------- export const store = configureStore({ @@ -68,5 +69,6 @@ export const store = configureStore({ poiTyp: poiTypReducer, poiIconsData: poiIconsDataReducer, poiMarkers: poiMarkersReducer, + heapMonitor: heapMonitorReducer, }, }); diff --git a/utils/common/monitorMemory.js b/utils/common/monitorMemory.js index 4354fdf5c..0690444ea 100644 --- a/utils/common/monitorMemory.js +++ b/utils/common/monitorMemory.js @@ -1,3 +1,6 @@ +import { store } from "@/redux/store"; +import { updateHeap } from "@/redux/slices/heapMonitorSlice"; + export const monitorHeapAndReload = (limitInGB = 8, intervalMs = 10000) => { const limit = limitInGB * 1024 * 1024 * 1024; @@ -7,8 +10,16 @@ export const monitorHeapAndReload = (limitInGB = 8, intervalMs = 10000) => { console.log("Heap:", (heap / 1024 / 1024).toFixed(2), "MB"); if (heap > limit) { - console.warn("🚨 Heap-Limit erreicht. Reload wird ausgeführt."); + //console.warn("🚨 Heap-Limit erreicht. Reload wird ausgeführt."); location.reload(); } + store.dispatch(updateHeap(heap)); + }, intervalMs); +}; + +export const monitorHeapWithRedux = (intervalMs = 10000) => { + return setInterval(() => { + const heap = performance.memory?.usedJSHeapSize || 0; + store.dispatch(updateHeap(heap)); }, intervalMs); };