feat(web-analytics): Add a DB field cookieless_server_hash_mode to a …

…team, and setting to change it behind a flag (#27059)

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

frontend/src/lib/constants.tsx

@@ -235,6 +235,7 @@ export const FEATURE_FLAGS = {
     EXPERIMENT_STATS_V2: 'experiment-stats-v2', // owner: @danielbachhuber #team-experiments
     WEB_ANALYTICS_PERIOD_COMPARISON: 'web-analytics-period-comparison', // owner: @rafaeelaudibert #team-web-analytics
     WEB_ANALYTICS_CONVERSION_GOAL_FILTERS: 'web-analytics-conversion-goal-filters', // owner: @rafaeelaudibert #team-web-analytics
+    COOKIELESS_SERVER_HASH_MODE_SETTING: 'cookieless-server-hash-mode-setting', // owner: @robbie-c #team-web-analytics
 } as const
 export type FeatureFlagKey = (typeof FEATURE_FLAGS)[keyof typeof FEATURE_FLAGS]
 

frontend/src/scenes/settings/SettingsMap.tsx

@@ -1,4 +1,5 @@
 import { BounceRatePageViewModeSetting } from 'scenes/settings/environment/BounceRatePageViewMode'
+import { CookielessServerHashModeSetting } from 'scenes/settings/environment/CookielessServerHashMode'
 import { CustomChannelTypes } from 'scenes/settings/environment/CustomChannelTypes'
 import { DeadClicksAutocaptureSettings } from 'scenes/settings/environment/DeadClicksAutocaptureSettings'
 import { PersonsJoinMode } from 'scenes/settings/environment/PersonsJoinMode'
@@ -218,6 +219,12 @@ export const SETTINGS_MAP: SettingSection[] = [
                 title: 'Custom channel type',
                 component: <CustomChannelTypes />,
             },
+            {
+                id: 'cookieless-server-hash-mode',
+                title: 'Cookieless server hash mode',
+                component: <CookielessServerHashModeSetting />,
+                flag: 'COOKIELESS_SERVER_HASH_MODE_SETTING',
+            },
         ],
     },
 

frontend/src/scenes/settings/environment/CookielessServerHashMode.tsx

@@ -0,0 +1,65 @@
+import { useActions, useValues } from 'kea'
+import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import { LemonRadio, LemonRadioOption } from 'lib/lemon-ui/LemonRadio'
+import { useState } from 'react'
+import { teamLogic } from 'scenes/teamLogic'
+
+import { CookielessServerHashMode } from '~/types'
+
+const options: LemonRadioOption<CookielessServerHashMode>[] = [
+    {
+        value: CookielessServerHashMode.Stateful,
+        label: (
+            <>
+                <div>Stateful</div>
+            </>
+        ),
+    },
+    {
+        value: CookielessServerHashMode.Stateless,
+        label: (
+            <>
+                <div>Stateless</div>
+            </>
+        ),
+    },
+    {
+        value: CookielessServerHashMode.Disabled,
+        label: (
+            <>
+                <div>Disabled</div>
+            </>
+        ),
+    },
+]
+
+export function CookielessServerHashModeSetting(): JSX.Element {
+    const { updateCurrentTeam } = useActions(teamLogic)
+    const { currentTeam } = useValues(teamLogic)
+
+    const savedSetting = currentTeam?.cookieless_server_hash_mode ?? CookielessServerHashMode.Disabled
+    const [setting, setSetting] = useState<CookielessServerHashMode>(savedSetting)
+
+    const handleChange = (newSetting: CookielessServerHashMode): void => {
+        updateCurrentTeam({ cookieless_server_hash_mode: newSetting })
+    }
+
+    return (
+        <>
+            <p>
+                Use a cookieless server-side hash mode to hash user data. This is an experimental feature preview and
+                may result in dropped events.
+            </p>
+            <LemonRadio value={setting} onChange={setSetting} options={options} />
+            <div className="mt-4">
+                <LemonButton
+                    type="primary"
+                    onClick={() => handleChange(setting)}
+                    disabledReason={setting === savedSetting ? 'No changes to save' : undefined}
+                >
+                    Save
+                </LemonButton>
+            </div>
+        </>
+    )
+}

frontend/src/scenes/settings/types.ts

@@ -104,6 +104,7 @@ export type SettingId =
     | 'web-vitals-autocapture'
     | 'dead-clicks-autocapture'
     | 'channel-type'
+    | 'cookieless-server-hash-mode'
 
 type FeatureFlagKey = keyof typeof FEATURE_FLAGS
 

frontend/src/scenes/teamActivityDescriber.tsx

@@ -365,6 +365,7 @@ const teamActionsMapping: Record<
     user_access_level: () => null,
     live_events_token: () => null,
     product_intents: () => null,
+    cookieless_server_hash_mode: () => null,
 }
 
 function nameAndLink(logItem?: ActivityLogItem): JSX.Element {

frontend/src/types.ts

@@ -543,6 +543,7 @@ export interface TeamType extends TeamBasicType {
     primary_dashboard: number // Dashboard shown on the project homepage
     live_events_columns: string[] | null // Custom columns shown on the Live Events page
     live_events_token: string
+    cookieless_server_hash_mode?: CookielessServerHashMode
 
     /** Effective access level of the user in this specific team. Null if user has no access. */
     effective_membership_level: OrganizationMembershipLevel | null
@@ -4829,6 +4830,12 @@ export type ReplayTemplateVariableType = {
     noTouch?: boolean
 }
 
+export enum CookielessServerHashMode {
+    Disabled = 0,
+    Stateless = 1,
+    Stateful = 2,
+}
+
 /**
  * Assistant Conversation
  */

plugin-server/src/types.ts

@@ -528,6 +528,12 @@ export enum PluginLogLevel {
     Critical = 4, // only error type and system source
 }
 
+export enum CookielessServerHashMode {
+    Disabled = 0,
+    Stateless = 1,
+    Stateful = 2,
+}
+
 export interface PluginLogEntry {
     id: string
     team_id: number
@@ -633,13 +639,15 @@ export interface Team {
     api_token: string
     slack_incoming_webhook: string | null
     session_recording_opt_in: boolean
-    person_processing_opt_out?: boolean
+    person_processing_opt_out: boolean | null
     heatmaps_opt_in: boolean | null
     ingested_event: boolean
     person_display_name_properties: string[] | null
     test_account_filters:
         | (EventPropertyFilter | PersonPropertyFilter | ElementPropertyFilter | CohortPropertyFilter)[]
         | null
+    cookieless_server_hash_mode: CookielessServerHashMode | null
+    timezone: string
 }
 
 /** Properties shared by RawEventMessage and EventMessage. */

plugin-server/src/worker/ingestion/team-manager.ts

@@ -170,7 +170,9 @@ export async function fetchTeam(client: PostgresRouter, teamId: Team['id']): Pro
                 heatmaps_opt_in,
                 ingested_event,
                 person_display_name_properties,
-                test_account_filters
+                test_account_filters,
+                cookieless_server_hash_mode,
+                timezone
             FROM posthog_team
             WHERE id = $1
             `,
@@ -203,7 +205,10 @@ export async function fetchTeamByToken(client: PostgresRouter, token: string): P
                 person_processing_opt_out,
                 heatmaps_opt_in,
                 ingested_event,
-                test_account_filters
+                person_display_name_properties,
+                test_account_filters,
+                cookieless_server_hash_mode,
+                timezone
             FROM posthog_team
             WHERE api_token = $1
             LIMIT 1

plugin-server/tests/main/db.test.ts

@@ -855,7 +855,7 @@ describe('DB', () => {
                 anonymize_ips: false,
                 api_token: 'token1',
                 id: teamId,
-                project_id: teamId,
+                project_id: teamId as Team['project_id'],
                 ingested_event: true,
                 name: 'TEST PROJECT',
                 organization_id: organizationId,
@@ -866,6 +866,8 @@ describe('DB', () => {
                 uuid: expect.any(String),
                 person_display_name_properties: [],
                 test_account_filters: {} as any, // NOTE: Test insertion data gets set as an object weirdly
+                cookieless_server_hash_mode: null,
+                timezone: 'UTC',
             } as Team)
         })
 
@@ -885,17 +887,20 @@ describe('DB', () => {
                 anonymize_ips: false,
                 api_token: 'token2',
                 id: teamId,
-                project_id: teamId,
+                project_id: teamId as Team['project_id'],
                 ingested_event: true,
                 name: 'TEST PROJECT',
                 organization_id: organizationId,
                 session_recording_opt_in: true,
                 person_processing_opt_out: null,
+                person_display_name_properties: [],
                 heatmaps_opt_in: null,
                 slack_incoming_webhook: null,
                 uuid: expect.any(String),
                 test_account_filters: {} as any, // NOTE: Test insertion data gets set as an object weirdly
-            })
+                cookieless_server_hash_mode: null,
+                timezone: 'UTC',
+            } as Team)
         })
 
         it('returns null if the team does not exist', async () => {

posthog/api/team.py

@@ -201,6 +201,7 @@ class Meta:
             "primary_dashboard",
             "live_events_columns",
             "recording_domains",
+            "cookieless_server_hash_mode",
             "person_on_events_querying_enabled",
             "inject_web_apps",
             "extra_settings",

posthog/api/test/__snapshots__/test_action.ambr

@@ -82,6 +82,7 @@
          "posthog_team"."person_display_name_properties",
          "posthog_team"."live_events_columns",
          "posthog_team"."recording_domains",
+         "posthog_team"."cookieless_server_hash_mode",
          "posthog_team"."primary_dashboard_id",
          "posthog_team"."extra_settings",
          "posthog_team"."modifiers",
@@ -385,6 +386,7 @@
          "posthog_team"."person_display_name_properties",
          "posthog_team"."live_events_columns",
          "posthog_team"."recording_domains",
+         "posthog_team"."cookieless_server_hash_mode",
          "posthog_team"."primary_dashboard_id",
          "posthog_team"."extra_settings",
          "posthog_team"."modifiers",
@@ -896,6 +898,7 @@
          "posthog_team"."person_display_name_properties",
          "posthog_team"."live_events_columns",
          "posthog_team"."recording_domains",
+         "posthog_team"."cookieless_server_hash_mode",
          "posthog_team"."primary_dashboard_id",
          "posthog_team"."extra_settings",
          "posthog_team"."modifiers",

posthog/api/test/__snapshots__/test_annotation.ambr

@@ -82,6 +82,7 @@
          "posthog_team"."person_display_name_properties",
          "posthog_team"."live_events_columns",
          "posthog_team"."recording_domains",
+         "posthog_team"."cookieless_server_hash_mode",
          "posthog_team"."primary_dashboard_id",
          "posthog_team"."extra_settings",
          "posthog_team"."modifiers",
@@ -380,6 +381,7 @@
          "posthog_team"."person_display_name_properties",
          "posthog_team"."live_events_columns",
          "posthog_team"."recording_domains",
+         "posthog_team"."cookieless_server_hash_mode",
          "posthog_team"."primary_dashboard_id",
          "posthog_team"."extra_settings",
          "posthog_team"."modifiers",
@@ -824,6 +826,7 @@
          "posthog_team"."person_display_name_properties",
          "posthog_team"."live_events_columns",
          "posthog_team"."recording_domains",
+         "posthog_team"."cookieless_server_hash_mode",
          "posthog_team"."primary_dashboard_id",
          "posthog_team"."extra_settings",
          "posthog_team"."modifiers",