@amadeus-it-group/ngrx-devtool 1.0.0 → 1.1.0

package/ngrx-devtool/fesm2022/amadeus-it-group-ngrx-devtool.mjs

@@ -561,18 +561,23 @@ class PerformanceTrackerService {
     thresholds = DEFAULT_THRESHOLDS;
     firstActionTime = null;
     measureRenderTime(actionType, reducer, callback) {
-        const startTime = performance.now();
+        const renderStartTime = performance.now();
+        const reducerStartTime = performance.now();
         const nextState = reducer();
+        const reducerTime = parseFloat((performance.now() - reducerStartTime).toFixed(2));
+        const stateSize = this.getSerializedSize(nextState);
         if (!this.isBrowser) {
-            callback(0);
+            callback(0, reducerTime, stateSize);
             return nextState;
         }
         afterNextRender(() => {
-            const renderTime = parseFloat((performance.now() - startTime).toFixed(2));
+            const renderTime = parseFloat((performance.now() - renderStartTime).toFixed(2));
             const entry = {
                 actionType,
                 timestamp: Date.now(),
                 renderTime,
+                reducerTime,
+                stateSize,
             };
             this.entries.push(entry);
             if (this.firstActionTime === null) {
@@ -581,7 +586,7 @@ class PerformanceTrackerService {
             if (this.entries.length > ENTRIES_MAX_SIZE) {
                 this.entries = this.entries.slice(-ENTRIES_TRIM_SIZE);
             }
-            callback(renderTime);
+            callback(renderTime, reducerTime, stateSize);
         }, { injector: this.injector });
         return nextState;
     }
@@ -611,17 +616,26 @@ class PerformanceTrackerService {
     getAggregatedStats() {
         const stats = this.getStats();
         const actionTypeStats = this.getActionTypeStats();
+        const reducerTimes = this.entries.map(entry => entry.reducerTime ?? entry.renderTime);
+        const avgReducerTime = reducerTimes.length
+            ? reducerTimes.reduce((total, time) => total + time, 0) / reducerTimes.length
+            : 0;
+        const maxReducerTime = reducerTimes.length ? Math.max(...reducerTimes) : 0;
+        const slowestReducer = this.entries.reduce((slowest, entry) => !slowest || (entry.reducerTime ?? entry.renderTime) > (slowest.reducerTime ?? slowest.renderTime)
+            ? entry
+            : slowest, null);
+        const currentStateSize = this.entries.at(-1)?.stateSize ?? 0;
         const elapsedTime = this.firstActionTime
             ? (Date.now() - this.firstActionTime) / 1000
             : 1;
         return {
             totalActions: stats.totalActions,
-            avgReducerTime: stats.avgRenderTime,
-            maxReducerTime: stats.maxRenderTime,
-            slowestAction: stats.slowestAction,
-            currentStateSize: 0,
+            avgReducerTime,
+            maxReducerTime,
+            slowestAction: slowestReducer?.actionType ?? null,
+            currentStateSize,
             actionsPerSecond: stats.totalActions / Math.max(elapsedTime, 1),
-            performanceScore: this.calculatePerformanceScore(stats),
+            performanceScore: this.calculatePerformanceScore(avgReducerTime, maxReducerTime),
             actionTypeStats,
         };
     }
@@ -665,36 +679,46 @@ class PerformanceTrackerService {
     getActionTypeStats() {
         const statsMap = new Map();
         for (const entry of this.entries) {
+            const reducerTime = entry.reducerTime ?? entry.renderTime;
             const existing = statsMap.get(entry.actionType);
             if (existing) {
                 existing.count++;
-                existing.totalTime += entry.renderTime;
+                existing.totalTime += reducerTime;
                 existing.avgTime = existing.totalTime / existing.count;
-                existing.maxTime = Math.max(existing.maxTime, entry.renderTime);
+                existing.maxTime = Math.max(existing.maxTime, reducerTime);
                 existing.lastExecuted = entry.timestamp;
             }
             else {
                 statsMap.set(entry.actionType, {
                     count: 1,
-                    totalTime: entry.renderTime,
-                    avgTime: entry.renderTime,
-                    maxTime: entry.renderTime,
+                    totalTime: reducerTime,
+                    avgTime: reducerTime,
+                    maxTime: reducerTime,
                     lastExecuted: entry.timestamp,
                 });
             }
         }
         return statsMap;
     }
-    calculatePerformanceScore(stats) {
+    calculatePerformanceScore(avgReducerTime, maxReducerTime) {
         let score = 100;
-        if (stats.avgRenderTime > this.thresholds.maxReducerTime) {
-            score -= Math.min(30, (stats.avgRenderTime - this.thresholds.maxReducerTime) * 2);
+        if (avgReducerTime > this.thresholds.maxReducerTime) {
+            score -= Math.min(30, (avgReducerTime - this.thresholds.maxReducerTime) * 2);
         }
-        if (stats.maxRenderTime > this.thresholds.maxReducerTime * 2) {
-            score -= Math.min(20, (stats.maxRenderTime - this.thresholds.maxReducerTime * 2) / 2);
+        if (maxReducerTime > this.thresholds.maxReducerTime * 2) {
+            score -= Math.min(20, (maxReducerTime - this.thresholds.maxReducerTime * 2) / 2);
         }
         return Math.max(0, Math.round(score));
     }
+    getSerializedSize(value) {
+        try {
+            const serialized = JSON.stringify(value);
+            return serialized === undefined ? 0 : new TextEncoder().encode(serialized).byteLength;
+        }
+        catch {
+            return 0;
+        }
+    }
     maxSeverity(a, b) {
         const order = { low: 0, medium: 1, high: 2 };
         return order[a] >= order[b] ? a : b;
@@ -1330,14 +1354,14 @@ function createDevToolMetaReducer(wsUrlOrConfig = DEFAULT_WS_URL) {
             const timestamp = new Date().toISOString();
             let nextState;
             if (enablePerf) {
-                nextState = performanceTracker.measureRenderTime(action.type, () => reducer(state, action), (renderTime) => {
+                nextState = performanceTracker.measureRenderTime(action.type, () => reducer(state, action), (renderTime, reducerTime, stateSize) => {
                     const message = {
                         type: 'STATE_CHANGE',
                         action,
                         prevState,
                         nextState,
                         timestamp,
-                        renderPerformance: { renderTime }
+                        renderPerformance: { renderTime, reducerTime, stateSize }
                     };
                     webSocketService.send(message);
                 });