chore(experiments): add usage events (#25619)

PostHog · Oct 16, 2024 · 024bddb · 024bddb
1 parent 861adc6
commit 024bddb
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 3 deletions.
diff --git a/frontend/src/lib/utils/eventUsageLogic.ts b/frontend/src/lib/utils/eventUsageLogic.ts
@@ -480,6 +480,11 @@ export const eventUsageLogic = kea<eventUsageLogicType>([
         }),
         reportExperimentInsightLoadFailed: true,
         reportExperimentVariantShipped: (experiment: Experiment) => ({ experiment }),
+        reportExperimentVariantScreenshotUploaded: (experimentId: number | 'new') => ({ experimentId }),
+        reportExperimentResultsLoadingTimeout: (experimentId: number | 'new') => ({ experimentId }),
+        reportExperimentReleaseConditionsViewed: (experimentId: number | 'new') => ({ experimentId }),
+        reportExperimentReleaseConditionsUpdated: (experimentId: number | 'new') => ({ experimentId }),
+
         // Definition Popover
         reportDataManagementDefinitionHovered: (type: TaxonomicFilterGroupType) => ({ type }),
         reportDataManagementDefinitionClickView: (type: TaxonomicFilterGroupType) => ({ type }),
@@ -1051,6 +1056,26 @@ export const eventUsageLogic = kea<eventUsageLogicType>([
                 secondary_metrics_count: experiment.secondary_metrics.length,
             })
         },
+        reportExperimentVariantScreenshotUploaded: ({ experimentId }) => {
+            posthog.capture('experiment variant screenshot uploaded', {
+                experiment_id: experimentId,
+            })
+        },
+        reportExperimentResultsLoadingTimeout: ({ experimentId }) => {
+            posthog.capture('experiment results loading timeout', {
+                experiment_id: experimentId,
+            })
+        },
+        reportExperimentReleaseConditionsViewed: ({ experimentId }) => {
+            posthog.capture('experiment release conditions viewed', {
+                experiment_id: experimentId,
+            })
+        },
+        reportExperimentReleaseConditionsUpdated: ({ experimentId }) => {
+            posthog.capture('experiment release conditions updated', {
+                experiment_id: experimentId,
+            })
+        },
         reportPropertyGroupFilterAdded: () => {
             posthog.capture('property group filter added')
         },

diff --git a/frontend/src/scenes/experiments/ExperimentView/DistributionTable.tsx b/frontend/src/scenes/experiments/ExperimentView/DistributionTable.tsx
@@ -13,6 +13,7 @@ import { VariantScreenshot } from './VariantScreenshot'
 
 export function DistributionTable(): JSX.Element {
     const { experimentId, experiment, experimentResults } = useValues(experimentLogic)
+    const { reportExperimentReleaseConditionsViewed } = useActions(experimentLogic)
     const { openSidePanel } = useActions(sidePanelStateLogic)
 
     const columns: LemonTableColumns<MultivariateFlagVariant> = [
@@ -60,7 +61,10 @@ export function DistributionTable(): JSX.Element {
                     <div className="ml-auto mb-2">
                         <LemonButton
                             icon={<IconFlag />}
-                            onClick={() => openSidePanel(SidePanelTab.ExperimentFeatureFlag)}
+                            onClick={() => {
+                                openSidePanel(SidePanelTab.ExperimentFeatureFlag)
+                                reportExperimentReleaseConditionsViewed(experiment.id)
+                            }}
                             type="secondary"
                             size="xsmall"
                             className="font-semibold"

diff --git a/frontend/src/scenes/experiments/ExperimentView/ReleaseConditionsTable.tsx b/frontend/src/scenes/experiments/ExperimentView/ReleaseConditionsTable.tsx
@@ -12,6 +12,7 @@ import { experimentLogic } from '../experimentLogic'
 
 export function ReleaseConditionsTable(): JSX.Element {
     const { experiment } = useValues(experimentLogic)
+    const { reportExperimentReleaseConditionsViewed } = useActions(experimentLogic)
     const { aggregationLabel } = useValues(groupsModel)
     const { openSidePanel } = useActions(sidePanelStateLogic)
 
@@ -65,7 +66,10 @@ export function ReleaseConditionsTable(): JSX.Element {
                     <div className="ml-auto mb-2">
                         <LemonButton
                             icon={<IconFlag />}
-                            onClick={() => openSidePanel(SidePanelTab.ExperimentFeatureFlag)}
+                            onClick={() => {
+                                openSidePanel(SidePanelTab.ExperimentFeatureFlag)
+                                reportExperimentReleaseConditionsViewed(experiment.id)
+                            }}
                             type="secondary"
                             size="xsmall"
                             className="font-semibold"

diff --git a/frontend/src/scenes/experiments/ExperimentView/VariantScreenshot.tsx b/frontend/src/scenes/experiments/ExperimentView/VariantScreenshot.tsx
@@ -15,7 +15,7 @@ export function VariantScreenshot({
     rolloutPercentage: number
 }): JSX.Element {
     const { experiment } = useValues(experimentLogic)
-    const { updateExperimentVariantImages } = useActions(experimentLogic)
+    const { updateExperimentVariantImages, reportExperimentVariantScreenshotUploaded } = useActions(experimentLogic)
 
     const [mediaId, setMediaId] = useState(experiment.parameters?.variant_screenshot_media_ids?.[variantKey] || null)
     const [isLoadingImage, setIsLoadingImage] = useState(true)
@@ -30,6 +30,7 @@ export function VariantScreenshot({
                     [variantKey]: id,
                 }
                 updateExperimentVariantImages(updatedVariantImages)
+                reportExperimentVariantScreenshotUploaded(experiment.id)
             }
         },
         onError: (detail) => {

diff --git a/frontend/src/scenes/experiments/experimentLogic.tsx b/frontend/src/scenes/experiments/experimentLogic.tsx
@@ -126,6 +126,9 @@ export const experimentLogic = kea<experimentLogicType>([
                 'reportExperimentReset',
                 'reportExperimentExposureCohortCreated',
                 'reportExperimentVariantShipped',
+                'reportExperimentVariantScreenshotUploaded',
+                'reportExperimentResultsLoadingTimeout',
+                'reportExperimentReleaseConditionsViewed',
             ],
             insightDataLogic({ dashboardItemId: EXPERIMENT_INSIGHT_ID }),
             ['setQuery'],
@@ -775,6 +778,9 @@ export const experimentLogic = kea<experimentLogicType>([
                         }
                     } catch (error: any) {
                         actions.setExperimentResultCalculationError({ detail: error.detail, statusCode: error.status })
+                        if (error.status === 504) {
+                            actions.reportExperimentResultsLoadingTimeout(values.experimentId)
+                        }
                         return null
                     }
                 },

diff --git a/frontend/src/scenes/feature-flags/featureFlagLogic.ts b/frontend/src/scenes/feature-flags/featureFlagLogic.ts
@@ -706,6 +706,7 @@ export const featureFlagLogic = kea<featureFlagLogicType>([
             const experimentId = currentPath.split('/').pop()
 
             if (experimentId) {
+                eventUsageLogic.actions.reportExperimentReleaseConditionsUpdated(parseInt(experimentId))
                 experimentLogic({ experimentId: parseInt(experimentId) }).actions.loadExperiment()
             }
         },