ref(cmd-k): Extract analytics into observer hook, simplify

- Move all analytics into useCommandPaletteAnalytics hook that reads
  state from context and tracks events internally
- Generate session_id inside the hook (not in shared state context)
- Remove _closeMethod hacky module-level variable
- Remove method field from closed event (completed boolean suffices)
- UI components are now free of analytics code
- Hook returns only recordAction for final navigate/callback actions

Author: jshchnz

static/app/actionCreators/modal.tsx

@@ -1,5 +1,3 @@
-import uniqueId from 'lodash/uniqueId';
-
 import type {
   CommandPaletteState,
   CommandPaletteDispatch,
@@ -162,33 +160,22 @@ export async function toggleCommandPalette(
   dispatch: CommandPaletteDispatch,
   source: 'button' | 'keyboard'
 ) {
-  const modalModule = await import('sentry/components/commandPalette/ui/modal');
-  const {default: Modal, modalCss} = modalModule;
+  const {default: Modal, modalCss} =
+    await import('sentry/components/commandPalette/ui/modal');
 
   function closeCommandPaletteModal() {
     dispatch({type: 'toggle modal'});
   }
 
   if (state.open) {
-    modalModule._closeMethod = 'keyboard_toggle';
     closeCommandPaletteModal();
     closeModal();
   } else {
-    const sessionId = uniqueId('cmd-palette-');
-    trackAnalytics('command_palette.opened', {
-      organization,
-      source,
-      session_id: sessionId,
-    });
-    dispatch({type: 'toggle modal', session_id: sessionId});
+    trackAnalytics('command_palette.opened', {organization, source});
+    dispatch({type: 'toggle modal'});
     openModal(deps => <Modal {...deps} {...options} />, {
       modalCss,
-      onClose: reason => {
-        if (reason === 'backdrop-click') {
-          modalModule._closeMethod = 'backdrop_click';
-        }
-        closeCommandPaletteModal();
-      },
+      onClose: closeCommandPaletteModal,
     });
   }
 }

static/app/components/commandPalette/ui/commandPalette.tsx

@@ -1,12 +1,11 @@
-import {Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef} from 'react';
+import {Fragment, useCallback, useLayoutEffect, useMemo} from 'react';
 import {preload} from 'react-dom';
 import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 import {ListKeyboardDelegate, useSelectableCollection} from '@react-aria/selection';
 import {mergeProps} from '@react-aria/utils';
 import {Item} from '@react-stately/collections';
 import {useTreeState} from '@react-stately/tree';
-import * as Sentry from '@sentry/react';
 import {AnimatePresence, motion} from 'framer-motion';
 
 import errorIllustration from 'sentry-images/spot/computer-missing.svg';
@@ -29,14 +28,13 @@ import {
   useCommandPaletteDispatch,
   useCommandPaletteState,
 } from 'sentry/components/commandPalette/ui/commandPaletteStateContext';
+import {useCommandPaletteAnalytics} from 'sentry/components/commandPalette/useCommandPaletteAnalytics';
 import {FeedbackButton} from 'sentry/components/feedbackButton/feedbackButton';
 import {IconArrow, IconClose, IconSearch} from 'sentry/icons';
 import {IconDefaultsProvider} from 'sentry/icons/useIconDefaults';
 import {t} from 'sentry/locale';
-import {trackAnalytics} from 'sentry/utils/analytics';
 import {fzf} from 'sentry/utils/search/fzf';
 import type {Theme} from 'sentry/utils/theme';
-import {useOrganization} from 'sentry/utils/useOrganization';
 
 const MotionButton = motion.create(Button);
 const MotionIconSearch = motion.create(IconSearch);
@@ -65,27 +63,16 @@ type CommandPaletteActionWithPriority = CommandPaletteActionWithKey & {
 };
 
 interface CommandPaletteProps {
-  onAction: (
-    action: Exclude<CommandPaletteActionWithKey, {type: 'group'}>,
-    resultIndex: number,
-    group: string
-  ) => void;
-  onQueryTracked?: () => void;
-  sessionId?: string;
+  onAction: (action: Exclude<CommandPaletteActionWithKey, {type: 'group'}>) => void;
 }
 
 export function CommandPalette(props: CommandPaletteProps) {
   const theme = useTheme();
 
   const actions = useCommandPaletteActions();
-  const organization = useOrganization();
   const state = useCommandPaletteState();
   const dispatch = useCommandPaletteDispatch();
 
-  // Debounced query tracking (500ms)
-  const queryTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const lastTrackedQueryRef = useRef('');
-
   // Preload the empty state image so it's ready if/when there are no results
   // Guard against non-string imports (e.g. SVG objects in test environments)
   if (typeof errorIllustration === 'string') {
@@ -107,30 +94,7 @@ export function CommandPalette(props: CommandPaletteProps) {
     [state.query, displayedActions]
   );
 
-  // Debounced query analytics
-  useEffect(() => {
-    if (queryTimerRef.current) {
-      clearTimeout(queryTimerRef.current);
-    }
-    if (state.query.length > 0 && state.query !== lastTrackedQueryRef.current) {
-      queryTimerRef.current = setTimeout(() => {
-        lastTrackedQueryRef.current = state.query;
-        trackAnalytics('command_palette.searched', {
-          organization,
-          query: state.query,
-          result_count: filteredActions.length,
-          session_id: props.sessionId ?? '',
-        });
-        props.onQueryTracked?.();
-      }, 500);
-    }
-    return () => {
-      if (queryTimerRef.current) {
-        clearTimeout(queryTimerRef.current);
-      }
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [state.query, filteredActions.length]);
+  const analytics = useCommandPaletteAnalytics(filteredActions.length);
 
   const sections = useMemo(
     () => groupActionsBySection(filteredActions),
@@ -210,26 +174,16 @@ export function CommandPalette(props: CommandPaletteProps) {
         return;
       }
 
-      const group = action.groupingKey ?? '';
-
       if (action.type === 'group') {
-        trackAnalytics('command_palette.action_selected', {
-          organization,
-          action: action.display.label,
-          query: state.query,
-          action_type: 'group',
-          group,
-          result_index: resultIndex,
-          session_id: props.sessionId ?? '',
-        });
         dispatch({type: 'push action', action});
         return;
       }
 
+      analytics.recordAction(action, resultIndex, action.groupingKey ?? '');
       dispatch({type: 'trigger action'});
-      props.onAction(action, resultIndex, group);
+      props.onAction(action);
     },
-    [filteredActions, dispatch, props, treeState, organization, state.query]
+    [filteredActions, dispatch, props, analytics, treeState]
   );
 
   return (
@@ -486,26 +440,6 @@ function flattenActions(
 }
 
 function CommandPaletteNoResults() {
-  const organization = useOrganization();
-  const {query, action, session_id} = useCommandPaletteState();
-
-  useEffect(() => {
-    const actionLabel =
-      typeof action?.value.action.display.label === 'string'
-        ? action.value.action.display.label
-        : undefined;
-    trackAnalytics('command_palette.no_results', {
-      organization,
-      query,
-      action: actionLabel,
-      session_id,
-    });
-    Sentry.logger.info('Command palette returned no results', {
-      query,
-      action: actionLabel,
-    });
-  }, [organization, query, action, session_id]);
-
   return (
     <Flex
       direction="column"

static/app/components/commandPalette/ui/commandPaletteStateContext.tsx

@@ -19,13 +19,12 @@ export type CommandPaletteState = {
   input: React.RefObject<HTMLInputElement | null>;
   open: boolean;
   query: string;
-  session_id: string;
 };
 
 export type CommandPaletteDispatch = React.Dispatch<CommandPaletteAction>;
 
 export type CommandPaletteAction =
-  | {type: 'toggle modal'; session_id?: string}
+  | {type: 'toggle modal'}
   | {type: 'reset'}
   | {query: string; type: 'set query'}
   | {action: CommandPaletteActionWithKey; type: 'push action'}
@@ -46,7 +45,6 @@ function commandPaletteReducer(
       return {
         ...state,
         open: !state.open,
-        session_id: action.session_id ?? state.session_id,
       };
     case 'reset':
       return {
@@ -110,7 +108,6 @@ export function CommandPaletteStateProvider({
     query: '',
     action: null,
     open: false,
-    session_id: '',
   });
 
   return (

static/app/components/commandPalette/ui/modal.tsx

@@ -1,136 +1,45 @@
-import {useCallback, useEffect, useRef} from 'react';
+import {useCallback} from 'react';
 import {css} from '@emotion/react';
 
 import type {ModalRenderProps} from 'sentry/actionCreators/modal';
 import {closeModal} from 'sentry/actionCreators/modal';
 import type {CommandPaletteActionWithKey} from 'sentry/components/commandPalette/types';
 import {CommandPalette} from 'sentry/components/commandPalette/ui/commandPalette';
-import {
-  getActionPath,
-  useCommandPaletteState,
-} from 'sentry/components/commandPalette/ui/commandPaletteStateContext';
+import {useCommandPaletteState} from 'sentry/components/commandPalette/ui/commandPaletteStateContext';
 import {useDsnLookupActions} from 'sentry/components/commandPalette/useDsnLookupActions';
-import {trackAnalytics} from 'sentry/utils/analytics';
 import type {Theme} from 'sentry/utils/theme';
 import {unreachable} from 'sentry/utils/unreachable';
 import {normalizeUrl} from 'sentry/utils/url/normalizeUrl';
 import {useNavigate} from 'sentry/utils/useNavigate';
-import {useOrganization} from 'sentry/utils/useOrganization';
-
-/**
- * Stores the close method so the unmount effect can include it in analytics.
- * Set externally by toggleCommandPalette's onClose callback.
- */
-export let _closeMethod = 'escape';
 
 export default function CommandPaletteModal({Body}: ModalRenderProps) {
   const navigate = useNavigate();
-  const organization = useOrganization();
-
-  const state = useCommandPaletteState();
-  const {query, session_id} = state;
+  const {query} = useCommandPaletteState();
 
   useDsnLookupActions(query);
 
-  const openedAtRef = useRef(Date.now());
-  const actionsSelectedRef = useRef(0);
-  const queriesTypedRef = useRef(0);
-  const completedRef = useRef(false);
-  const stateRef = useRef(state);
-  stateRef.current = state;
-
-  // Reset close method on mount
-  _closeMethod = 'escape';
-
-  // Fire closed + session summary on unmount
-  useEffect(() => {
-    const openedAt = openedAtRef.current;
-    // These refs accumulate values during the modal's lifetime and are intentionally
-    // read at cleanup time to capture the final session metrics.
-    const actions = actionsSelectedRef;
-    const queries = queriesTypedRef;
-    const done = completedRef;
-
-    return () => {
-      const s = stateRef.current;
-      let depth = 0;
-      let node = s.action;
-      while (node !== null) {
-        depth++;
-        node = node.previous;
-      }
-
-      trackAnalytics('command_palette.closed', {
-        organization,
-        method: _closeMethod as 'escape',
-        query: s.query,
-        had_interaction: s.query.length > 0 || s.action !== null || actions.current > 0,
-        session_id: s.session_id,
-      });
-
-      trackAnalytics('command_palette.session', {
-        organization,
-        session_id: s.session_id,
-        duration_ms: Date.now() - openedAt,
-        actions_selected: actions.current,
-        queries_typed: queries.current,
-        completed: done.current,
-        max_drill_depth: depth,
-      });
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   const handleSelect = useCallback(
-    (
-      action: Exclude<CommandPaletteActionWithKey, {type: 'group'}>,
-      resultIndex: number,
-      group: string
-    ) => {
+    (action: Exclude<CommandPaletteActionWithKey, {type: 'group'}>) => {
       const actionType = action.type;
       switch (actionType) {
         case 'navigate':
-        case 'callback': {
-          const path = getActionPath(state);
-          const label =
-            path.length > 0 ? `${path} → ${action.display.label}` : action.display.label;
-          trackAnalytics('command_palette.action_selected', {
-            organization,
-            action: label,
-            query,
-            action_type: actionType,
-            group,
-            result_index: resultIndex,
-            session_id,
-          });
-          _closeMethod = 'action_selected';
-          actionsSelectedRef.current++;
-          completedRef.current = true;
-          if (actionType === 'navigate') {
-            navigate(normalizeUrl(action.to));
-          } else {
-            action.onAction();
-          }
+          navigate(normalizeUrl(action.to));
+          break;
+        case 'callback':
+          action.onAction();
           break;
-        }
         default:
           unreachable(actionType);
           break;
       }
       closeModal();
     },
-    [navigate, organization, state, query, session_id]
+    [navigate]
   );
 
   return (
     <Body>
-      <CommandPalette
-        onAction={handleSelect}
-        sessionId={session_id}
-        onQueryTracked={() => {
-          queriesTypedRef.current++;
-        }}
-      />
+      <CommandPalette onAction={handleSelect} />
     </Body>
   );
 }