add feature flagged canvas recording settings

PostHog · Jan 3, 2024 · 6f695be · 6f695be
1 parent 0cf8814
commit 6f695be
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 2 deletions.
diff --git a/frontend/src/lib/api.mock.ts b/frontend/src/lib/api.mock.ts
@@ -73,6 +73,7 @@ export const MOCK_DEFAULT_TEAM: TeamType = {
     session_recording_minimum_duration_milliseconds: null,
     session_recording_linked_flag: null,
     session_recording_network_payload_capture_config: null,
+    session_recording_config: null,
     capture_console_log_opt_in: true,
     capture_performance_opt_in: true,
     autocapture_exceptions_opt_in: false,

diff --git a/frontend/src/lib/constants.tsx b/frontend/src/lib/constants.tsx
@@ -191,6 +191,7 @@ export const FEATURE_FLAGS = {
     YEAR_IN_HOG: 'year-in-hog', // owner: #team-replay
     SESSION_REPLAY_EXPORT_MOBILE_DATA: 'session-replay-export-mobile-data', // owner: #team-replay
     REDIRECT_INGESTION_PRODUCT_ANALYTICS_ONBOARDING: 'redirect-ingestion-product-analytics-onboarding', // owner: @biancayang
+    SESSION_REPLAY_CANVAS: 'session-replay-canvas', // owner: #team-replay
 } as const
 export type FeatureFlagKey = (typeof FEATURE_FLAGS)[keyof typeof FEATURE_FLAGS]
 

diff --git a/frontend/src/scenes/session-recordings/player/sessionRecordingPlayerLogic.ts b/frontend/src/scenes/session-recordings/player/sessionRecordingPlayerLogic.ts
@@ -498,7 +498,9 @@ export const sessionRecordingPlayerLogic = kea<sessionRecordingPlayerLogicType>(
                 plugins.push(CorsPlugin)
             }
 
-            plugins.push(CanvasReplayerPlugin(values.sessionPlayerData.snapshotsByWindowId[windowId]))
+            if (values.featureFlags[FEATURE_FLAGS.SESSION_REPLAY_CANVAS]) {
+                plugins.push(CanvasReplayerPlugin(values.sessionPlayerData.snapshotsByWindowId[windowId]))
+            }
 
             cache.debug?.('tryInitReplayer', {
                 windowId,

diff --git a/frontend/src/scenes/settings/project/SessionRecordingSettings.tsx b/frontend/src/scenes/settings/project/SessionRecordingSettings.tsx
@@ -5,6 +5,7 @@ import { AuthorizedUrlListType } from 'lib/components/AuthorizedUrlList/authoriz
 import { FlaggedFeature } from 'lib/components/FlaggedFeature'
 import { FlagSelector } from 'lib/components/FlagSelector'
 import { FEATURE_FLAGS, SESSION_REPLAY_MINIMUM_DURATION_OPTIONS } from 'lib/constants'
+import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
 import { IconCancel } from 'lib/lemon-ui/icons'
 import { LemonLabel } from 'lib/lemon-ui/LemonLabel/LemonLabel'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
@@ -16,8 +17,8 @@ import { AvailableFeature } from '~/types'
 
 export function ReplayGeneral(): JSX.Element {
     const { updateCurrentTeam } = useActions(teamLogic)
-
     const { currentTeam } = useValues(teamLogic)
+    const hasCanvasRecording = useFeatureFlag('SESSION_REPLAY_CANVAS')
 
     return (
         <div className="space-y-4">
@@ -73,6 +74,32 @@ export function ReplayGeneral(): JSX.Element {
                     logs will be shown in the recording player to help you debug any issues.
                 </p>
             </div>
+            {hasCanvasRecording && (
+                <div className="space-y-2">
+                    <LemonSwitch
+                        data-attr="opt-in-capture-canvas-switch"
+                        onChange={(checked) => {
+                            updateCurrentTeam({
+                                session_recording_config: {
+                                    ...currentTeam?.session_recording_config,
+                                    recordCanvas: checked,
+                                },
+                            })
+                        }}
+                        label="Capture canvas elements"
+                        bordered
+                        checked={
+                            currentTeam?.session_recording_config
+                                ? !!currentTeam?.session_recording_config?.recordCanvas
+                                : false
+                        }
+                    />
+                    <p>
+                        This setting controls if browser canvas elements will be captured as part of recordings. There
+                        is no way to mask canvas elements right now so please make sure they are free of PII.
+                    </p>
+                </div>
+            )}
             <div className="space-y-2">
                 <NetworkCaptureSettings />
             </div>

diff --git a/frontend/src/types.ts b/frontend/src/types.ts
@@ -357,6 +357,7 @@ export interface TeamType extends TeamBasicType {
         | { recordHeaders?: boolean; recordBody?: boolean }
         | undefined
         | null
+    session_recording_config: { recordCanvas?: boolean } | undefined | null
     autocapture_exceptions_opt_in: boolean
     surveys_opt_in?: boolean
     autocapture_exceptions_errors_to_ignore: string[]