From 9a3b48ba83826ab6f140d6b9e9e8038c2007e02b Mon Sep 17 00:00:00 2001 From: Ben White Date: Fri, 15 Dec 2023 12:16:04 +0000 Subject: [PATCH] fix(performance): Fix performance issue when parsing large list of network events (#19353) Found some major perf improvements when parsing large numbers of network events --- .../player/inspector/playerInspectorLogic.ts | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/frontend/src/scenes/session-recordings/player/inspector/playerInspectorLogic.ts b/frontend/src/scenes/session-recordings/player/inspector/playerInspectorLogic.ts index d265abd1d572a..e5a07345c1d01 100644 --- 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([ // 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([ 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([ 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([ 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([ } // 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 },