From c838229ec92a7a96fb263fb17311d916ddfa98a2 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Mon, 10 Aug 2026 19:23:48 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=88(frontend)=20snapshot=20media=20dev?=
 =?UTF-8?q?ices=20on=20the=20happy=20path?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Also snapshot the state of media devices when the user successfully
joins a meeting, not only when something goes wrong. This gives us
the baseline needed to compute meaningful ratios — for example, the
share of users who join a meeting without granting permissions, or
without a microphone or camera available.

Without a happy-path measurement, the current error-only data has no
denominator to compare against.
---
 CHANGELOG.md                                              | 1 +
 src/frontend/src/features/analytics/telemetry.ts          | 4 +++-
 src/frontend/src/features/rooms/components/Conference.tsx | 8 ++------
 .../rooms/livekit/components/ConnectionObserver.tsx       | 4 ++--
 4 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index df607e8c..7247e762 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,7 @@ and this project adheres to
 - ✨(frontend) add a sound tester to the output select menu
 - ✨(frontend) prompt for permissions when toggling a denied device
 - ⚗️(frontend) capture console.error in PostHog
+- 📈(frontend) snapshot media devices on the happy path
 
 ### Changed
 
diff --git a/src/frontend/src/features/analytics/telemetry.ts b/src/frontend/src/features/analytics/telemetry.ts
index b2d2adcf..20b0dc69 100644
--- a/src/frontend/src/features/analytics/telemetry.ts
+++ b/src/frontend/src/features/analytics/telemetry.ts
@@ -135,7 +135,9 @@ export const captureMediaEvent = async (
     | 'media-device-topology'
     | 'media-device-success'
     | 'device-not-found'
-    | 'permissions-denied',
+    | 'permissions-denied'
+    | 'visit-room'
+    | 'connection-event',
   props: Record<string, unknown>
 ) => {
   captureEvent(event, { ...props, ...(await deviceSnapshot()) })
diff --git a/src/frontend/src/features/rooms/components/Conference.tsx b/src/frontend/src/features/rooms/components/Conference.tsx
index 2471a1b0..215f6a74 100644
--- a/src/frontend/src/features/rooms/components/Conference.tsx
+++ b/src/frontend/src/features/rooms/components/Conference.tsx
@@ -26,11 +26,7 @@ import { css } from '@/styled-system/css'
 import { BackgroundProcessorFactory } from '../livekit/components/blur'
 import { LocalUserChoices } from '@/stores/userChoices'
 import { MediaDeviceErrorAlert } from './MediaDeviceErrorAlert'
-import {
-  captureEvent,
-  reportError,
-  captureMediaEvent,
-} from '@/features/analytics/telemetry'
+import { captureMediaEvent, reportError } from '@/features/analytics/telemetry'
 import { useConfig } from '@/api/useConfig'
 import { isFireFox } from '@/utils/livekit'
 import { useIsMobile } from '@/utils/useIsMobile'
@@ -65,7 +61,7 @@ export const Conference = ({
   const { username } = useSnapshot(userStore)
 
   useEffect(() => {
-    captureEvent('visit-room', { slug: roomId })
+    void captureMediaEvent('visit-room', { slug: roomId })
   }, [roomId])
   const fetchKey = [keys.room, roomId]
 
diff --git a/src/frontend/src/features/rooms/livekit/components/ConnectionObserver.tsx b/src/frontend/src/features/rooms/livekit/components/ConnectionObserver.tsx
index f4afc6eb..baab2a9d 100644
--- a/src/frontend/src/features/rooms/livekit/components/ConnectionObserver.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/ConnectionObserver.tsx
@@ -14,7 +14,7 @@ import { connectionObserverStore } from '@/stores/connectionObserver'
 import { useFeatureFlagEnabled } from 'posthog-js/react'
 import { isMobileBrowser } from '@livekit/components-core'
 import { FeatureFlags } from '@/features/analytics/enums'
-import { captureEvent } from '@/features/analytics/telemetry'
+import { captureEvent, captureMediaEvent } from '@/features/analytics/telemetry'
 
 const CANDIDATE_POLL_INTERVAL_MS = 5000
 
@@ -182,7 +182,7 @@ export const ConnectionObserver = () => {
       // total session duration from first connect to final disconnect.
       if (connectionStartTimeRef.current != null) return
       connectionStartTimeRef.current = Date.now()
-      captureEvent('connection-event')
+      void captureMediaEvent('connection-event', {})
     }
 
     const handleReconnect = () => {