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 },