feat(telemetry): add page_view and event to traces (#387)

* chore(sentry): add page_view traces, creates tracking analytics fn

* feat(telemtry): track client register/unregister

* feat(telemetry-server): track start/stop workload

* feat(telemetry): track workload creation from registry

* feat(telemetry): track run custom workload

* chore(telemetry): add analytics source and types attrs simplifying filter

* test: traking event run mcp

* fix: conflicts

* chore: add headers for identifying studio client

* fix: get only release tag without commit in development

Author: peppescg

main/src/util.ts

@@ -16,7 +16,8 @@ function getVersionFromGit(): string {
         stdio: 'pipe',
       }).trim()
 
-      return describe.replace(/^v/, '')
+      const version = describe.replace(/^v/, '').split('-')[0]
+      return version ?? app.getVersion()
     } catch {
       return app.getVersion()
     }

renderer/src/common/lib/analytics.ts

@@ -0,0 +1,35 @@
+import * as Sentry from '@sentry/electron/renderer'
+
+export function trackEvent(eventName: string, data = {}) {
+  Sentry.startSpan(
+    {
+      name: eventName,
+      op: 'user.event',
+      attributes: {
+        'analytics.source': 'tracking',
+        'analytics.type': 'event',
+        ...data,
+        timestamp: new Date().toISOString(),
+      },
+    },
+    () => {}
+  )
+}
+
+export function trackPageView(pageName: string, data = {}) {
+  Sentry.startSpan(
+    {
+      name: `Page: ${pageName}`,
+      op: 'page_view',
+      attributes: {
+        'analytics.source': 'tracking',
+        'analytics.type': 'page_view',
+        'page.name': pageName,
+        'action.type': 'navigation',
+        ...data,
+        timestamp: new Date().toISOString(),
+      },
+    },
+    () => {}
+  )
+}

renderer/src/features/clients/components/card-client.tsx

@@ -8,6 +8,7 @@ import {
 import { Switch } from '@/common/components/ui/switch'
 import { useMutationRegisterClient } from '../hooks/use-mutation-register-client'
 import { useMutationUnregisterClient } from '../hooks/use-mutation-unregister-client'
+import { trackEvent } from '@/common/lib/analytics'
 
 // There is an issue with openAPI generator in BE, similar issue https://github.com/stacklok/toolhive/issues/780
 const CLIENT_TYPE_LABEL_MAP = {
@@ -46,12 +47,18 @@ export function CardClient({ client }: { client: ClientMcpClientStatus }) {
                   name: client.client_type ?? '',
                 },
               })
+              trackEvent(`Client ${client.client_type} unregistered`, {
+                client: client.client_type,
+              })
             } else {
               registerClient({
                 body: {
                   name: client.client_type ?? '',
                 },
               })
+              trackEvent(`Client ${client.client_type} registered`, {
+                client: client.client_type,
+              })
             }
           }}
         />

renderer/src/features/mcp-servers/components/__tests__/card-mcp-server.test.tsx

@@ -11,6 +11,7 @@ const router = createTestRouter(() => (
     status="running"
     statusContext={undefined}
     url=""
+    transport="http"
   />
 ))
 

renderer/src/features/mcp-servers/components/card-mcp-server.tsx

@@ -28,14 +28,20 @@ import { useSearch } from '@tanstack/react-router'
 import { getApiV1BetaRegistryByNameServersByServerName } from '@/common/api/generated/sdk.gen'
 import { useEffect, useState } from 'react'
 import { twMerge } from 'tailwind-merge'
+import { trackEvent } from '@/common/lib/analytics'
 
 type CardContentMcpServerProps = {
   status: WorkloadsWorkload['status']
   statusContext: WorkloadsWorkload['status_context']
   name: string
+  transport: WorkloadsWorkload['transport_type']
 }
 
-function CardContentMcpServer({ name, status }: CardContentMcpServerProps) {
+function CardContentMcpServer({
+  name,
+  status,
+  transport,
+}: CardContentMcpServerProps) {
   const isRunning = status === 'running'
   const { mutateAsync: restartMutate, isPending: isRestartPending } =
     useMutationRestartServer({
@@ -55,18 +61,26 @@ function CardContentMcpServer({ name, status }: CardContentMcpServerProps) {
             isPending={isRestartPending || isStopPending}
             mutate={() => {
               if (isRunning) {
-                return stopMutate({
+                stopMutate({
                   path: {
                     name,
                   },
                 })
+                return trackEvent(`Workload ${name} stopped`, {
+                  workload: name,
+                  transport,
+                })
               }
 
-              return restartMutate({
+              restartMutate({
                 path: {
                   name,
                 },
               })
+              return trackEvent(`Workload ${name} started`, {
+                workload: name,
+                transport,
+              })
             }}
           />
         </div>
@@ -80,11 +94,13 @@ export function CardMcpServer({
   status,
   statusContext,
   url,
+  transport,
 }: {
   name: string
   status: WorkloadsWorkload['status']
   statusContext: WorkloadsWorkload['status_context']
   url: string
+  transport: WorkloadsWorkload['transport_type']
 }) {
   const confirm = useConfirm()
   const { mutateAsync: deleteServer, isPending: isDeletePending } =
@@ -265,6 +281,7 @@ export function CardMcpServer({
         status={status}
         statusContext={statusContext}
         name={name}
+        transport={transport}
       />
     </Card>
   )

renderer/src/features/mcp-servers/components/grid-cards-mcp-server.tsx

@@ -49,6 +49,7 @@ export function GridCardsMcpServers({
               status={mcpServer.status}
               statusContext={mcpServer.status_context}
               url={mcpServer.url ?? ''}
+              transport={mcpServer.transport_type}
             />
           ) : null
         )}

renderer/src/features/mcp-servers/lib/__tests__/orchestrate-run-custom-server.test.tsx

@@ -7,6 +7,13 @@ import { toast } from 'sonner'
 import { server } from '@/common/mocks/node'
 import { http, HttpResponse } from 'msw'
 import { mswEndpoint } from '@/common/mocks/msw-endpoint'
+import * as Sentry from '@sentry/electron/renderer'
+
+vi.mock('@sentry/electron/renderer', () => ({
+  startSpan: vi.fn(),
+}))
+
+const mockStartSpan = vi.mocked(Sentry.startSpan)
 
 vi.mock('sonner', async () => {
   const original = await vi.importActual<typeof import('sonner')>('sonner')
@@ -73,6 +80,22 @@ it('submits without any optional fields', async () => {
     '"foo-bar" started successfully.',
     expect.any(Object)
   )
+
+  expect(mockStartSpan).toHaveBeenCalledWith(
+    {
+      name: 'Workload foo-bar started',
+      op: 'user.event',
+      attributes: {
+        'analytics.source': 'tracking',
+        'analytics.type': 'event',
+        workload: 'foo-bar',
+        transport: 'stdio',
+        'route.pathname': '/',
+        timestamp: expect.any(String),
+      },
+    },
+    expect.any(Function)
+  )
 })
 
 it('handles new secrets properly', async () => {

renderer/src/features/mcp-servers/lib/orchestrate-run-custom-server.tsx

@@ -19,6 +19,7 @@ import { Button } from '@/common/components/ui/button'
 import type { FormSchemaRunMcpCommand } from './form-schema-run-mcp-server-with-command'
 import type { DefinedSecret, PreparedSecret } from '@/common/types/secrets'
 import { prepareSecretsWithoutNamingCollision } from '@/common/lib/secrets/prepare-secrets-without-naming-collision'
+import { trackEvent } from '@/common/lib/analytics'
 
 type SaveSecretFn = UseMutateAsyncFunction<
   V1CreateSecretResponse,
@@ -289,6 +290,11 @@ export async function orchestrateRunCustomServer({
       await createWorkload({
         body: createRequest,
       })
+      trackEvent(`Workload ${data.name} started`, {
+        workload: data.name,
+        transport: data.transport,
+        'route.pathname': '/',
+      })
     } catch (error) {
       toast.error(
         [

renderer/src/features/registry-servers/hooks/use-run-from-registry.tsx

@@ -26,6 +26,7 @@ import { toast } from 'sonner'
 import { Button } from '@/common/components/ui/button'
 import { prepareSecretsWithoutNamingCollision } from '@/common/lib/secrets/prepare-secrets-without-naming-collision'
 import { Link } from '@tanstack/react-router'
+import { trackEvent } from '@/common/lib/analytics'
 
 type InstallServerCheck = (
   data: FormSchemaRunFromRegistry
@@ -49,6 +50,12 @@ export function useRunFromRegistry({
   })
   const { mutateAsync: createWorkload } = useMutation({
     ...postApiV1BetaWorkloadsMutation(),
+    onSuccess: (data) => {
+      trackEvent(`Workload ${data.name} started`, {
+        workload: data.name,
+        'route.pathname': '/registry',
+      })
+    },
   })
 
   const handleSettled = useCallback<InstallServerCheck>(

renderer/src/renderer.tsx

@@ -16,6 +16,7 @@ import log from 'electron-log/renderer'
 
 import './index.css'
 import { ConfirmProvider } from './common/contexts/confirm/provider'
+import { trackPageView } from './common/lib/analytics'
 
 // Sentry setup
 Sentry.init({
@@ -58,15 +59,33 @@ const router = createRouter({
   history: memoryHistory,
 })
 
+router.subscribe('onLoad', (data) => {
+  trackPageView(data.toLocation.pathname, {
+    'route.from': data.fromLocation?.pathname ?? '/',
+    'route.pathname': data.toLocation.pathname,
+    'route.search': JSON.stringify(data.toLocation.search),
+    'route.hash': data.toLocation.hash,
+  })
+})
+
 if (!window.electronAPI || !window.electronAPI.getToolhivePort) {
   log.error('ToolHive port API not available in renderer')
 }
 
 ;(async () => {
   try {
     const port = await window.electronAPI.getToolhivePort()
+    const appVersion = await window.electronAPI.getAppVersion()
     const baseUrl = `http://localhost:${port}`
-    client.setConfig({ baseUrl })
+
+    client.setConfig({
+      baseUrl,
+      headers: {
+        'X-Client-Type': 'toolhive-studio',
+        'X-Client-Version': appVersion,
+        'X-Client-Platform': window.electronAPI.platform,
+      },
+    })
   } catch (e) {
     log.error('Failed to get ToolHive port from main process: ', e)
     throw e