[rh-test] Backport Cloud/tracking v2 (#6400)

src/components/dialog/content/credit/CreditTopUpOption.vue

@@ -43,8 +43,10 @@ import Tag from 'primevue/tag'
 import { onBeforeUnmount, ref } from 'vue'
 
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
+import { useTelemetry } from '@/platform/telemetry'
 
 const authActions = useFirebaseAuthActions()
+const telemetry = useTelemetry()
 
 const {
   amount,
@@ -61,8 +63,11 @@ const didClickBuyNow = ref(false)
 const loading = ref(false)
 
 const handleBuyNow = async () => {
+  const creditAmount = editable ? customAmount.value : amount
+  telemetry?.trackApiCreditTopupButtonPurchaseClicked(creditAmount)
+
   loading.value = true
-  await authActions.purchaseCredits(editable ? customAmount.value : amount)
+  await authActions.purchaseCredits(creditAmount)
   loading.value = false
   didClickBuyNow.value = true
 }

src/components/searchbox/NodeSearchBox.vue

@@ -51,7 +51,7 @@
       multiple
       :option-label="'display_name'"
       @complete="search($event.query)"
-      @option-select="emit('addNode', $event.value)"
+      @option-select="onAddNode($event.value)"
       @focused-option-changed="setHoverSuggestion($event)"
     >
       <template #option="{ option }">
@@ -78,6 +78,7 @@
 </template>
 
 <script setup lang="ts">
+import { debounce } from 'es-toolkit/compat'
 import Button from 'primevue/button'
 import Dialog from 'primevue/dialog'
 import { computed, nextTick, onMounted, ref } from 'vue'
@@ -88,6 +89,7 @@ import AutoCompletePlus from '@/components/primevueOverride/AutoCompletePlus.vue
 import NodeSearchFilter from '@/components/searchbox/NodeSearchFilter.vue'
 import NodeSearchItem from '@/components/searchbox/NodeSearchItem.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
+import { useTelemetry } from '@/platform/telemetry'
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 import { useNodeDefStore, useNodeFrequencyStore } from '@/stores/nodeDefStore'
 import type { FuseFilterWithValue } from '@/utils/fuseUtil'
@@ -96,6 +98,7 @@ import SearchFilterChip from '../common/SearchFilterChip.vue'
 
 const settingStore = useSettingStore()
 const { t } = useI18n()
+const telemetry = useTelemetry()
 
 const enableNodePreview = computed(() =>
   settingStore.get('Comfy.NodeSearchBoxImpl.NodePreview')
@@ -117,6 +120,14 @@ const placeholder = computed(() => {
 
 const nodeDefStore = useNodeDefStore()
 const nodeFrequencyStore = useNodeFrequencyStore()
+
+// Debounced search tracking (500ms as per implementation plan)
+const debouncedTrackSearch = debounce((query: string) => {
+  if (query.trim()) {
+    telemetry?.trackNodeSearch({ query })
+  }
+}, 500)
+
 const search = (query: string) => {
   const queryIsEmpty = query === '' && filters.length === 0
   currentQuery.value = query
@@ -127,10 +138,22 @@ const search = (query: string) => {
           limit: searchLimit
         })
       ]
+
+  // Track search queries with debounce
+  debouncedTrackSearch(query)
 }
 
 const emit = defineEmits(['addFilter', 'removeFilter', 'addNode'])
 
+// Track node selection and emit addNode event
+const onAddNode = (nodeDef: ComfyNodeDefImpl) => {
+  telemetry?.trackNodeSearchResultSelected({
+    node_type: nodeDef.name,
+    last_query: currentQuery.value
+  })
+  emit('addNode', nodeDef)
+}
+
 let inputElement: HTMLInputElement | null = null
 const reFocusInput = async () => {
   inputElement ??= document.getElementById(inputId) as HTMLInputElement

src/composables/useTemplateFiltering.ts

@@ -1,8 +1,10 @@
 import { refDebounced } from '@vueuse/core'
+import { debounce } from 'es-toolkit/compat'
 import Fuse from 'fuse.js'
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import type { Ref } from 'vue'
 
+import { useTelemetry } from '@/platform/telemetry'
 import type { TemplateInfo } from '@/platform/workflow/templates/types/template'
 
 export function useTemplateFiltering(
@@ -189,6 +191,38 @@ export function useTemplateFiltering(
   const filteredCount = computed(() => filteredTemplates.value.length)
   const totalCount = computed(() => templatesArray.value.length)
 
+  // Template filter tracking (debounced to avoid excessive events)
+  const debouncedTrackFilterChange = debounce(() => {
+    useTelemetry()?.trackTemplateFilterChanged({
+      search_query: searchQuery.value || undefined,
+      selected_models: selectedModels.value,
+      selected_use_cases: selectedUseCases.value,
+      selected_licenses: selectedLicenses.value,
+      sort_by: sortBy.value,
+      filtered_count: filteredCount.value,
+      total_count: totalCount.value
+    })
+  }, 500)
+
+  // Watch for filter changes and track them
+  watch(
+    [searchQuery, selectedModels, selectedUseCases, selectedLicenses, sortBy],
+    () => {
+      // Only track if at least one filter is active (to avoid tracking initial state)
+      const hasActiveFilters =
+        searchQuery.value.trim() !== '' ||
+        selectedModels.value.length > 0 ||
+        selectedUseCases.value.length > 0 ||
+        selectedLicenses.value.length > 0 ||
+        sortBy.value !== 'default'
+
+      if (hasActiveFilters) {
+        debouncedTrackFilterChange()
+      }
+    },
+    { deep: true }
+  )
+
   return {
     // State
     searchQuery,

src/platform/cloud/subscription/components/SubscribeButton.vue

@@ -52,6 +52,7 @@ const emit = defineEmits<{
 }>()
 
 const { subscribe, isActiveSubscription, fetchStatus } = useSubscription()
+const telemetry = useTelemetry()
 
 const isLoading = ref(false)
 const isPolling = ref(false)
@@ -77,6 +78,7 @@ const startPollingSubscriptionStatus = () => {
 
       if (isActiveSubscription.value) {
         stopPolling()
+        telemetry?.trackMonthlySubscriptionSucceeded()
         emit('subscribed')
       }
     } catch (error) {