♻️ Refactor: cleanupMarkers util eingeführt für alle Marker-Typen + ✨ Feature: Heap-Memory-Monitoring über Redux-Slice mit Auto-Reload bei >8GB
This commit is contained in:
23
CHANGELOG.md
23
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
|
## [1.1.232] – 2025-06-04
|
||||||
|
|
||||||
### ✨ Added
|
### ✨ Added
|
||||||
|
|||||||
@@ -80,6 +80,7 @@ import useDataUpdater from "@/hooks/useDataUpdater";
|
|||||||
import { cleanupPolylinesForMemory } from "@/utils/polylines/cleanupPolylinesForMemory";
|
import { cleanupPolylinesForMemory } from "@/utils/polylines/cleanupPolylinesForMemory";
|
||||||
import { cleanupMarkers } from "@/utils/common/cleanupMarkers";
|
import { cleanupMarkers } from "@/utils/common/cleanupMarkers";
|
||||||
import { monitorHeapAndReload } from "@/utils/common/monitorMemory";
|
import { monitorHeapAndReload } from "@/utils/common/monitorMemory";
|
||||||
|
import { monitorHeapWithRedux } from "@/utils/common/monitorMemory";
|
||||||
//-----------------------------------------------------------------------------------------------------
|
//-----------------------------------------------------------------------------------------------------
|
||||||
const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
||||||
//-------------------------------
|
//-------------------------------
|
||||||
@@ -787,6 +788,12 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
|||||||
|
|
||||||
return () => clearInterval(interval); // wichtig: aufräumen!
|
return () => clearInterval(interval); // wichtig: aufräumen!
|
||||||
}, []);
|
}, []);
|
||||||
|
//--------------------------------------------
|
||||||
|
useEffect(() => {
|
||||||
|
const interval = monitorHeapWithRedux(10000); // alle 10s
|
||||||
|
|
||||||
|
return () => clearInterval(interval);
|
||||||
|
}, []);
|
||||||
//---------------------------------------------
|
//---------------------------------------------
|
||||||
//--------------------------------------------
|
//--------------------------------------------
|
||||||
return (
|
return (
|
||||||
|
|||||||
@@ -1,2 +1,2 @@
|
|||||||
// /config/appVersion
|
// /config/appVersion
|
||||||
export const APP_VERSION = "1.1.238";
|
export const APP_VERSION = "1.1.239";
|
||||||
|
|||||||
22
redux/slices/heapMonitorSlice.js
Normal file
22
redux/slices/heapMonitorSlice.js
Normal file
@@ -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;
|
||||||
@@ -35,6 +35,7 @@ import selectedDeviceReducer from "./slices/selectedDeviceSlice";
|
|||||||
import selectedAreaReducer from "./slices/selectedAreaSlice";
|
import selectedAreaReducer from "./slices/selectedAreaSlice";
|
||||||
import zoomTriggerReducer from "./slices/zoomTriggerSlice";
|
import zoomTriggerReducer from "./slices/zoomTriggerSlice";
|
||||||
import urlParameterReducer from "./slices/urlParameterSlice";
|
import urlParameterReducer from "./slices/urlParameterSlice";
|
||||||
|
import heapMonitorReducer from "./slices/heapMonitorSlice";
|
||||||
//----------------
|
//----------------
|
||||||
|
|
||||||
export const store = configureStore({
|
export const store = configureStore({
|
||||||
@@ -68,5 +69,6 @@ export const store = configureStore({
|
|||||||
poiTyp: poiTypReducer,
|
poiTyp: poiTypReducer,
|
||||||
poiIconsData: poiIconsDataReducer,
|
poiIconsData: poiIconsDataReducer,
|
||||||
poiMarkers: poiMarkersReducer,
|
poiMarkers: poiMarkersReducer,
|
||||||
|
heapMonitor: heapMonitorReducer,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,3 +1,6 @@
|
|||||||
|
import { store } from "@/redux/store";
|
||||||
|
import { updateHeap } from "@/redux/slices/heapMonitorSlice";
|
||||||
|
|
||||||
export const monitorHeapAndReload = (limitInGB = 8, intervalMs = 10000) => {
|
export const monitorHeapAndReload = (limitInGB = 8, intervalMs = 10000) => {
|
||||||
const limit = limitInGB * 1024 * 1024 * 1024;
|
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");
|
console.log("Heap:", (heap / 1024 / 1024).toFixed(2), "MB");
|
||||||
|
|
||||||
if (heap > limit) {
|
if (heap > limit) {
|
||||||
console.warn("🚨 Heap-Limit erreicht. Reload wird ausgeführt.");
|
//console.warn("🚨 Heap-Limit erreicht. Reload wird ausgeführt.");
|
||||||
location.reload();
|
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);
|
}, intervalMs);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user