Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: add gap at start of recording #26743

Merged
merged 11 commits into from
Dec 9, 2024
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified frontend/__snapshots__/components-hogfetti--hogfetti--dark.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified frontend/__snapshots__/components-hogfetti--hogfetti--light.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified frontend/__snapshots__/lemon-ui-icons--shelf-j--light.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified frontend/__snapshots__/lemon-ui-lemon-banner--closable--dark.png
Binary file modified frontend/__snapshots__/lemon-ui-lemon-banner--closable--light.png
Binary file modified frontend/__snapshots__/lemon-ui-lemon-banner--error--dark.png
Binary file modified frontend/__snapshots__/lemon-ui-lemon-banner--error--light.png
Binary file modified frontend/__snapshots__/lemon-ui-lemon-banner--info--dark.png
Binary file modified frontend/__snapshots__/lemon-ui-lemon-banner--info--light.png
Binary file modified frontend/__snapshots__/lemon-ui-lemon-banner--narrow--dark.png
Binary file modified frontend/__snapshots__/lemon-ui-lemon-banner--narrow--light.png
Binary file modified frontend/__snapshots__/lemon-ui-lemon-banner--success--dark.png
Binary file modified frontend/__snapshots__/lemon-ui-lemon-banner--success--light.png
Binary file modified frontend/__snapshots__/lemon-ui-lemon-banner--warning--dark.png
Binary file modified frontend/__snapshots__/lemon-ui-lemon-banner--warning--light.png
Binary file modified frontend/__snapshots__/lemon-ui-lemon-button--active--dark.png
Binary file modified frontend/__snapshots__/lemon-ui-lemon-button--full-width--dark.png
Binary file modified frontend/__snapshots__/lemon-ui-lemon-button--loading--dark.png
Binary file modified frontend/__snapshots__/lemon-ui-lemon-button--sizes--dark.png
Binary file modified frontend/__snapshots__/lemon-ui-lemon-button--text-only--dark.png
Binary file modified frontend/__snapshots__/lemon-ui-lemon-button--text-only--light.png
Binary file modified frontend/__snapshots__/lemon-ui-lemon-dialog--customised--dark.png
Binary file modified frontend/__snapshots__/lemon-ui-lemon-dialog--form--dark.png
Binary file modified frontend/__snapshots__/lemon-ui-lemon-dialog--minimal--dark.png
Binary file modified frontend/__snapshots__/lemon-ui-lemon-dialog--template--dark.png
Binary file modified frontend/__snapshots__/lemon-ui-lemon-modal--lemon-modal--dark.png
Binary file modified frontend/__snapshots__/lemon-ui-spinner--in-buttons--dark.png
Binary file modified frontend/__snapshots__/scenes-app-max-ai--welcome--dark.png
Binary file modified frontend/__snapshots__/scenes-app-surveys--surveys-list--dark.png
Binary file modified frontend/__snapshots__/scenes-app-surveys--surveys-list--light.png
Binary file modified frontend/__snapshots__/scenes-other-login--sso-error--dark.png
Original file line number Diff line number Diff line change
Expand Up @@ -980,11 +980,11 @@ export const sessionRecordingDataLogic = kea<sessionRecordingDataLogicType>([
const eventStart = meta?.start_time ? dayjs(meta.start_time) : null
const snapshotStart = firstSnapshot ? dayjs(firstSnapshot.timestamp) : null

if (snapshotStart && eventStart) {
return snapshotStart
// whichever is earliest
if (eventStart && snapshotStart) {
return eventStart.isBefore(snapshotStart) ? eventStart : snapshotStart
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Isn't this just the min between the two? I mean can't we use dayjs.min here?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤔 quite possibly... will loop back if this doesn't fix the issue 🙈

}

return snapshotStart || eventStart
return eventStart || snapshotStart
},
],

Expand All @@ -996,7 +996,7 @@ export const sessionRecordingDataLogic = kea<sessionRecordingDataLogicType>([

// whichever is latest
if (eventEnd && snapshotEnd) {
return snapshotEnd
return eventEnd.isAfter(snapshotEnd) ? eventEnd : snapshotEnd
}
return eventEnd || snapshotEnd
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -521,15 +521,23 @@ export const sessionRecordingPlayerLogic = kea<sessionRecordingPlayerLogicType>(
],
segmentForTimestamp: [
(s) => [s.sessionPlayerData],
(sessionPlayerData) => {
(sessionPlayerData: SessionPlayerData) => {
return (timestamp?: number): RecordingSegment | null => {
if (timestamp === undefined) {
return null
}
for (const segment of sessionPlayerData.segments) {
if (segment.startTimestamp <= timestamp && segment.endTimestamp >= timestamp) {
return segment
if (sessionPlayerData.segments.length) {
for (const segment of sessionPlayerData.segments) {
if (segment.startTimestamp <= timestamp && segment.endTimestamp >= timestamp) {
return segment
}
}
return {
kind: 'buffer',
startTimestamp: timestamp,
endTimestamp: sessionPlayerData.segments[0].startTimestamp - 1,
isActive: false,
} as RecordingSegment
}
return null
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,13 @@

exports[`segmenter can segment to include only one window 1`] = `
[
{
"durationMs": 10,
"endTimestamp": 1672531200010,
"isActive": false,
"kind": "gap",
"startTimestamp": 1672531200000,
},
{
"durationMs": 0,
"endTimestamp": 1672531200010,
Expand Down
13 changes: 12 additions & 1 deletion frontend/src/scenes/session-recordings/player/utils/segmenter.ts
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ export const createSegments = (
const list = [...acc]

if (previousSegment && segment.startTimestamp !== previousSegment.endTimestamp) {
// If the segments do not immediately follow each other then we add a "gap" segment
// If the segments do not immediately follow each other, then we add a "gap" segment
const startTimestamp = previousSegment.endTimestamp
const endTimestamp = segment.startTimestamp
// Offset the window ID check so we look for a subsequent segment
Expand Down Expand Up @@ -186,6 +186,17 @@ export const createSegments = (
isActive: false,
} as RecordingSegment)
}

// if the first segment starts after the start of the session, add a gap segment at the beginning
const firstTimestamp = segments[0]?.startTimestamp
if (firstTimestamp && firstTimestamp > start.valueOf()) {
segments.unshift({
kind: 'gap',
startTimestamp: start.valueOf(),
endTimestamp: firstTimestamp,
isActive: false,
} as RecordingSegment)
}
}

segments = segments.map((segment) => {
Expand Down
Loading