diff --git a/frontend/src/lib/logic/featureFlagLogic.ts b/frontend/src/lib/logic/featureFlagLogic.ts index 87c471e05b9b..99fcb0e1dd5a 100644 --- a/frontend/src/lib/logic/featureFlagLogic.ts +++ b/frontend/src/lib/logic/featureFlagLogic.ts @@ -10,6 +10,45 @@ import posthog from 'posthog-js' type FeatureFlagsSet = { [flag: string]: boolean } +const eventsNotified: Record = {} +function notifyFlagIfNeeded(flag: string, flagState: boolean): void { + if (!eventsNotified[flag]) { + posthog.capture('$feature_flag_called', { + $feature_flag: flag, + $feature_flag_response: flagState, + }) + eventsNotified[flag] = true + } +} + +function spyOnFeatureFlags(featureFlags: FeatureFlagsSet): FeatureFlagsSet { + if (typeof window.Proxy !== 'undefined') { + return new Proxy( + {}, + { + get(_, flag) { + const flagString = flag.toString() + const flagState = !!featureFlags[flagString] + notifyFlagIfNeeded(flagString, flagState) + return flagState + }, + } + ) + } else { + // Fallback for IE11. Won't track "false" results. ¯\_(ツ)_/¯ + const flags: FeatureFlagsSet = {} + for (const flag of Object.keys(featureFlags)) { + Object.defineProperty(flags, flag, { + get: function () { + notifyFlagIfNeeded(flag, true) + return true + }, + }) + } + return flags + } +} + export const featureFlagLogic = kea>({ actions: { setFeatureFlags: (featureFlags: string[]) => ({ featureFlags }), @@ -19,12 +58,12 @@ export const featureFlagLogic = kea { + setFeatureFlags: (_, { featureFlags }) => { const flags: FeatureFlagsSet = {} for (const flag of featureFlags) { flags[flag] = true } - return flags + return spyOnFeatureFlags(flags) }, }, ],