fix(performance): Fix performance issue when parsing large list of ne…

…twork events (#19353) Found some major perf improvements when parsing large numbers of network events
PostHog · Dec 15, 2023 · 9a3b48b · 9a3b48b
1 parent 7cd9e14
commit 9a3b48b
Showing 1 changed file with 7 additions and 4 deletions.
diff --git a/frontend/src/scenes/session-recordings/player/inspector/playerInspectorLogic.ts b/frontend/src/scenes/session-recordings/player/inspector/playerInspectorLogic.ts
@@ -257,8 +257,11 @@ export const playerInspectorLogic = kea<playerInspectorLogicType>([
                 // NOTE: Possible perf improvement here would be to have a selector to parse the items
                 // and then do the filtering of what items are shown, elsewhere
                 // ALSO: We could move the individual filtering logic into the MiniFilters themselves
+                // WARNING: Be careful of dayjs functions - they can be slow due to the size of the loop.
                 const items: InspectorListItem[] = []
 
+                const startMs = start?.valueOf() ?? 0
+
                 // PERFORMANCE EVENTS
                 const performanceEventsArr = performanceEvents || []
                 for (const event of performanceEventsArr) {
@@ -287,7 +290,7 @@ export const playerInspectorLogic = kea<playerInspectorLogicType>([
                     items.push({
                         type: SessionRecordingPlayerTab.NETWORK,
                         timestamp,
-                        timeInRecording: timestamp.diff(start, 'ms'),
+                        timeInRecording: timestamp.valueOf() - startMs,
                         search: event.name || '',
                         data: event,
                         highlightColor: responseStatus >= 400 ? 'danger' : undefined,
@@ -301,7 +304,7 @@ export const playerInspectorLogic = kea<playerInspectorLogicType>([
                     items.push({
                         type: SessionRecordingPlayerTab.CONSOLE,
                         timestamp,
-                        timeInRecording: timestamp.diff(start, 'ms'),
+                        timeInRecording: timestamp.valueOf() - startMs,
                         search: event.content,
                         data: event,
                         highlightColor:
@@ -327,7 +330,7 @@ export const playerInspectorLogic = kea<playerInspectorLogicType>([
                     items.push({
                         type: SessionRecordingPlayerTab.EVENTS,
                         timestamp,
-                        timeInRecording: timestamp.diff(start, 'ms'),
+                        timeInRecording: timestamp.valueOf() - startMs,
                         search: search,
                         data: event,
                         highlightColor: isMatchingEvent
@@ -340,7 +343,7 @@ export const playerInspectorLogic = kea<playerInspectorLogicType>([
                 }
 
                 // NOTE: Native JS sorting is relatively slow here - be careful changing this
-                items.sort((a, b) => (a.timestamp.isAfter(b.timestamp) ? 1 : -1))
+                items.sort((a, b) => (a.timestamp.valueOf() > b.timestamp.valueOf() ? 1 : -1))
 
                 return items
             },