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

feat: Feature gate session replay controls using available_product_features #19401

Merged
merged 15 commits into from
Jan 2, 2024
Merged

feat: Feature gate session replay controls using available_product_features #19401

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
dd4e9ae
feature gate session replay control using available_product_features
Dec 18, 2023
afb3e3f
separate out feature checks
Dec 21, 2023
ef5b761
Merge remote-tracking branch 'origin/master' into by/feature-gate-ses…
Dec 21, 2023
6995712
refine the separate feature checks
Dec 21, 2023
fbb2f34
Merge branch 'master' into by/feature-gate-session-replay-product-fea…
xrdt Dec 22, 2023
3025b83
Update query snapshots
github-actions[bot] Dec 22, 2023
785e61a
Update UI snapshots for `chromium` (2)
github-actions[bot] Dec 22, 2023
50f2222
Update query snapshots
github-actions[bot] Dec 22, 2023
1cc8cb7
Update UI snapshots for `chromium` (2)
github-actions[bot] Dec 22, 2023
5326217
Update UI snapshots for `chromium` (2)
github-actions[bot] Dec 22, 2023
c5d1901
Update UI snapshots for `chromium` (2)
github-actions[bot] Dec 22, 2023
738ca6f
Update UI snapshots for `chromium` (2)
github-actions[bot] Dec 22, 2023
02bc27e
Update UI snapshots for `chromium` (2)
github-actions[bot] Dec 22, 2023
4382089
Update UI snapshots for `chromium` (2)
github-actions[bot] Dec 22, 2023
d76a472
Merge branch 'master' into by/feature-gate-session-replay-product-fea…
xrdt Jan 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions frontend/src/scenes/onboarding/Onboarding.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,9 @@ import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
import { useEffect, useState } from 'react'
import { SceneExport } from 'scenes/sceneTypes'
import { teamLogic } from 'scenes/teamLogic'
import { userLogic } from 'scenes/userLogic'

import { ProductKey } from '~/types'
import { AvailableFeature, ProductKey } from '~/types'

import { OnboardingBillingStep } from './OnboardingBillingStep'
import { OnboardingInviteTeammates } from './OnboardingInviteTeammates'
Expand Down Expand Up @@ -109,7 +110,7 @@ const ProductAnalyticsOnboarding = (): JSX.Element => {
)
}
const SessionReplayOnboarding = (): JSX.Element => {
const { featureFlags } = useValues(featureFlagLogic)
const { hasAvailableFeature } = useValues(userLogic)
const configOptions: ProductConfigOption[] = [
{
type: 'toggle',
Expand All @@ -129,7 +130,7 @@ const SessionReplayOnboarding = (): JSX.Element => {
},
]

if (featureFlags[FEATURE_FLAGS.SESSION_RECORDING_SAMPLING] === true) {
if (hasAvailableFeature(AvailableFeature.RECORDING_DURATION_MINIMUM)) {
configOptions.push({
type: 'select',
title: 'Minimum session duration (seconds)',
Expand Down
8 changes: 7 additions & 1 deletion frontend/src/scenes/settings/SettingsMap.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { AvailableFeature } from '~/types'

import { Invites } from './organization/Invites'
import { Members } from './organization/Members'
import { OrganizationDangerZone } from './organization/OrganizationDangerZone'
Expand Down Expand Up @@ -156,7 +158,11 @@ export const SettingsMap: SettingSection[] = [
id: 'replay-ingestion',
title: 'Ingestion controls',
component: <ReplayCostControl />,
flag: 'SESSION_RECORDING_SAMPLING',
features: [
AvailableFeature.SESSION_REPLAY_SAMPLING,
AvailableFeature.RECORDING_DURATION_MINIMUM,
AvailableFeature.FEATURE_FLAG_BASED_RECORDING,
],
},
],
},
Expand Down
326 changes: 167 additions & 159 deletions frontend/src/scenes/settings/project/SessionRecordingSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@ import { IconCancel } from 'lib/lemon-ui/icons'
import { LemonLabel } from 'lib/lemon-ui/LemonLabel/LemonLabel'
import { teamLogic } from 'scenes/teamLogic'
import { urls } from 'scenes/urls'
import { userLogic } from 'scenes/userLogic'

import { AvailableFeature } from '~/types'

export function ReplayGeneral(): JSX.Element {
const { updateCurrentTeam } = useActions(teamLogic)
Expand Down Expand Up @@ -176,169 +179,174 @@ export function ReplayAuthorizedDomains(): JSX.Element {
export function ReplayCostControl(): JSX.Element {
const { updateCurrentTeam } = useActions(teamLogic)
const { currentTeam } = useValues(teamLogic)
const { hasAvailableFeature } = useValues(userLogic)
const costControlFeaturesEnabled =
hasAvailableFeature(AvailableFeature.SESSION_REPLAY_SAMPLING) &&
hasAvailableFeature(AvailableFeature.RECORDING_DURATION_MINIMUM) &&
hasAvailableFeature(AvailableFeature.FEATURE_FLAG_BASED_RECORDING)
xrdt marked this conversation as resolved.
Show resolved Hide resolved

return (
<FlaggedFeature flag={FEATURE_FLAGS.SESSION_RECORDING_SAMPLING}>
<>
<p>
PostHog offers several tools to let you control the number of recordings you collect and which users
you collect recordings for.{' '}
<Link
to={'https://posthog.com/docs/session-replay/how-to-control-which-sessions-you-record'}
target={'blank'}
>
Learn more in our docs
</Link>
</p>
<LemonBanner className="mb-4" type={'info'}>
Requires posthog-js version 1.88.2 or greater
</LemonBanner>
<div className={'flex flex-row justify-between'}>
<LemonLabel className="text-base">Sampling</LemonLabel>
<LemonSelect
onChange={(v) => {
updateCurrentTeam({ session_recording_sample_rate: v })
}}
dropdownMatchSelectWidth={false}
options={[
{
label: '100% (no sampling)',
value: '1.00',
},
{
label: '95%',
value: '0.95',
},
{
label: '90%',
value: '0.90',
},
{
label: '85%',
value: '0.85',
},
{
label: '80%',
value: '0.80',
},
{
label: '75%',
value: '0.75',
},
{
label: '70%',
value: '0.70',
},
{
label: '65%',
value: '0.65',
},
{
label: '60%',
value: '0.60',
},
{
label: '55%',
value: '0.55',
},
{
label: '50%',
value: '0.50',
},
{
label: '45%',
value: '0.45',
},
{
label: '40%',
value: '0.40',
},
{
label: '35%',
value: '0.35',
},
{
label: '30%',
value: '0.30',
},
{
label: '25%',
value: '0.25',
},
{
label: '20%',
value: '0.20',
},
{
label: '15%',
value: '0.15',
},
{
label: '10%',
value: '0.10',
},
{
label: '5%',
value: '0.05',
},
{
label: '0% (replay disabled)',
value: '0.00',
},
]}
value={
typeof currentTeam?.session_recording_sample_rate === 'string'
? currentTeam?.session_recording_sample_rate
: '1.00'
}
/>
</div>
<p>
Use this setting to restrict the percentage of sessions that will be recorded. This is useful if you
want to reduce the amount of data you collect. 100% means all sessions will be collected. 50% means
roughly half of sessions will be collected.
</p>
<div className={'flex flex-row justify-between'}>
<LemonLabel className="text-base">Minimum session duration (seconds)</LemonLabel>
<LemonSelect
dropdownMatchSelectWidth={false}
onChange={(v) => {
updateCurrentTeam({ session_recording_minimum_duration_milliseconds: v })
return costControlFeaturesEnabled ? (
raquelmsmith marked this conversation as resolved.
Show resolved Hide resolved
<>
<p>
PostHog offers several tools to let you control the number of recordings you collect and which users you
collect recordings for.{' '}
<Link
to={'https://posthog.com/docs/session-replay/how-to-control-which-sessions-you-record'}
target={'blank'}
>
Learn more in our docs
</Link>
</p>
<LemonBanner className="mb-4" type={'info'}>
Requires posthog-js version 1.88.2 or greater
</LemonBanner>
<div className={'flex flex-row justify-between'}>
<LemonLabel className="text-base">Sampling</LemonLabel>
<LemonSelect
onChange={(v) => {
updateCurrentTeam({ session_recording_sample_rate: v })
}}
dropdownMatchSelectWidth={false}
options={[
{
label: '100% (no sampling)',
value: '1.00',
},
{
label: '95%',
value: '0.95',
},
{
label: '90%',
value: '0.90',
},
{
label: '85%',
value: '0.85',
},
{
label: '80%',
value: '0.80',
},
{
label: '75%',
value: '0.75',
},
{
label: '70%',
value: '0.70',
},
{
label: '65%',
value: '0.65',
},
{
label: '60%',
value: '0.60',
},
{
label: '55%',
value: '0.55',
},
{
label: '50%',
value: '0.50',
},
{
label: '45%',
value: '0.45',
},
{
label: '40%',
value: '0.40',
},
{
label: '35%',
value: '0.35',
},
{
label: '30%',
value: '0.30',
},
{
label: '25%',
value: '0.25',
},
{
label: '20%',
value: '0.20',
},
{
label: '15%',
value: '0.15',
},
{
label: '10%',
value: '0.10',
},
{
label: '5%',
value: '0.05',
},
{
label: '0% (replay disabled)',
value: '0.00',
},
]}
value={
typeof currentTeam?.session_recording_sample_rate === 'string'
? currentTeam?.session_recording_sample_rate
: '1.00'
}
/>
</div>
<p>
Use this setting to restrict the percentage of sessions that will be recorded. This is useful if you
want to reduce the amount of data you collect. 100% means all sessions will be collected. 50% means
roughly half of sessions will be collected.
</p>
<div className={'flex flex-row justify-between'}>
<LemonLabel className="text-base">Minimum session duration (seconds)</LemonLabel>
<LemonSelect
dropdownMatchSelectWidth={false}
onChange={(v) => {
updateCurrentTeam({ session_recording_minimum_duration_milliseconds: v })
}}
options={SESSION_REPLAY_MINIMUM_DURATION_OPTIONS}
value={currentTeam?.session_recording_minimum_duration_milliseconds}
/>
</div>
<p>
Setting a minimum session duration will ensure that only sessions that last longer than that value are
collected. This helps you avoid collecting sessions that are too short to be useful.
</p>
<div className={'flex flex-col space-y-2'}>
<LemonLabel className="text-base">Enable recordings using feature flag</LemonLabel>
<div className={'flex flex-row justify-start space-x-2'}>
<FlagSelector
value={currentTeam?.session_recording_linked_flag?.id ?? undefined}
onChange={(id, key) => {
updateCurrentTeam({ session_recording_linked_flag: { id, key } })
}}
options={SESSION_REPLAY_MINIMUM_DURATION_OPTIONS}
value={currentTeam?.session_recording_minimum_duration_milliseconds}
/>
</div>
<p>
Setting a minimum session duration will ensure that only sessions that last longer than that value
are collected. This helps you avoid collecting sessions that are too short to be useful.
</p>
<div className={'flex flex-col space-y-2'}>
<LemonLabel className="text-base">Enable recordings using feature flag</LemonLabel>
<div className={'flex flex-row justify-start space-x-2'}>
<FlagSelector
value={currentTeam?.session_recording_linked_flag?.id ?? undefined}
onChange={(id, key) => {
updateCurrentTeam({ session_recording_linked_flag: { id, key } })
}}
{currentTeam?.session_recording_linked_flag && (
<LemonButton
className="ml-2"
icon={<IconCancel />}
size="small"
status="stealth"
onClick={() => updateCurrentTeam({ session_recording_linked_flag: null })}
title="Clear selected flag"
/>
{currentTeam?.session_recording_linked_flag && (
<LemonButton
className="ml-2"
icon={<IconCancel />}
size="small"
status="stealth"
onClick={() => updateCurrentTeam({ session_recording_linked_flag: null })}
title="Clear selected flag"
/>
)}
</div>
)}
</div>
<p>
Linking a flag means that recordings will only be collected for users who have the flag enabled.
Only supports release toggles (boolean flags).
</p>
</>
</FlaggedFeature>
</div>
<p>
Linking a flag means that recordings will only be collected for users who have the flag enabled. Only
supports release toggles (boolean flags).
</p>
</>
) : (
<></>
)
}
Loading
Loading