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.

Sign up for GitHub

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

Jump to bottom

feat: canvas replay #19583

Merged
merged 29 commits into from
Jan 22, 2024
Merged

feat: canvas replay #19583

merged 29 commits into from
Jan 22, 2024

Conversation

daibhin
Copy link
Contributor

@daibhin daibhin commented Jan 3, 2024 •
edited
Loading

Problem

Related to PostHog/posthog-js#946 and #14555

Provide config via decide & playback canvas mutation events

Changes

  • Implement plugin to replace canvas with decoded image from event
  • Add new session_recording_config to store all future settings related to replay in a single bag
  • Add feature flag to prevent setting up the feature unless enabled
  • Add settings to enable / disable canvas recording with warning about PII

How did you test this code?

  • Wrote team & decide tests
Jan-19-2024.17-39-57.mp4

daibhin
daibhin commented Jan 3, 2024
View reviewed changes
frontend/src/scenes/session-recordings/player/rrweb/canvas/canvas-plugin.ts Outdated
import { CanvasArg, type canvasMutationData, type canvasMutationParam, eventWithTime } from '@rrweb/types'
import { EventType, IncrementalSource, Replayer } from 'rrweb'
// TODO: figure out how to import this method
import canvasMutation from 'rrweb/es/rrweb/packages/rrweb/src/replay/canvas'
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Hoping to get this in via rrweb-io/rrweb#1383

@daibhin daibhin changed the title Dn feat/canvas replay feat: canvas replay Jan 3, 2024
marandaneto
marandaneto reviewed Jan 4, 2024
View reviewed changes
posthog/api/test/__snapshots__/test_decide.ambr Outdated
@@ -89,22 +87,6 @@
LIMIT 21 /*controller='team-detail',route='api/projects/%28%3FP%3Cid%3E%5B%5E/.%5D%2B%29/%3F%24'*/
'
---
# name: TestDecide.test_decide_doesnt_error_out_when_database_is_down.10
Copy link
Member

Choose a reason for hiding this comment

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

Nice cleaning up

marandaneto
marandaneto reviewed Jan 4, 2024
View reviewed changes
posthog/api/team.py
Comment on lines +220 to +221
if not all(key in ["record_canvas"] for key in value.keys()):
raise exceptions.ValidationError("Must provide a dictionary with only 'record_canvas' key.")
Copy link
Member

Choose a reason for hiding this comment

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

Maybe it should not be a dictionary then?

Copy link
Member

Choose a reason for hiding this comment

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

Ah, I'd forgotten my pre-xmas good citizen push that we should move session replay config into one place so we can stop adding more nad more columns to the team model

Maybe we should get this in and then I use it for the config in #19887

@posthog-bot
Copy link
Contributor

This PR hasn't seen activity in a week! Should it be merged, closed, or further worked on? If you want to keep it open, post a comment or remove the stale label – otherwise this will be closed in another week.

@marandaneto marandaneto removed the stale label Jan 16, 2024
@daibhin daibhin requested a review from a team January 19, 2024 17:42
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jan 19, 2024 •
edited
Loading

Size Change: +46 B (0%)

Total Size: 2 MB

ℹ️ View Unchanged
Filename Size Change
frontend/dist/toolbar.js 2 MB +46 B (0%)

compressed-size-action

pauldambra
pauldambra approved these changes Jan 22, 2024
View reviewed changes
Copy link
Member

@pauldambra pauldambra left a comment

Choose a reason for hiding this comment

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

👍 I can validate that it doesn't break existing recordings :)

How do I test canvas recordings? (maybe being silly)

frontend/src/scenes/session-recordings/player/sessionRecordingPlayerLogic.ts
@@ -526,6 +527,10 @@ export const sessionRecordingPlayerLogic = kea<sessionRecordingPlayerLogicType>(
plugins.push(CorsPlugin)
}

if (values.featureFlags[FEATURE_FLAGS.SESSION_REPLAY_CANVAS]) {
Copy link
Member

Choose a reason for hiding this comment

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

is it possible to get in a state where I'm collecting canvas recordings but this flag is off?

not blocking here but we should have a good story for "this replay has a canvas in it"

Copy link
Member

Choose a reason for hiding this comment

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

also makes me think it'd be good to have a PostHog insight showing web vs android vs canvas vs etc playback so we can measure feature usage

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes, possibly could be. We should also consider in future that recordings might be captured with canvas and then the config option is turned off. Should we continue to playback recordings with the canvas or not in that situation 🤔

Good news is that it's pretty easy to know if a recording contains a canvas in the rrweb plugin during playback

posthog/api/team.py
Comment on lines +220 to +221
if not all(key in ["record_canvas"] for key in value.keys()):
raise exceptions.ValidationError("Must provide a dictionary with only 'record_canvas' key.")
Copy link
Member

Choose a reason for hiding this comment

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

Ah, I'd forgotten my pre-xmas good citizen push that we should move session replay config into one place so we can stop adding more nad more columns to the team model

Maybe we should get this in and then I use it for the config in #19887

posthog/models/team/team.py Outdated
@@ -184,6 +184,7 @@ class Team(UUIDClassicModel):
)
session_recording_linked_flag: models.JSONField = models.JSONField(null=True, blank=True)
session_recording_network_payload_capture_config: models.JSONField = models.JSONField(null=True, blank=True)
session_recording_config: models.JSONField = models.JSONField(null=True, blank=True)
Copy link
Member

Choose a reason for hiding this comment

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

nitpicking... should it be session_replay_config? (am open to be convinced not :))

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Nope, think you're right

@pauldambra
Copy link
Member

Screenshot 2024-01-22 at 11 52 36

Occurs to me that we've added a bunch of stuff to config... Maybe we should be tagging them with LemonTag<"NEW"> so folk can see what has changed?

@daibhin
Copy link
Contributor Author

daibhin commented Jan 22, 2024

@pauldambra it's a little tricky / awkward. I added a /canvas route to the NextJS playgorund app in posthog-js. I run that app with NEXT_PUBLIC_POSTHOG_KEY=<% ph_local_key %> NEXT_PUBLIC_POSTHOG_HOST=http://localhost:8000 yarn dev to point at my local instance.

I also have an exported recording that I can send you 😄

@daibhin daibhin merged commit ed87468 into master Jan 22, 2024
100 checks passed
@daibhin daibhin deleted the dn-feat/canvas-replay branch January 22, 2024 15:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@marandaneto marandaneto marandaneto left review comments

@pauldambra pauldambra pauldambra approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
4 participants
@daibhin @posthog-bot @pauldambra @marandaneto