feat: add web console usage telemetry (#544)

* feat: add web console usage telemetry

* catch unmocked requests

* remove reset test

* reset module for each test

* restore mocks

* lint errors & user agent polyfill on ci

* no manual ua parsing

* get endpoint console-event-config

* submodule

* add actions to store

* promo view event

* submodule

* submodule

* lint fix

* more events

* new events, change default models

Author: emrberk

e2e/questdb

@@ -62,6 +62,7 @@
     "@styled-icons/remix-line": "10.46.0",
     "allotment": "^1.19.3",
     "animate.css": "3.7.2",
+    "bowser": "^2.14.1",
     "compare-versions": "^5.0.1",
     "core-js": "^3.22.8",
     "date-fns": "4.1.0",
@@ -147,6 +148,7 @@
     "eslint-plugin-prettier": "^5.2.3",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.1.0",
+    "fake-indexeddb": "^6.2.5",
     "globals": "^15.0.0",
     "husky": "^9.1.7",
     "jiti": "^2.6.1",

package.json

@@ -20,11 +20,13 @@ export const CopyButton = ({
   text,
   iconOnly,
   size = "md",
+  onCopy,
   ...props
 }: {
   text: string
   iconOnly?: boolean
   size?: ButtonProps["size"]
+  onCopy?: () => void
 } & ButtonProps) => {
   const [copied, setCopied] = useState(false)
   const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
@@ -48,6 +50,7 @@ export const CopyButton = ({
         e.stopPropagation()
         setCopied(true)
         timeoutRef.current = setTimeout(() => setCopied(false), 2000)
+        onCopy?.()
       }}
       {...(!iconOnly && {
         prefixIcon: <FileCopy size={size === "sm" ? "12px" : "16px"} />,

src/components/CopyButton/index.tsx

@@ -11,6 +11,8 @@ import { Button } from "../Button"
 import { ContentWrapper } from "./content-wrapper"
 import { Panel } from "../../components/Panel"
 import { XIcon, ArrowLeftIcon, ArrowRightIcon } from "@phosphor-icons/react"
+import { trackEvent } from "../../modules/ConsoleEventTracker"
+import { ConsoleEvent } from "../../modules/ConsoleEventTracker/events"
 
 type DrawerProps = {
   mode?: "modal" | "side"
@@ -143,10 +145,12 @@ export const Drawer = ({
   const canGoForward = useSelector(selectors.console.canGoForwardInSidebar)
 
   const handleNavigateBack = () => {
+    void trackEvent(ConsoleEvent.SIDEBAR_NAVIGATE)
     dispatch(actions.console.goBackInSidebar())
   }
 
   const handleNavigateForward = () => {
+    void trackEvent(ConsoleEvent.SIDEBAR_NAVIGATE)
     dispatch(actions.console.goForwardInSidebar())
   }
 

src/components/Drawer/index.tsx

@@ -13,6 +13,8 @@ import {
   executeAIFlow,
   createExplainFlowConfig,
 } from "../../utils/executeAIFlow"
+import { trackEvent } from "../../modules/ConsoleEventTracker"
+import { ConsoleEvent } from "../../modules/ConsoleEventTracker/events"
 
 const KeyBinding = styled(Box).attrs({ alignItems: "center", gap: "0" })`
   color: ${({ theme }) => theme.color.pinkPrimary};
@@ -55,6 +57,7 @@ export const ExplainQueryButton = ({
   } = useAIConversation()
 
   const handleExplainQuery = () => {
+    void trackEvent(ConsoleEvent.AI_EXPLAIN_QUERY)
     const currentModel = currentModelValue!
     const apiKey = apiKeyValue!
 

src/components/ExplainQueryButton/index.tsx

@@ -12,6 +12,8 @@ import { useAIConversation } from "../../providers/AIConversationProvider"
 import { extractErrorByQueryKey } from "../../scenes/Editor/utils"
 import type { ExecutionRefs } from "../../scenes/Editor/index"
 import { executeAIFlow, createFixFlowConfig } from "../../utils/executeAIFlow"
+import { trackEvent } from "../../modules/ConsoleEventTracker"
+import { ConsoleEvent } from "../../modules/ConsoleEventTracker/events"
 
 const FixButton = styled(Button)`
   gap: 1rem;
@@ -40,6 +42,7 @@ export const FixQueryButton = () => {
   } = useAIConversation()
 
   const handleFixQuery = () => {
+    void trackEvent(ConsoleEvent.AI_FIX_QUERY)
     const conversationId = chatWindowState.activeConversationId!
     const conversation = getConversationMeta(conversationId)!
 

src/components/FixQueryButton/index.tsx

@@ -9,6 +9,8 @@ import { FileCopy } from "@styled-icons/remix-line"
 import { CheckboxCircle } from "@styled-icons/remix-fill"
 import { copyToClipboard } from "../../utils/copyToClipboard"
 import { SquareSplitHorizontalIcon } from "@phosphor-icons/react"
+import { trackEvent } from "../../modules/ConsoleEventTracker"
+import { ConsoleEvent } from "../../modules/ConsoleEventTracker/events"
 
 const EditorWrapper = styled.div<{ $noBorder?: boolean }>`
   position: relative;
@@ -161,7 +163,12 @@ const LiteEditorToolbar = ({
     <ButtonsContainer>
       <OpenInEditorButton
         className="open-in-editor-btn"
-        onClick={onOpenInEditor}
+        onClick={() => {
+          void trackEvent(ConsoleEvent.AI_OPEN_IN_EDITOR, {
+            diffEditor,
+          })
+          onOpenInEditor()
+        }}
         title="Open in editor"
         data-hook="ai-open-in-editor-button"
       >

src/components/LiteEditor/index.tsx

@@ -26,6 +26,8 @@ import { AnthropicIcon } from "./AnthropicIcon"
 import { BrainIcon } from "./BrainIcon"
 import { PlusIcon, Plugs as PlugsIcon } from "@phosphor-icons/react"
 import { theme } from "../../theme"
+import { trackEvent } from "../../modules/ConsoleEventTracker"
+import { ConsoleEvent } from "../../modules/ConsoleEventTracker/events"
 import { CustomProviderModal } from "./CustomProviderModal"
 
 const ModalContent = styled.div`
@@ -759,6 +761,11 @@ export const ConfigurationModal = ({
   const handleComplete = () => {
     if (!selectedProvider || enabledModels.length === 0) return
 
+    void trackEvent(ConsoleEvent.AI_PROVIDER_CONFIGURE, {
+      name: selectedProvider,
+      grantSchemaAccess,
+    })
+
     const selectedModel =
       enabledModels.find(
         (m) =>
@@ -825,6 +832,7 @@ export const ConfigurationModal = ({
         setEnabledModels(defaultModels)
       }
       setError(null)
+      void trackEvent(ConsoleEvent.AI_CONFIGURATION_VALIDATE)
       return true
     } catch (err) {
       const errorMessage =
@@ -884,6 +892,13 @@ export const ConfigurationModal = ({
         },
       }
 
+      void trackEvent(ConsoleEvent.AI_PROVIDER_CONFIGURE, {
+        name: "custom",
+        grantSchemaAccess: definition.grantSchemaAccess ?? false,
+        type: definition.type,
+        contextWindow: definition.contextWindow,
+      })
+
       updateSettings(StoreKey.AI_ASSISTANT_SETTINGS, newSettings)
       toast.success("AI Assistant activated successfully")
       setCustomProviderModalOpen(false)

src/components/SetupAIAssistant/ConfigurationModal.tsx

@@ -14,6 +14,8 @@ import { AnthropicIcon } from "./AnthropicIcon"
 import { BrainIcon } from "./BrainIcon"
 import { PlugsIcon } from "@phosphor-icons/react"
 import { Tooltip } from "../Tooltip"
+import { trackEvent } from "../../modules/ConsoleEventTracker"
+import { ConsoleEvent } from "../../modules/ConsoleEventTracker/events"
 
 const ExpandUpDown = () => (
   <svg
@@ -173,6 +175,7 @@ export const ModelDropdown = () => {
   }, [enabledModelValues, aiAssistantSettings])
 
   const handleModelSelect = (modelValue: string) => {
+    void trackEvent(ConsoleEvent.AI_MODEL_CHANGE)
     updateSettings(StoreKey.AI_ASSISTANT_SETTINGS, {
       ...aiAssistantSettings,
       selectedModel: modelValue,

src/components/SetupAIAssistant/ModelDropdown.tsx

@@ -37,6 +37,8 @@ import type {
 import { ForwardRef } from "../ForwardRef"
 import { Badge, BadgeType } from "../../components/Badge"
 import { CheckboxCircle } from "@styled-icons/remix-fill"
+import { trackEvent } from "../../modules/ConsoleEventTracker"
+import { ConsoleEvent } from "../../modules/ConsoleEventTracker/events"
 import { CustomProviderModal } from "./CustomProviderModal"
 import { ManageModelsModal } from "./ManageModelsModal"
 
@@ -749,6 +751,7 @@ export const SettingsModal = ({ open, onOpenChange }: SettingsModalProps) => {
 
   const handleModelToggle = useCallback(
     (provider: ProviderId, modelValue: string) => {
+      void trackEvent(ConsoleEvent.AI_SETTINGS_MODEL_TOGGLE)
       setEnabledModels((prev) => {
         const current = prev[provider]
         const isEnabled = current.includes(modelValue)
@@ -765,6 +768,9 @@ export const SettingsModal = ({ open, onOpenChange }: SettingsModalProps) => {
 
   const handleSchemaAccessChange = useCallback(
     (provider: ProviderId, checked: boolean) => {
+      if (!checked) {
+        void trackEvent(ConsoleEvent.AI_SETTINGS_SCHEMA_ACCESS_REMOVE)
+      }
       setGrantSchemaAccess((prev) => ({ ...prev, [provider]: checked }))
     },
     [],
@@ -844,6 +850,9 @@ export const SettingsModal = ({ open, onOpenChange }: SettingsModalProps) => {
   const handleRemoveProvider = useCallback(
     (providerId: ProviderId) => {
       const isCustom = !BUILTIN_PROVIDERS[providerId]
+      void trackEvent(ConsoleEvent.AI_SETTINGS_PROVIDER_REMOVE, {
+        isCustom,
+      })
 
       if (isCustom) {
         setLocalCustomProviders((prev) => {
@@ -1216,6 +1225,9 @@ export const SettingsModal = ({ open, onOpenChange }: SettingsModalProps) => {
                             <EditButton
                               type="button"
                               onClick={() => {
+                                void trackEvent(
+                                  ConsoleEvent.AI_SETTINGS_API_KEY_EDIT,
+                                )
                                 inputRef.current?.focus()
                               }}
                               title="Edit API key"