@stream-io/video-client 1.52.0 → 1.53.0

package/src/Call.ts

@@ -130,6 +130,7 @@ import {
   ClientCapability,
   ClientDetails,
   Codec,
+  ErrorCode,
   ParticipantSource,
   PeerType,
   PublishOption,
@@ -145,10 +146,12 @@ import {
   StatsReporter,
   Tracer,
 } from './stats';
+import type { ClientEventReporter, JoinReason } from './reporting';
 import { AudioBindingsWatchdog } from './helpers/AudioBindingsWatchdog';
 import { BlockedAudioTracker } from './helpers/BlockedAudioTracker';
 import { TrackSubscriptionManager } from './helpers/TrackSubscriptionManager';
 import { DynascaleManager } from './helpers/DynascaleManager';
+import { createFirstVideoFrameDetector } from './helpers/firstVideoFrame';
 import { ViewportTracker } from './helpers/ViewportTracker';
 import { PermissionsContext } from './permissions';
 import { CallTypes } from './CallType';
@@ -292,6 +295,7 @@ export class Call {
 
   private readonly clientStore: StreamVideoWriteableStateStore;
   public readonly streamClient: StreamClient;
+  public readonly clientEventReporter: ClientEventReporter;
   private sfuClient?: StreamSfuClient;
   private sfuClientTag = 0;
   private unifiedSessionId?: string;
@@ -357,6 +361,7 @@ export class Call {
     type,
     id,
     streamClient,
+    clientEventReporter,
     members,
     ownCapabilities,
     sortParticipantsBy,
@@ -370,6 +375,7 @@ export class Call {
     this.ringingSubject = new BehaviorSubject(ringing);
     this.watching = watching;
     this.streamClient = streamClient;
+    this.clientEventReporter = clientEventReporter;
     this.clientStore = clientStore;
     this.streamClientBasePath = `/call/${this.type}/${this.id}`;
     this.logger = videoLoggerSystem.getLogger('Call');
@@ -740,11 +746,18 @@ export class Call {
       this.lastStatsOptions = undefined;
 
       await this.subscriber?.dispose();
+      this.clientEventReporter.abort(this.cid, {
+        code: 'CLIENT_ABORTED',
+        reason: leaveReason,
+      });
+
       this.subscriber = undefined;
 
       await this.publisher?.dispose();
       this.publisher = undefined;
 
+      this.clientEventReporter.unregisterCall(this.cid);
+
       await this.sfuClient?.leaveAndClose(leaveReason);
       this.sfuClient = undefined;
       this.trackSubscriptionManager.setSfuClient(undefined);
@@ -1052,6 +1065,14 @@ export class Call {
 
     await this.setup();
 
+    this.clientEventReporter.registerCall(this.cid, {
+      callType: this.type,
+      callId: this.id,
+      getCallSessionId: () => this.state.session?.id ?? '',
+      getSfuId: () => this.credentials?.server.edge_name ?? '',
+      getUserSessionId: () => this.sfuClient?.sessionId ?? '',
+    });
+
     this.joinResponseTimeout = joinResponseTimeout;
     this.rpcRequestTimeout = rpcRequestTimeout;
     // we will count the number of join failures per SFU.
@@ -1061,44 +1082,56 @@ export class Call {
     const joinData: JoinCallData = data;
     maxJoinRetries = Math.max(maxJoinRetries, 1);
     try {
-      for (let attempt = 0; attempt < maxJoinRetries; attempt++) {
-        try {
-          this.logger.trace(`Joining call (${attempt})`, this.cid);
-          await this.doJoin(data);
-          delete joinData.migrating_from;
-          delete joinData.migrating_from_list;
-          break;
-        } catch (err) {
-          this.logger.warn(`Failed to join call (${attempt})`, this.cid);
-          if (
-            (err instanceof ErrorFromResponse && err.unrecoverable) ||
-            (err instanceof SfuJoinError && err.unrecoverable)
-          ) {
-            // if the error is unrecoverable, we should not retry as that signals
-            // that connectivity is good, but the coordinator doesn't allow the user
-            // to join the call due to some reason (e.g., ended call, expired token...)
-            throw err;
-          }
+      await this.clientEventReporter.withJoinLifecycle(
+        this.cid,
+        'first-attempt',
+        async () => {
+          for (let attempt = 0; attempt < maxJoinRetries; attempt++) {
+            try {
+              this.logger.trace(`Joining call (${attempt})`, this.cid);
+              await this.doJoin(data);
+              delete joinData.migrating_from;
+              delete joinData.migrating_from_list;
+              return;
+            } catch (err) {
+              this.logger.warn(`Failed to join call (${attempt})`, this.cid);
+              if (
+                (err instanceof ErrorFromResponse && err.unrecoverable) ||
+                (err instanceof SfuJoinError && err.unrecoverable)
+              ) {
+                throw err;
+              }
 
-          // immediately switch to a different SFU in case of recoverable join error
-          const switchSfu =
-            err instanceof SfuJoinError &&
-            SfuJoinError.isJoinErrorCode(err.errorEvent);
-
-          const sfuId = this.credentials?.server.edge_name || '';
-          const failures = (sfuJoinFailures.get(sfuId) || 0) + 1;
-          sfuJoinFailures.set(sfuId, failures);
-          if (switchSfu || failures >= 2) {
-            joinData.migrating_from = sfuId;
-            joinData.migrating_from_list = Array.from(sfuJoinFailures.keys());
-          }
+              const switchSfu =
+                err instanceof SfuJoinError &&
+                SfuJoinError.isJoinErrorCode(err.errorEvent);
+
+              const sfuId = this.credentials?.server.edge_name;
+              if (sfuId) {
+                const failures = (sfuJoinFailures.get(sfuId) || 0) + 1;
+                sfuJoinFailures.set(sfuId, failures);
+                if (switchSfu || failures >= 2) {
+                  joinData.migrating_from = sfuId;
+                  joinData.migrating_from_list = Array.from(
+                    sfuJoinFailures.keys(),
+                  );
+                  if (attempt < maxJoinRetries - 1) {
+                    this.clientEventReporter.startCorrelation(
+                      this.cid,
+                      'first-attempt',
+                    );
+                  }
+                }
+              }
 
-          if (attempt === maxJoinRetries - 1) {
-            throw err;
+              if (attempt === maxJoinRetries - 1) {
+                throw err;
+              }
+            }
+            await sleep(retryInterval(attempt));
           }
-        }
-        await sleep(retryInterval(attempt));
-      }
+        },
+      );
     } catch (error) {
       callingX?.endCall(this, 'error');
       throw error;
@@ -1136,7 +1169,11 @@ export class Call {
       data?.migrating_from
     ) {
       try {
-        const joinResponse = await this.doJoinRequest(data);
+        const joinResponse = await this.clientEventReporter.track(
+          this.cid,
+          'CoordinatorJoin',
+          () => this.doJoinRequest(data),
+        );
         this.credentials = joinResponse.credentials;
         statsOptions = joinResponse.stats_options;
         this.lastStatsOptions = statsOptions;
@@ -1202,20 +1239,24 @@ export class Call {
         ? this.getPreferredSubscribeOptions()
         : [];
 
+      const unifiedSessionId = this.unifiedSessionId;
+      const capabilities = Array.from(this.clientCapabilities);
       try {
         const { callState, fastReconnectDeadlineSeconds, publishOptions } =
-          await sfuClient.join({
-            unifiedSessionId: this.unifiedSessionId,
-            subscriberSdp,
-            publisherSdp,
-            clientDetails,
-            fastReconnect: performingFastReconnect,
-            reconnectDetails,
-            preferredPublishOptions,
-            preferredSubscribeOptions,
-            capabilities: Array.from(this.clientCapabilities),
-            source: ParticipantSource.WEBRTC_UNSPECIFIED,
-          });
+          await this.clientEventReporter.track(this.cid, 'WSJoin', () =>
+            sfuClient.join({
+              unifiedSessionId,
+              subscriberSdp,
+              publisherSdp,
+              clientDetails,
+              fastReconnect: performingFastReconnect,
+              reconnectDetails,
+              preferredPublishOptions,
+              preferredSubscribeOptions,
+              capabilities,
+              source: ParticipantSource.WEBRTC_UNSPECIFIED,
+            }),
+          );
 
         this.currentPublishOptions = publishOptions;
         this.fastReconnectDeadlineSeconds = fastReconnectDeadlineSeconds;
@@ -1486,6 +1527,18 @@ export class Call {
         // "ICE never connected" failure budget can be cleared.
         this.iceFailuresWithoutConnect = 0;
       },
+      onPeerConnectionStateChange: (event) => {
+        this.clientEventReporter.onPeerConnectionStateChange(this.cid, event);
+      },
+      onRemoteTrackUnmute: (trackType, trackId) => {
+        const reportable =
+          trackType === TrackType.AUDIO ||
+          (isReactNative() && trackType === TrackType.VIDEO);
+
+        if (!reportable) return;
+
+        this.clientEventReporter.reportFirstFrame(this.cid, trackType, trackId);
+      },
     };
 
     this.subscriber = new Subscriber(basePeerConnectionOptions);
@@ -1544,6 +1597,7 @@ export class Call {
       JoinCallResponse,
       JoinCallRequest
     >(`${this.streamClientBasePath}/join`, request);
+
     this.state.updateFromCallResponse(joinResponse.call);
     this.state.setMembers(joinResponse.members);
     this.state.setOwnCapabilities(joinResponse.own_capabilities);
@@ -1717,7 +1771,9 @@ export class Call {
           await this.networkAvailableTask?.promise;
 
           this.logger.info(
-            `[Reconnect] Reconnecting with strategy ${WebsocketReconnectStrategy[this.reconnectStrategy]}`,
+            `[Reconnect] Reconnecting with strategy ${
+              WebsocketReconnectStrategy[this.reconnectStrategy]
+            }`,
           );
 
           switch (this.reconnectStrategy) {
@@ -1838,7 +1894,13 @@ export class Call {
     const reconnectStartTime = Date.now();
     this.reconnectStrategy = WebsocketReconnectStrategy.REJOIN;
     this.state.setCallingState(CallingState.RECONNECTING);
-    await this.doJoin(this.joinCallData);
+    const joinReason: JoinReason =
+      this.reconnectReason === ReconnectReason.NETWORK_BACK_ONLINE
+        ? 'network-available'
+        : 'full-rejoin';
+    await this.clientEventReporter.withJoinLifecycle(this.cid, joinReason, () =>
+      this.doJoin(this.joinCallData),
+    );
     await this.restorePublishedTracks();
     this.restoreSubscribedTracks();
     this.sfuStatsReporter?.sendReconnectionTime(
@@ -1870,11 +1932,16 @@ export class Call {
 
     try {
       const currentSfu = currentSfuClient.edgeName;
-      await this.doJoin({
-        ...this.joinCallData,
-        migrating_from: currentSfu,
-        migrating_from_list: [currentSfu],
-      });
+      await this.clientEventReporter.withJoinLifecycle(
+        this.cid,
+        'migration',
+        () =>
+          this.doJoin({
+            ...this.joinCallData,
+            migrating_from: currentSfu,
+            migrating_from_list: [currentSfu],
+          }),
+      );
     } finally {
       // cleanup the migration_from field after the migration is complete or failed
       // as we don't want to keep dirty data in the join call data
@@ -1916,6 +1983,10 @@ export class Call {
   private registerReconnectHandlers = () => {
     // handles the legacy "goAway" event
     const unregisterGoAway = this.on('goAway', () => {
+      this.clientEventReporter.captureWsError(this.cid, {
+        code: 'SFU_GO_AWAY',
+        reason: 'SFU goAway received during WS join',
+      });
       this.reconnect(
         WebsocketReconnectStrategy.MIGRATE,
         ReconnectReason.GO_AWAY,
@@ -1925,6 +1996,13 @@ export class Call {
     // handles the "error" event, through which the SFU can request a reconnect
     const unregisterOnError = this.on('error', (e) => {
       const { reconnectStrategy: strategy, error } = e;
+      if (!SfuJoinError.isJoinErrorCode(e)) {
+        const code = error?.code ? ErrorCode[error.code] : undefined;
+        this.clientEventReporter.captureWsError(this.cid, {
+          code: code ?? 'SFU_ERROR',
+          reason: error?.message || 'SFU error during WS join',
+        });
+      }
       // SFU_FULL is a join error, and when emitted, although it specifies a
       // `migrate` strategy, we should actually perform a REJOIN to a new SFU.
       // This is now handled separately in the `call.join()` method.
@@ -2819,7 +2897,11 @@ export class Call {
       this.leave({
         reject: true,
         reason: 'timeout',
-        message: `ringing timeout - ${this.isCreatedByMe ? 'no one accepted' : `user didn't interact with incoming call screen`}`,
+        message: `ringing timeout - ${
+          this.isCreatedByMe
+            ? 'no one accepted'
+            : `user didn't interact with incoming call screen`
+        }`,
       }).catch((err) => {
         this.logger.error('Failed to drop call', err);
       });
@@ -2880,7 +2962,9 @@ export class Call {
     filename: string,
   ): Promise<DeleteRecordingResponse> => {
     return this.streamClient.delete<DeleteRecordingResponse>(
-      `${this.streamClientBasePath}/${encodeURIComponent(callSessionId)}/recordings/${encodeURIComponent(filename)}`,
+      `${this.streamClientBasePath}/${encodeURIComponent(
+        callSessionId,
+      )}/recordings/${encodeURIComponent(filename)}`,
     );
   };
 
@@ -2895,7 +2979,9 @@ export class Call {
     filename: string,
   ): Promise<DeleteTranscriptionResponse> => {
     return this.streamClient.delete<DeleteTranscriptionResponse>(
-      `${this.streamClientBasePath}/${encodeURIComponent(callSessionId)}/transcriptions/${encodeURIComponent(filename)}`,
+      `${this.streamClientBasePath}/${encodeURIComponent(
+        callSessionId,
+      )}/transcriptions/${encodeURIComponent(filename)}`,
     );
   };
 
@@ -3121,13 +3207,25 @@ export class Call {
     sessionId: string,
     trackType: VideoTrackType,
   ) => {
-    const unbind = this.dynascaleManager?.bindVideoElement(
+    const unbindDynascale = this.dynascaleManager?.bindVideoElement(
       videoElement,
       sessionId,
       trackType,
     );
 
-    if (!unbind) return;
+    const stopFirstFrameDetector = this.bindFirstVideoFrameDetector(
+      videoElement,
+      sessionId,
+      trackType,
+    );
+
+    if (!unbindDynascale && !stopFirstFrameDetector) return;
+
+    const unbind = () => {
+      stopFirstFrameDetector?.();
+      unbindDynascale?.();
+    };
+
     this.leaveCallHooks.add(unbind);
     return () => {
       this.leaveCallHooks.delete(unbind);
@@ -3135,6 +3233,32 @@ export class Call {
     };
   };
 
+  private bindFirstVideoFrameDetector = (
+    videoElement: HTMLVideoElement,
+    sessionId: string,
+    trackType: VideoTrackType,
+  ) => {
+    if (trackType !== 'videoTrack') return;
+
+    return createFirstVideoFrameDetector(videoElement, () => {
+      this.reportFirstRenderedVideoFrame(sessionId);
+    });
+  };
+
+  private reportFirstRenderedVideoFrame = (sessionId: string) => {
+    const participant = this.state.findParticipantBySessionId(sessionId);
+    if (participant?.isLocalParticipant) return;
+
+    const trackId = participant?.videoStream?.getVideoTracks()[0]?.id;
+    if (!trackId) return;
+
+    this.clientEventReporter.reportFirstFrame(
+      this.cid,
+      TrackType.VIDEO,
+      trackId,
+    );
+  };
+
   /**
    * Binds a DOM <audio> element to the given session id.
    *

package/src/StreamSfuClient.ts

@@ -40,7 +40,7 @@ import {
 import { withoutConcurrency } from './helpers/concurrency';
 import { getTimers } from './timers';
 import { Tracer, TraceSlice } from './stats';
-import { SfuJoinError } from './errors';
+import { SfuJoinError, SfuTimeoutError } from './errors';
 
 export type StreamSfuClientConstructor = {
   /**
@@ -353,7 +353,7 @@ export class StreamSfuClient {
           timeoutId = setTimeout(() => {
             const message = `SFU WS connection failed to open after ${this.joinResponseTimeout}ms`;
             this.tracer?.trace('signal.timeout', message);
-            reject(new Error(message));
+            reject(new SfuTimeoutError(message));
           }, this.joinResponseTimeout);
         }),
       ]),
@@ -644,7 +644,7 @@ export class StreamSfuClient {
       cleanupJoinSubscriptions();
       const message = `Waiting for "joinResponse" has timed out after ${this.joinResponseTimeout}ms`;
       this.tracer?.trace('joinRequestTimeout', message);
-      current.reject(new Error(message));
+      current.reject(new SfuTimeoutError(message));
     }, this.joinResponseTimeout);
 
     const joinRequest = SfuRequest.create({

package/src/StreamVideoClient.ts

@@ -42,6 +42,7 @@ import { logToConsole, ScopedLogger, videoLoggerSystem } from './logger';
 import { isReactNative } from './helpers/platforms';
 import { withoutConcurrency } from './helpers/concurrency';
 import { enableTimerWorker } from './timers';
+import { ClientEventReporter } from './reporting';
 
 /**
  * A `StreamVideoClient` instance lets you communicate with our API, and authenticate users.
@@ -60,6 +61,7 @@ export class StreamVideoClient {
 
   protected readonly writeableStateStore: StreamVideoWriteableStateStore;
   streamClient: StreamClient;
+  readonly clientEventReporter: ClientEventReporter;
 
   private effectsRegistered = false;
   private eventHandlersToUnregister: Array<() => void> = [];
@@ -97,6 +99,9 @@ export class StreamVideoClient {
     this.rejectCallWhenBusy = clientOptions?.rejectCallWhenBusy ?? false;
 
     this.streamClient = createCoordinatorClient(apiKey, clientOptions);
+    this.clientEventReporter = new ClientEventReporter({
+      streamClient: this.streamClient,
+    });
 
     this.writeableStateStore = new StreamVideoWriteableStateStore();
     this.readOnlyStateStore = new StreamVideoReadOnlyStateStore(
@@ -214,6 +219,7 @@ export class StreamVideoClient {
 
         call = new Call({
           streamClient: this.streamClient,
+          clientEventReporter: this.clientEventReporter,
           type: e.call.type,
           id: e.call.id,
           members: e.members,
@@ -296,6 +302,9 @@ export class StreamVideoClient {
       return this.connectAnonymousUser(user as UserWithId, tokenOrProvider);
     }
 
+    const reporter = this.clientEventReporter;
+    reporter.startCoordinatorConnection(user.id);
+
     const connectUserResponse = await withoutConcurrency(
       this.connectionConcurrencyTag,
       async () => {
@@ -309,13 +318,16 @@ export class StreamVideoClient {
         for (let attempt = 0; attempt < maxConnectUserRetries; attempt++) {
           try {
             this.logger.trace(`Connecting user (${attempt})`, user);
-            return user.type === 'guest'
-              ? await client.connectGuestUser(user)
-              : await client.connectUser(user, tokenOrProvider);
+            return await reporter.trackCoordinatorWs(() =>
+              user.type === 'guest'
+                ? client.connectGuestUser(user)
+                : client.connectUser(user, tokenOrProvider),
+            );
           } catch (err) {
             this.logger.warn(`Failed to connect a user (${attempt})`, err);
             errorQueue.push(err as Error);
             if (attempt === maxConnectUserRetries - 1) {
+              reporter.closeCoordinatorWs();
               onConnectUserError?.(err as Error, errorQueue);
               throw err;
             }
@@ -415,6 +427,7 @@ export class StreamVideoClient {
       call ??
       new Call({
         streamClient: this.streamClient,
+        clientEventReporter: this.clientEventReporter,
         id: id,
         type: type,
         clientStore: this.writeableStateStore,
@@ -448,6 +461,7 @@ export class StreamVideoClient {
     for (const c of response.calls) {
       const call = new Call({
         streamClient: this.streamClient,
+        clientEventReporter: this.clientEventReporter,
         id: c.call.id,
         type: c.call.type,
         members: c.members,
@@ -591,6 +605,7 @@ export class StreamVideoClient {
         const [callType, callId] = call_cid.split(':');
         call = new Call({
           streamClient: this.streamClient,
+          clientEventReporter: this.clientEventReporter,
           type: callType,
           id: callId,
           clientStore: this.writeableStateStore,

package/src/__tests__/Call.autodrop.test.ts

@@ -3,6 +3,7 @@ import '../rtc/__tests__/mocks/webrtc.mocks';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { Call } from '../Call';
 import { StreamClient } from '../coordinator/connection/client';
+import { ClientEventReporter } from '../reporting';
 import { generateUUIDv4 } from '../coordinator/connection/utils';
 import { CallingState, StreamVideoWriteableStateStore } from '../store';
 
@@ -14,10 +15,12 @@ describe('Auto drop ringing calls', () => {
     vi.useFakeTimers();
 
     const clientStore = new StreamVideoWriteableStateStore();
+    const streamClient = new StreamClient('abc');
     call = new Call({
       type: 'test',
       id: generateUUIDv4(),
-      streamClient: new StreamClient('abc'),
+      streamClient,
+      clientEventReporter: new ClientEventReporter({ streamClient }),
       clientStore: clientStore,
     });
 

package/src/__tests__/Call.lifecycle.test.ts

@@ -7,6 +7,7 @@ import '../rtc/__tests__/mocks/webrtc.mocks';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { Call } from '../Call';
 import { StreamClient } from '../coordinator/connection/client';
+import { ClientEventReporter } from '../reporting';
 import { generateUUIDv4 } from '../coordinator/connection/utils';
 import { StreamVideoWriteableStateStore } from '../store';
 
@@ -14,10 +15,12 @@ describe('Call lifecycle wiring', () => {
   let call: Call;
 
   beforeEach(() => {
+    const streamClient = new StreamClient('abc');
     call = new Call({
       type: 'test',
       id: generateUUIDv4(),
-      streamClient: new StreamClient('abc'),
+      streamClient,
+      clientEventReporter: new ClientEventReporter({ streamClient }),
       clientStore: new StreamVideoWriteableStateStore(),
     });
   });

package/src/__tests__/Call.publishing.test.ts

@@ -4,6 +4,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { Call } from '../Call';
 import { Publisher } from '../rtc';
 import { StreamClient } from '../coordinator/connection/client';
+import { ClientEventReporter } from '../reporting';
 import { generateUUIDv4 } from '../coordinator/connection/utils';
 import { PermissionsContext } from '../permissions';
 import { OwnCapability } from '../gen/coordinator';
@@ -15,10 +16,12 @@ describe('Publishing and Unpublishing tracks', () => {
   let call: Call;
 
   beforeEach(async () => {
+    const streamClient = new StreamClient('abc');
     call = new Call({
       type: 'test',
       id: generateUUIDv4(),
-      streamClient: new StreamClient('abc'),
+      streamClient,
+      clientEventReporter: new ClientEventReporter({ streamClient }),
       clientStore: new StreamVideoWriteableStateStore(),
     });
 

package/src/__tests__/Call.test.ts

@@ -300,6 +300,29 @@ describe('muting logic', () => {
   });
 });
 
+describe('client event reporting', () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('reports a client-aborted event and unregisters the call on leave', async () => {
+    const call = client.call('default', generateUUIDv4());
+    await call.getOrCreate();
+
+    const reporter = call.clientEventReporter;
+    const abortSpy = vi.spyOn(reporter, 'abort');
+    const unregisterSpy = vi.spyOn(reporter, 'unregisterCall');
+
+    await call.leave();
+
+    expect(abortSpy).toHaveBeenCalledWith(call.cid, {
+      code: 'CLIENT_ABORTED',
+      reason: expect.any(String),
+    });
+    expect(unregisterSpy).toHaveBeenCalledWith(call.cid);
+  });
+});
+
 afterEach(() => {
   client.disconnectUser();
 });

package/src/coordinator/connection/client.ts

@@ -617,6 +617,11 @@ export class StreamClient {
     return await this.wsConnection.connect(this.defaultWSTimeout);
   };
 
+  getSdkVersion = (): string =>
+    this.options.clientAppIdentifier?.sdkVersion ||
+    process.env.PKG_VERSION ||
+    '0.0.0';
+
   getUserAgent = (): string => {
     if (!this.cachedUserAgent) {
       const { clientAppIdentifier = {} } = this.options;

package/src/devices/__tests__/CameraManager.test.ts

@@ -1,5 +1,6 @@
 import { Call } from '../../Call';
 import { StreamClient } from '../../coordinator/connection/client';
+import { ClientEventReporter } from '../../reporting';
 import { CallingState, StreamVideoWriteableStateStore } from '../../store';
 
 import { afterEach, beforeEach, describe, expect, it, Mock, vi } from 'vitest';
@@ -56,6 +57,12 @@ vi.mock('../../Call.ts', () => {
   };
 });
 
+vi.mock('../../reporting/ClientEventReporter', () => ({
+  ClientEventReporter: vi.fn(function () {
+    return {};
+  }),
+}));
+
 vi.mock('../../helpers/compatibility.ts', () => {
   console.log('MOCKING mobile device');
   return {
@@ -76,10 +83,12 @@ describe('CameraManager', () => {
 
   beforeEach(() => {
     const devicePersistence = { enabled: false, storageKey: '' };
+    const streamClient = new StreamClient('abc123', { devicePersistence });
     call = new Call({
       id: '',
       type: '',
-      streamClient: new StreamClient('abc123', { devicePersistence }),
+      streamClient,
+      clientEventReporter: new ClientEventReporter({ streamClient }),
       clientStore: new StreamVideoWriteableStateStore(),
     });
     manager = new CameraManager(call, devicePersistence);