@stream-io/video-client 1.52.1-beta.0 → 1.53.0

package/dist/index.browser.es.js

@@ -507,7 +507,6 @@ class ErrorFromResponse extends Error {
     }
 }
 
-/* eslint-disable */
 // @generated by protobuf-ts 2.10.0 with parameter long_type_string,client_generic,server_none,eslint_disable,optimize_code_size
 // @generated from protobuf file "google/protobuf/struct.proto" (package "google.protobuf", syntax proto3)
 // tslint:disable
@@ -773,7 +772,6 @@ class ListValue$Type extends MessageType {
  */
 const ListValue = new ListValue$Type();
 
-/* eslint-disable */
 // @generated by protobuf-ts 2.10.0 with parameter long_type_string,client_generic,server_none,eslint_disable,optimize_code_size
 // @generated from protobuf file "google/protobuf/timestamp.proto" (package "google.protobuf", syntax proto3)
 // tslint:disable
@@ -1840,12 +1838,6 @@ class TrackInfo$Type extends MessageType {
                 kind: 'scalar',
                 T: 5 /*ScalarType.INT32*/,
             },
-            {
-                no: 13,
-                name: 'self_sub_audio_video',
-                kind: 'scalar',
-                T: 8 /*ScalarType.BOOL*/,
-            },
         ]);
     }
 }
@@ -6648,7 +6640,7 @@ const getSdkVersion = (sdk) => {
     return sdk ? `${sdk.major}.${sdk.minor}.${sdk.patch}` : '0.0.0-development';
 };
 
-const version = "1.52.1-beta.0";
+const version = "1.53.0";
 const [major, minor, patch] = version.split('.');
 let sdkInfo = {
     type: SdkType.PLAIN_JAVASCRIPT,
@@ -6792,7 +6784,7 @@ const getClientDetails = async () => {
                 .join(' '),
             version: '',
         },
-        webrtcVersion: webRtcInfo?.version || '',
+        webrtcVersion: browserVersion,
     };
 };
 
@@ -7742,7 +7734,7 @@ class BasePeerConnection {
     /**
      * Constructs a new `BasePeerConnection` instance.
      */
-    constructor(peerType, { sfuClient, connectionConfig, state, dispatcher, onReconnectionNeeded, onIceConnected, tag, enableTracing, clientPublishOptions, iceRestartDelay = 2500, statsTimestampDriftThresholdMs = 0, }) {
+    constructor(peerType, { sfuClient, connectionConfig, state, dispatcher, onReconnectionNeeded, onIceConnected, onPeerConnectionStateChange, onRemoteTrackUnmute, tag, enableTracing, clientPublishOptions, iceRestartDelay = 2500, statsTimestampDriftThresholdMs = 0, }) {
         this.iceHasEverConnected = false;
         this.isIceRestarting = false;
         this.isDisposed = false;
@@ -7896,6 +7888,10 @@ class BasePeerConnection {
         this.onConnectionStateChange = async () => {
             const state = this.pc.connectionState;
             this.logger.debug(`Connection state changed`, state);
+            this.fireOnPeerConnectionStateChange({
+                stateType: 'peerConnection',
+                state,
+            });
             if (this.tracer && (state === 'connected' || state === 'failed')) {
                 try {
                     const stats = await this.stats.get();
@@ -7918,8 +7914,20 @@ class BasePeerConnection {
         this.onIceConnectionStateChange = () => {
             const state = this.pc.iceConnectionState;
             this.logger.debug(`ICE connection state changed`, state);
+            this.fireOnPeerConnectionStateChange({ stateType: 'ice', state });
             this.handleConnectionStateUpdate(state);
         };
+        this.fireOnPeerConnectionStateChange = (event) => {
+            try {
+                this.onPeerConnectionStateChange?.({
+                    peerType: this.peerType,
+                    ...event,
+                });
+            }
+            catch (err) {
+                this.logger.warn('onPeerConnectionStateChange listener threw', err);
+            }
+        };
         this.handleConnectionStateUpdate = (state) => {
             const { callingState } = this.state;
             if (callingState === CallingState.OFFLINE)
@@ -8034,6 +8042,8 @@ class BasePeerConnection {
         this.tag = tag;
         this.onReconnectionNeeded = onReconnectionNeeded;
         this.onIceConnected = onIceConnected;
+        this.onPeerConnectionStateChange = onPeerConnectionStateChange;
+        this.onRemoteTrackUnmute = onRemoteTrackUnmute;
         this.logger = videoLoggerSystem.getLogger(peerType === PeerType.SUBSCRIBER ? 'Subscriber' : 'Publisher', { tags: [tag] });
         this.pc = this.createPeerConnection(connectionConfig);
         this.stats = new StatsTracer(this.pc, peerType, this.trackIdToTrackType, statsTimestampDriftThresholdMs);
@@ -8056,6 +8066,8 @@ class BasePeerConnection {
         this.preConnectStuckTimeout = undefined;
         this.onReconnectionNeeded = undefined;
         this.onIceConnected = undefined;
+        this.onPeerConnectionStateChange = undefined;
+        this.onRemoteTrackUnmute = undefined;
         this.isDisposed = true;
         this.detachEventHandlers();
         this.pc.close();
@@ -8416,7 +8428,7 @@ class Publisher extends BasePeerConnection {
     /**
      * Constructs a new `Publisher` instance.
      */
-    constructor(baseOptions, publishOptions, opts = {}) {
+    constructor(baseOptions, publishOptions) {
         super(PeerType.PUBLISHER_UNSPECIFIED, baseOptions);
         this.transceiverCache = new TransceiverCache();
         this.clonedTracks = new Set();
@@ -8837,7 +8849,6 @@ class Publisher extends BasePeerConnection {
                 muted: !isTrackLive,
                 codec: publishOption.codec,
                 publishOptionId: publishOption.id,
-                selfSubAudioVideo: this.selfSubEnabled,
             };
         };
         this.cloneTrack = (track) => {
@@ -8918,7 +8929,6 @@ class Publisher extends BasePeerConnection {
             });
         };
         this.publishOptions = publishOptions;
-        this.selfSubEnabled = opts.selfSubEnabled ?? false;
         this.on('iceRestart', (iceRestart) => {
             if (iceRestart.peerType !== PeerType.PUBLISHER_UNSPECIFIED)
                 return;
@@ -9000,13 +9010,6 @@ class Subscriber extends BasePeerConnection {
      */
     constructor(opts) {
         super(PeerType.SUBSCRIBER, opts);
-        /**
-         * Remote streams received from the SFU. For a self-sub case
-         * we need to be able to distinguish between the local capture stream.
-         * The map will never contain local streams so we can safely use it to
-         * check if the stream is remote and dispose it when needed.
-         */
-        this.trackedStreams = new WeakSet();
         /**
          * Restarts the ICE connection and renegotiates with the SFU.
          */
@@ -9041,7 +9044,6 @@ class Subscriber extends BasePeerConnection {
             // example: `e3f6aaf8-b03d-4911-be36-83f47d37a76a:TRACK_TYPE_VIDEO`
             const [trackId, rawTrackType] = primaryStream.id.split(':');
             const participantToUpdate = this.state.participants.find((p) => p.trackLookupPrefix === trackId);
-            const isSelfSub = !!participantToUpdate?.isLocalParticipant;
             this.logger.debug(`[onTrack]: Got remote ${rawTrackType} track for userId: ${participantToUpdate?.userId}`, track.id, track);
             const trackType = toTrackType(rawTrackType);
             if (!trackType) {
@@ -9055,6 +9057,7 @@ class Subscriber extends BasePeerConnection {
             track.addEventListener('unmute', () => {
                 this.logger.info(`[onTrack]: Track unmuted: ${trackDebugInfo}`);
                 this.setRemoteTrackInterrupted(trackId, trackType, false);
+                this.onRemoteTrackUnmute?.(trackType, track.id);
             });
             track.addEventListener('ended', () => {
                 this.logger.info(`[onTrack]: Track ended: ${trackDebugInfo}`);
@@ -9065,9 +9068,6 @@ class Subscriber extends BasePeerConnection {
                 this.setRemoteTrackInterrupted(trackId, trackType, true);
             }
             this.trackIdToTrackType.set(track.id, trackType);
-            if (isSelfSub) {
-                this.trackedStreams.add(primaryStream);
-            }
             if (!participantToUpdate) {
                 this.logger.warn(`[onTrack]: Received track for unknown participant: ${trackId}`, e);
                 this.state.registerOrphanedTrack({
@@ -9083,12 +9083,6 @@ class Subscriber extends BasePeerConnection {
                 this.logger.error(`Unknown track type: ${rawTrackType}`);
                 return;
             }
-            // Self-sub loopback audio routes to the speaker by default, which
-            // would echo the local user's voice. Default-mute here; consumers
-            // (the loopback recording hook) re-enable explicitly when needed.
-            if (isSelfSub && e.track.kind === 'audio') {
-                e.track.enabled = false;
-            }
             // get the previous stream to dispose it later
             // usually this happens during migration, when the stream is replaced
             // with a new one but the old one is still in the state
@@ -9097,12 +9091,8 @@ class Subscriber extends BasePeerConnection {
             this.state.updateParticipant(participantToUpdate.sessionId, {
                 [streamKindProp]: primaryStream,
             });
+            // now, dispose the previous stream if it exists
             if (previousStream) {
-                if (isSelfSub && !this.trackedStreams.has(previousStream)) {
-                    // this is the local capture stream, we don't want to dispose it
-                    this.logger.debug(`[onTrack]: Skipping cleanup of previous ${e.track.kind} stream for userId: ${participantToUpdate.userId} because it is not tracked`);
-                    return;
-                }
                 this.logger.info(`[onTrack]: Cleaning up previous remote ${track.kind} tracks for userId: ${participantToUpdate.userId}`);
                 previousStream.getTracks().forEach((t) => {
                     t.stop();
@@ -9307,6 +9297,15 @@ class SfuJoinError extends Error {
     }
 }
 
+/**
+ * An error thrown when a client-side SFU deadline (e.g., waiting for the
+ * signaling WS to open or for the `joinResponse` to arrive) fires before
+ * the awaited operation resolves. Allows consumers (e.g., the client event
+ * reporter) to classify timeouts without relying on message wording.
+ */
+class SfuTimeoutError extends Error {
+}
+
 /**
  * Creates a fresh `joinResponseTask` with a no-op rejection handler attached
  * to the underlying promise. The handler marks the rejection path as handled
@@ -9412,7 +9411,7 @@ 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);
                 }),
             ]));
@@ -9582,7 +9581,7 @@ 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({
                 requestPayload: {
@@ -9799,6 +9798,10 @@ const watchCallEnded = (call) => {
         const { callingState } = call.state;
         if (callingState !== CallingState.IDLE &&
             callingState !== CallingState.LEFT) {
+            call.clientEventReporter.abort(call.cid, {
+                code: 'BACKEND_LEAVE',
+                reason: 'call.ended event received',
+            });
             call
                 .leave({ message: 'call.ended event received', reject: false })
                 .catch((err) => {
@@ -9828,6 +9831,10 @@ const watchSfuCallEnded = (call) => {
             call.state.setEndedAt(new Date());
             const reason = CallEndedReason[e.reason];
             globalThis.streamRNVideoSDK?.callingX?.endCall(call, 'remote');
+            call.clientEventReporter.abort(call.cid, {
+                code: 'BACKEND_LEAVE',
+                reason: `callEnded received: ${reason}`,
+            });
             await call.leave({ message: `callEnded received: ${reason}` });
         }
         catch (err) {
@@ -10980,6 +10987,40 @@ class DynascaleManager {
     }
 }
 
+/**
+ * Invokes `onFirstFrame` once when the video element renders a frame.
+ *
+ * Uses `requestVideoFrameCallback` when available, falling back to `loadeddata`
+ * for browsers that don't support it.
+ */
+const createFirstVideoFrameDetector = (videoElement, onFirstFrame) => {
+    let done = false;
+    const notify = () => {
+        if (done)
+            return;
+        done = true;
+        onFirstFrame();
+    };
+    if (typeof videoElement.requestVideoFrameCallback === 'function') {
+        const handle = videoElement.requestVideoFrameCallback(notify);
+        return () => {
+            done = true;
+            videoElement.cancelVideoFrameCallback(handle);
+        };
+    }
+    if (videoElement.readyState >= videoElement.HAVE_CURRENT_DATA) {
+        queueMicrotask(notify);
+        return () => {
+            done = true;
+        };
+    }
+    videoElement.addEventListener('loadeddata', notify, { once: true });
+    return () => {
+        done = true;
+        videoElement.removeEventListener('loadeddata', notify);
+    };
+};
+
 const DEFAULT_THRESHOLD = 0.35;
 const DEFAULT_VIEWPORT_VISIBILITY_STATE = {
     videoTrack: VisibilityState.UNKNOWN,
@@ -13823,7 +13864,7 @@ class Call {
      * Use the [`StreamVideoClient.call`](./StreamVideoClient.md/#call)
      * method to construct a `Call` instance.
      */
-    constructor({ type, id, streamClient, members, ownCapabilities, sortParticipantsBy, clientStore, ringing = false, watching = false, }) {
+    constructor({ type, id, streamClient, clientEventReporter, members, ownCapabilities, sortParticipantsBy, clientStore, ringing = false, watching = false, }) {
         /**
          * The state of this call.
          */
@@ -13860,7 +13901,6 @@ class Call {
         // maintain the order of publishing tracks to restore them after a reconnection
         // it shouldn't contain duplicates
         this.trackPublishOrder = [];
-        this.selfSubEnabled = false;
         this.hasJoinedOnce = false;
         this.deviceSettingsAppliedOnce = false;
         this.initialized = false;
@@ -14151,9 +14191,14 @@ class Call {
                 this.sfuStatsReporter = undefined;
                 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);
@@ -14205,30 +14250,6 @@ class Call {
                 await Promise.all(stopOnLeavePromises);
             });
         };
-        /**
-         * The largest video publish dimension across the current publish options.
-         *
-         * @internal
-         */
-        this.getMaxVideoPublishDimension = () => {
-            if (!this.currentPublishOptions)
-                return undefined;
-            let maxDimension;
-            let maxArea = 0;
-            for (const opt of this.currentPublishOptions) {
-                if (opt.trackType !== TrackType.VIDEO)
-                    continue;
-                const dim = opt.videoDimension;
-                if (!dim || !dim.width || !dim.height)
-                    continue;
-                const area = dim.width * dim.height;
-                if (area > maxArea) {
-                    maxDimension = dim;
-                    maxArea = area;
-                }
-            }
-            return maxDimension;
-        };
         /**
          * Update from the call response from the "call.ring" event
          * @internal
@@ -14375,7 +14396,7 @@ class Call {
          *
          * @returns a promise which resolves once the call join-flow has finished.
          */
-        this.join = async ({ maxJoinRetries = 3, joinResponseTimeout, rpcRequestTimeout, selfSubEnabled = false, ...data } = {}) => {
+        this.join = async ({ maxJoinRetries = 3, joinResponseTimeout, rpcRequestTimeout, ...data } = {}) => {
             const callingState = this.state.callingState;
             if ([CallingState.JOINED, CallingState.JOINING].includes(callingState)) {
                 throw new Error(`Illegal State: call.join() shall be called only once`);
@@ -14383,15 +14404,19 @@ class Call {
             if (data?.ring) {
                 this.ringingSubject.next(true);
             }
-            // we need this to be set before the callingx.joinCall() is
-            // called to avoid registering the test call in the CallKit/Telecom
-            this.selfSubEnabled = selfSubEnabled;
             const callingX = globalThis.streamRNVideoSDK?.callingX;
             if (callingX) {
                 // for Android/iOS, we need to start the call in the callingx library as soon as possible
                 await callingX.joinCall(this, this.clientStore.calls);
             }
             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.
@@ -14401,39 +14426,42 @@ class Call {
             const joinData = 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;
-                        }
-                        // 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());
+                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;
                         }
-                        if (attempt === maxJoinRetries - 1) {
-                            throw err;
+                        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;
+                            }
+                            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;
+                            }
                         }
+                        await sleep(retryInterval(attempt));
                     }
-                    await sleep(retryInterval(attempt));
-                }
+                });
             }
             catch (error) {
                 callingX?.endCall(this, 'error');
@@ -14462,7 +14490,7 @@ class Call {
                 performingMigration ||
                 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;
@@ -14520,9 +14548,11 @@ class Call {
                 const preferredSubscribeOptions = !isReconnecting
                     ? this.getPreferredSubscribeOptions()
                     : [];
+                const unifiedSessionId = this.unifiedSessionId;
+                const capabilities = Array.from(this.clientCapabilities);
                 try {
-                    const { callState, fastReconnectDeadlineSeconds, publishOptions } = await sfuClient.join({
-                        unifiedSessionId: this.unifiedSessionId,
+                    const { callState, fastReconnectDeadlineSeconds, publishOptions } = await this.clientEventReporter.track(this.cid, 'WSJoin', () => sfuClient.join({
+                        unifiedSessionId,
                         subscriberSdp,
                         publisherSdp,
                         clientDetails,
@@ -14530,9 +14560,9 @@ class Call {
                         reconnectDetails,
                         preferredPublishOptions,
                         preferredSubscribeOptions,
-                        capabilities: Array.from(this.clientCapabilities),
+                        capabilities,
                         source: ParticipantSource.WEBRTC_UNSPECIFIED,
-                    });
+                    }));
                     this.currentPublishOptions = publishOptions;
                     this.fastReconnectDeadlineSeconds = fastReconnectDeadlineSeconds;
                     if (callState) {
@@ -14744,6 +14774,16 @@ 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);
             // anonymous users can't publish anything hence, there is no need
@@ -14753,9 +14793,7 @@ class Call {
                 if (closePreviousInstances && this.publisher) {
                     await this.publisher.dispose();
                 }
-                this.publisher = new Publisher(basePeerConnectionOptions, publishOptions, {
-                    selfSubEnabled: this.selfSubEnabled,
-                });
+                this.publisher = new Publisher(basePeerConnectionOptions, publishOptions);
             }
             this.statsReporter?.stop();
             if (this.statsReportingIntervalInMs > 0) {
@@ -15022,7 +15060,10 @@ class Call {
             const reconnectStartTime = Date.now();
             this.reconnectStrategy = WebsocketReconnectStrategy.REJOIN;
             this.state.setCallingState(CallingState.RECONNECTING);
-            await this.doJoin(this.joinCallData);
+            const 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(WebsocketReconnectStrategy.REJOIN, (Date.now() - reconnectStartTime) / 1000);
@@ -15046,11 +15087,11 @@ class Call {
             const migrationTask = makeSafePromise(currentSfuClient.enterMigration());
             try {
                 const currentSfu = currentSfuClient.edgeName;
-                await this.doJoin({
+                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
@@ -15086,11 +15127,22 @@ class Call {
         this.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).catch((err) => this.logger.warn('[Reconnect] Error reconnecting', err));
             });
             // 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.
@@ -15785,7 +15837,9 @@ 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);
                 });
@@ -15991,15 +16045,36 @@ class Call {
          * @param trackType the kind of video.
          */
         this.bindVideoElement = (videoElement, sessionId, trackType) => {
-            const unbind = this.dynascaleManager?.bindVideoElement(videoElement, sessionId, trackType);
-            if (!unbind)
+            const unbindDynascale = this.dynascaleManager?.bindVideoElement(videoElement, sessionId, trackType);
+            const stopFirstFrameDetector = this.bindFirstVideoFrameDetector(videoElement, sessionId, trackType);
+            if (!unbindDynascale && !stopFirstFrameDetector)
                 return;
+            const unbind = () => {
+                stopFirstFrameDetector?.();
+                unbindDynascale?.();
+            };
             this.leaveCallHooks.add(unbind);
             return () => {
                 this.leaveCallHooks.delete(unbind);
                 unbind();
             };
         };
+        this.bindFirstVideoFrameDetector = (videoElement, sessionId, trackType) => {
+            if (trackType !== 'videoTrack')
+                return;
+            return createFirstVideoFrameDetector(videoElement, () => {
+                this.reportFirstRenderedVideoFrame(sessionId);
+            });
+        };
+        this.reportFirstRenderedVideoFrame = (sessionId) => {
+            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.
          *
@@ -16149,6 +16224,7 @@ 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');
@@ -16185,12 +16261,6 @@ class Call {
     get currentUserId() {
         return this.clientStore.connectedUser?.id;
     }
-    /**
-     * A flag indicating whether self-subscription is enabled for the call.
-     */
-    get isSelfSubEnabled() {
-        return this.selfSubEnabled;
-    }
     /**
      * A flag indicating whether the call was created by the current user.
      */
@@ -17379,10 +17449,12 @@ class StreamClient {
             this.logger.info('StreamClient.connect: this.wsConnection.connect()');
             return await this.wsConnection.connect(this.defaultWSTimeout);
         };
+        this.getSdkVersion = () => this.options.clientAppIdentifier?.sdkVersion ||
+            "1.53.0";
         this.getUserAgent = () => {
             if (!this.cachedUserAgent) {
                 const { clientAppIdentifier = {} } = this.options;
-                const { sdkName = 'js', sdkVersion = "1.52.1-beta.0", ...extras } = clientAppIdentifier;
+                const { sdkName = 'js', sdkVersion = "1.53.0", ...extras } = clientAppIdentifier;
                 this.cachedUserAgent = [
                     `stream-video-${sdkName}-v${sdkVersion}`,
                     ...Object.entries(extras).map(([key, value]) => `${key}=${value}`),
@@ -17559,6 +17631,602 @@ const createTokenOrProvider = (options) => {
     return token || tokenProvider;
 };
 
+const pcKey = (cid, role) => `${cid}:${role}`;
+class ClientEventReporter {
+    constructor(options) {
+        this.logger = videoLoggerSystem.getLogger('ClientEventReporter');
+        this.callContexts = new Map();
+        this.joinAttemptIds = new Map();
+        this.joinReasons = new Map();
+        this.coordinatorPairs = new Map();
+        this.wsPairs = new Map();
+        this.peerConnectionPairs = new Map();
+        this.pcEverConnected = new Map();
+        this.firstFrameReported = new Set();
+        /**
+         * Starts a new coordinator connection correlation scope.
+         *
+         * @param userId the id of the user being connected. Captured here because
+         * the `CoordinatorWS` stage emits before the connection flow assigns
+         * the user to the client, so it can't be read from the client yet.
+         */
+        this.startCoordinatorConnection = (userId) => {
+            this.coordinatorConnectId = generateUUIDv4();
+            this.coordinatorConnectUserId = userId;
+            return this.coordinatorConnectId;
+        };
+        this.trackCoordinatorWs = async (op) => {
+            this.beginCoordinatorWs();
+            try {
+                const result = await op();
+                this.succeedCoordinatorWs();
+                return result;
+            }
+            catch (err) {
+                applyError(this.coordinatorWsPair, mapCoordinatorWsError(err));
+                throw err;
+            }
+        };
+        this.beginCoordinatorWs = () => {
+            if (!this.coordinatorWsPair) {
+                this.coordinatorWsPair = {
+                    sid: generateUUIDv4(),
+                    attempts: 0,
+                    startedAt: Date.now(),
+                    userIdSnapshot: this.coordinatorConnectUserId,
+                };
+                this.send({
+                    ...this.buildCoordinatorWsCommon(this.coordinatorWsPair),
+                    event_type: 'initiated',
+                });
+            }
+            this.coordinatorWsPair.attempts++;
+        };
+        this.succeedCoordinatorWs = () => {
+            const pair = this.coordinatorWsPair;
+            if (!pair)
+                return;
+            this.send({
+                ...this.buildCoordinatorWsCommon(pair),
+                event_type: 'completed',
+                outcome: 'success',
+                retry_count_attempt: pair.attempts - 1,
+                elapsed_time: Date.now() - pair.startedAt,
+            });
+            this.coordinatorWsPair = undefined;
+        };
+        this.closeCoordinatorWs = () => {
+            const pair = this.coordinatorWsPair;
+            if (!pair || !pair.lastError) {
+                this.coordinatorWsPair = undefined;
+                return;
+            }
+            const { reason, code } = pair.lastError;
+            this.send({
+                ...this.buildCoordinatorWsCommon(pair),
+                event_type: 'completed',
+                outcome: 'failure',
+                retry_count_attempt: pair.attempts - 1,
+                elapsed_time: Date.now() - pair.startedAt,
+                retry_failure_reason: reason,
+                retry_failure_code: code,
+            });
+            this.coordinatorWsPair = undefined;
+        };
+        this.buildCoordinatorWsCommon = (pair) => ({
+            user_id: pair.userIdSnapshot ?? this.streamClient.userID,
+            stage: 'CoordinatorWS',
+            stage_id: pair.sid,
+            ...(this.coordinatorConnectId && {
+                coordinator_connect_id: this.coordinatorConnectId,
+            }),
+            timestamp: new Date().toISOString(),
+            user_agent: this.streamClient.getUserAgent(),
+            sdk_version: this.streamClient.getSdkVersion(),
+        });
+        this.emitMediaPermission = (cid) => {
+            if (isReactNative() || !this.callContexts.has(cid))
+                return;
+            const pair = {
+                sid: generateUUIDv4(),
+                attempts: 0,
+                startedAt: Date.now(),
+                joinAttemptIdSnapshot: this.joinAttemptIds.get(cid),
+            };
+            this.send({
+                ...this.buildCommon(cid, 'MediaDevicePermission', pair),
+                ...this.sessionIdField(cid),
+                microphone_permission_status: readPermissionStatus(getAudioBrowserPermission()),
+                camera_permission_status: readPermissionStatus(getVideoBrowserPermission()),
+                event_type: 'initiated',
+            });
+        };
+        this.registerCall = (cid, ctx) => {
+            this.callContexts.set(cid, ctx);
+        };
+        this.unregisterCall = (cid) => {
+            this.callContexts.delete(cid);
+            this.joinAttemptIds.delete(cid);
+            this.joinReasons.delete(cid);
+            this.coordinatorPairs.delete(cid);
+            this.wsPairs.delete(cid);
+            this.firstFrameReported.delete(`${cid}:FirstVideoFrame`);
+            this.firstFrameReported.delete(`${cid}:FirstAudioFrame`);
+            for (const role of ['publish', 'subscribe']) {
+                const key = pcKey(cid, role);
+                this.peerConnectionPairs.delete(key);
+                this.pcEverConnected.delete(key);
+            }
+        };
+        this.startCorrelation = (cid, joinReason) => {
+            try {
+                this.closeCallPairs(cid);
+                this.joinAttemptIds.set(cid, generateUUIDv4());
+                this.joinReasons.set(cid, joinReason);
+                this.firstFrameReported.delete(`${cid}:FirstVideoFrame`);
+                this.firstFrameReported.delete(`${cid}:FirstAudioFrame`);
+                this.emitJoinInitiated(cid);
+                this.emitMediaPermission(cid);
+            }
+            catch (err) {
+                this.logger.warn('Failed to start join correlation', err);
+            }
+        };
+        this.withJoinLifecycle = async (cid, joinReason, op) => {
+            this.startCorrelation(cid, joinReason);
+            try {
+                return await op();
+            }
+            catch (err) {
+                this.closeCallPairs(cid);
+                throw err;
+            }
+        };
+        this.track = async (cid, stage, op) => {
+            this.beginAttempt(cid, stage);
+            try {
+                const result = await op();
+                this.succeedAttempt(cid, stage);
+                return result;
+            }
+            catch (err) {
+                this.applyStageError(cid, stage, err);
+                throw err;
+            }
+        };
+        this.reportFirstFrame = (cid, trackType, trackId) => {
+            const stage = trackType === TrackType.VIDEO
+                ? 'FirstVideoFrame'
+                : trackType === TrackType.AUDIO
+                    ? 'FirstAudioFrame'
+                    : undefined;
+            if (!stage)
+                return;
+            const key = `${cid}:${stage}`;
+            if (this.firstFrameReported.has(key))
+                return;
+            this.firstFrameReported.add(key);
+            const pair = {
+                sid: generateUUIDv4(),
+                attempts: 0,
+                startedAt: Date.now(),
+                joinAttemptIdSnapshot: this.joinAttemptIds.get(cid),
+            };
+            const resolvedSfuId = this.getSfuId(cid);
+            this.send({
+                ...this.buildCommon(cid, stage, pair),
+                ...this.sessionIdField(cid),
+                ...(resolvedSfuId && { sfu_id: resolvedSfuId }),
+                track_id: trackId,
+                event_type: 'initiated',
+            });
+        };
+        this.captureWsError = (cid, opts) => {
+            const pair = this.wsPairs.get(cid);
+            if (!pair)
+                return;
+            applyError(pair, { reason: opts.reason, code: opts.code });
+        };
+        this.close = (cid) => {
+            this.closeCallPairs(cid);
+        };
+        this.abort = (cid, opts) => {
+            try {
+                const { code, reason } = opts;
+                const stageError = { code, reason };
+                applyErrorIfAbsent(this.coordinatorPairs.get(cid), stageError);
+                applyErrorIfAbsent(this.wsPairs.get(cid), stageError);
+                this.failCoordinator(cid);
+                this.failWs(cid);
+                this.emitPeerConnectionFailure(cid, 'publish', code, reason, 'NOT_CONNECTED');
+                this.emitPeerConnectionFailure(cid, 'subscribe', code, reason, 'NOT_CONNECTED');
+            }
+            catch (err) {
+                this.logger.warn('Failed to report abort', err);
+            }
+        };
+        this.closeCallPairs = (cid) => {
+            if (this.coordinatorPairs.get(cid))
+                this.failCoordinator(cid);
+            if (this.wsPairs.get(cid))
+                this.failWs(cid);
+            for (const role of ['publish', 'subscribe']) {
+                this.emitPeerConnectionFailure(cid, role, 'CLIENT_ABORTED', 'superseded by a new join attempt', 'NOT_CONNECTED');
+            }
+        };
+        this.emitJoinInitiated = (cid) => {
+            const joinAttemptId = this.joinAttemptIds.get(cid);
+            if (!joinAttemptId)
+                return;
+            const coordinatorConnectId = this.coordinatorConnectId;
+            this.send({
+                user_id: this.streamClient.userID,
+                stage: 'JoinInitiated',
+                join_attempt_id: joinAttemptId,
+                ...(coordinatorConnectId && {
+                    coordinator_connect_id: coordinatorConnectId,
+                }),
+                timestamp: new Date().toISOString(),
+                user_agent: this.streamClient.getUserAgent(),
+                sdk_version: this.streamClient.getSdkVersion(),
+                event_type: 'initiated',
+            });
+        };
+        this.beginAttempt = (cid, stage) => {
+            if (stage === 'CoordinatorJoin')
+                this.beginCoordinatorAttempt(cid);
+            else
+                this.beginWsAttempt(cid);
+        };
+        this.succeedAttempt = (cid, stage) => {
+            if (stage === 'CoordinatorJoin')
+                this.succeedCoordinator(cid);
+            else
+                this.succeedWs(cid);
+        };
+        this.applyStageError = (cid, stage, err) => {
+            const pair = stage === 'CoordinatorJoin'
+                ? this.coordinatorPairs.get(cid)
+                : this.wsPairs.get(cid);
+            applyErrorIfAbsent(pair, stage === 'CoordinatorJoin'
+                ? mapCoordinatorHttpError(err)
+                : mapWsJoinError(err));
+        };
+        this.beginCoordinatorAttempt = (cid) => {
+            let pair = this.coordinatorPairs.get(cid);
+            if (!pair) {
+                pair = {
+                    sid: generateUUIDv4(),
+                    attempts: 0,
+                    startedAt: Date.now(),
+                    joinAttemptIdSnapshot: this.joinAttemptIds.get(cid),
+                    joinReasonSnapshot: this.joinReasons.get(cid),
+                };
+                this.coordinatorPairs.set(cid, pair);
+                this.send({
+                    ...this.buildCommon(cid, 'CoordinatorJoin', pair),
+                    ...(pair.joinReasonSnapshot && {
+                        join_reason: pair.joinReasonSnapshot,
+                    }),
+                    event_type: 'initiated',
+                });
+            }
+            pair.lastError = undefined;
+            pair.attempts++;
+        };
+        this.succeedCoordinator = (cid) => {
+            const pair = this.coordinatorPairs.get(cid);
+            if (!pair)
+                return;
+            this.send({
+                ...this.buildCommon(cid, 'CoordinatorJoin', pair),
+                ...this.sessionIdField(cid),
+                ...(pair.joinReasonSnapshot && { join_reason: pair.joinReasonSnapshot }),
+                event_type: 'completed',
+                outcome: 'success',
+                retry_count_attempt: pair.attempts - 1,
+                elapsed_time: Date.now() - pair.startedAt,
+            });
+            this.coordinatorPairs.delete(cid);
+        };
+        this.failCoordinator = (cid) => {
+            const pair = this.coordinatorPairs.get(cid);
+            if (!pair || !pair.lastError) {
+                this.coordinatorPairs.delete(cid);
+                return;
+            }
+            const { reason, code } = pair.lastError;
+            this.send({
+                ...this.buildCommon(cid, 'CoordinatorJoin', pair),
+                ...this.sessionIdField(cid),
+                ...(pair.joinReasonSnapshot && { join_reason: pair.joinReasonSnapshot }),
+                event_type: 'completed',
+                outcome: 'failure',
+                retry_count_attempt: pair.attempts - 1,
+                elapsed_time: Date.now() - pair.startedAt,
+                retry_failure_reason: reason,
+                retry_failure_code: code,
+            });
+            this.coordinatorPairs.delete(cid);
+        };
+        this.beginWsAttempt = (cid) => {
+            let pair = this.wsPairs.get(cid);
+            if (!pair) {
+                pair = {
+                    sid: generateUUIDv4(),
+                    attempts: 0,
+                    startedAt: Date.now(),
+                    joinAttemptIdSnapshot: this.joinAttemptIds.get(cid),
+                };
+                this.wsPairs.set(cid, pair);
+                const sfuId = this.getSfuId(cid);
+                this.send({
+                    ...this.buildCommon(cid, 'WSJoin', pair),
+                    ...this.sessionIdField(cid),
+                    ...(sfuId && { sfu_id: sfuId }),
+                    event_type: 'initiated',
+                });
+            }
+            pair.lastError = undefined;
+            pair.attempts++;
+        };
+        this.succeedWs = (cid) => {
+            const pair = this.wsPairs.get(cid);
+            if (!pair)
+                return;
+            const sfuId = this.getSfuId(cid);
+            this.send({
+                ...this.buildCommon(cid, 'WSJoin', pair),
+                ...this.sessionIdField(cid),
+                ...(sfuId && { sfu_id: sfuId }),
+                event_type: 'completed',
+                outcome: 'success',
+                retry_count_attempt: pair.attempts - 1,
+                elapsed_time: Date.now() - pair.startedAt,
+            });
+            this.wsPairs.delete(cid);
+        };
+        this.failWs = (cid) => {
+            const pair = this.wsPairs.get(cid);
+            if (!pair || !pair.lastError) {
+                this.wsPairs.delete(cid);
+                return;
+            }
+            const { reason, code } = pair.lastError;
+            const sfuId = this.getSfuId(cid);
+            this.send({
+                ...this.buildCommon(cid, 'WSJoin', pair),
+                ...this.sessionIdField(cid),
+                event_type: 'completed',
+                outcome: 'failure',
+                retry_count_attempt: pair.attempts - 1,
+                elapsed_time: Date.now() - pair.startedAt,
+                ...(sfuId && { sfu_id: sfuId }),
+                retry_failure_reason: reason,
+                retry_failure_code: code,
+            });
+            this.wsPairs.delete(cid);
+        };
+        this.onPeerConnectionStateChange = (cid, event) => {
+            const role = event.peerType === PeerType.SUBSCRIBER ? 'subscribe' : 'publish';
+            if (event.stateType === 'ice' && event.state === 'failed') {
+                this.emitPeerConnectionFailure(cid, role, 'ICE_CONNECTIVITY_FAILED', 'ICE connectivity checks failed', 'FAILED');
+                return;
+            }
+            if (event.stateType === 'peerConnection' && event.state === 'failed') {
+                this.emitPeerConnectionFailure(cid, role, 'DTLS_CONNECTIVITY_FAILED', 'DTLS connectivity checks failed', 'CONNECTED');
+                return;
+            }
+            if (event.stateType !== 'peerConnection')
+                return;
+            switch (event.state) {
+                case 'connecting':
+                    if (this.peerConnectionPairs.has(pcKey(cid, role)))
+                        return;
+                    this.openPeerConnectionPair(cid, role);
+                    break;
+                case 'connected':
+                    this.emitPeerConnectionSuccess(cid, role);
+                    this.pcEverConnected.set(pcKey(cid, role), true);
+                    break;
+            }
+        };
+        this.openPeerConnectionPair = (cid, role) => {
+            const key = pcKey(cid, role);
+            const pair = {
+                sid: generateUUIDv4(),
+                attempts: 0,
+                startedAt: Date.now(),
+                joinAttemptIdSnapshot: this.joinAttemptIds.get(cid),
+                sfuId: this.getSfuId(cid),
+                userSessionId: this.getUserSessionId(cid),
+                wasPreviouslyConnected: this.pcEverConnected.get(key) === true,
+            };
+            this.peerConnectionPairs.set(key, pair);
+            this.send({
+                ...this.buildCommon(cid, 'PeerConnectionConnect', pair),
+                ...this.sessionIdField(cid),
+                peer_connection: role,
+                was_previously_connected: pair.wasPreviouslyConnected,
+                ...(pair.sfuId && { sfu_id: pair.sfuId }),
+                ...(pair.userSessionId && {
+                    user_session_id: pair.userSessionId,
+                }),
+                event_type: 'initiated',
+            });
+        };
+        this.emitPeerConnectionSuccess = (cid, role) => {
+            const key = pcKey(cid, role);
+            const pair = this.peerConnectionPairs.get(key);
+            if (!pair)
+                return;
+            this.send({
+                ...this.buildCommon(cid, 'PeerConnectionConnect', pair),
+                ...this.sessionIdField(cid),
+                peer_connection: role,
+                was_previously_connected: pair.wasPreviouslyConnected,
+                ...(pair.sfuId && { sfu_id: pair.sfuId }),
+                ...(pair.userSessionId && {
+                    user_session_id: pair.userSessionId,
+                }),
+                event_type: 'completed',
+                outcome: 'success',
+                retry_count_attempt: 0,
+                elapsed_time: Date.now() - pair.startedAt,
+            });
+            this.peerConnectionPairs.delete(key);
+        };
+        this.emitPeerConnectionFailure = (cid, role, code, reason, iceState) => {
+            const key = pcKey(cid, role);
+            const pair = this.peerConnectionPairs.get(key);
+            if (!pair)
+                return;
+            this.send({
+                ...this.buildCommon(cid, 'PeerConnectionConnect', pair),
+                ...this.sessionIdField(cid),
+                peer_connection: role,
+                was_previously_connected: pair.wasPreviouslyConnected,
+                ...(pair.userSessionId && {
+                    user_session_id: pair.userSessionId,
+                }),
+                ...(pair.sfuId && { sfu_id: pair.sfuId }),
+                event_type: 'completed',
+                outcome: 'failure',
+                retry_count_attempt: 0,
+                elapsed_time: Date.now() - pair.startedAt,
+                ice_state: iceState,
+                retry_failure_reason: reason,
+                retry_failure_code: code,
+            });
+            this.peerConnectionPairs.delete(key);
+        };
+        this.getSfuId = (cid) => this.callContexts.get(cid)?.getSfuId() ?? '';
+        this.getUserSessionId = (cid) => this.callContexts.get(cid)?.getUserSessionId() ?? '';
+        this.sessionIdField = (cid) => {
+            const callSessionId = this.callContexts.get(cid)?.getCallSessionId() ?? '';
+            return callSessionId ? { call_session_id: callSessionId } : {};
+        };
+        this.buildCommon = (cid, stage, pair) => {
+            const ctx = this.callContexts.get(cid);
+            const coordinatorConnectId = this.coordinatorConnectId;
+            return {
+                user_id: this.streamClient.userID,
+                type: ctx?.callType ?? '',
+                id: ctx?.callId ?? '',
+                call_cid: cid,
+                stage,
+                stage_id: pair.sid,
+                ...(pair.joinAttemptIdSnapshot && {
+                    join_attempt_id: pair.joinAttemptIdSnapshot,
+                }),
+                ...(coordinatorConnectId && {
+                    coordinator_connect_id: coordinatorConnectId,
+                }),
+                timestamp: new Date().toISOString(),
+                user_agent: this.streamClient.getUserAgent(),
+                sdk_version: this.streamClient.getSdkVersion(),
+            };
+        };
+        this.send = (body) => {
+            void this.sendWithRetry(body);
+        };
+        this.sendWithRetry = async (body) => {
+            for (let attempt = 0; attempt < 5; attempt++) {
+                try {
+                    await this.streamClient.doAxiosRequest('post', '/call_client_event', { events: [body] }, { publicEndpoint: true });
+                    return true;
+                }
+                catch (err) {
+                    const status = err?.response
+                        ?.status;
+                    if (typeof status === 'number' && status >= 400 && status < 500) {
+                        this.logger.debug(`Client event rejected (${status}), not retrying`, body.stage, body.event_type);
+                        return false;
+                    }
+                    if (attempt === 4) {
+                        this.logger.debug('Client event delivery failed after retries', body.stage, body.event_type, err);
+                        return false;
+                    }
+                    await sleep(retryInterval(attempt));
+                }
+            }
+            return false;
+        };
+        this.streamClient = options.streamClient;
+    }
+}
+const readPermissionStatus = (permission) => {
+    const state = getCurrentValue(permission.asStateObservable());
+    switch (state) {
+        case 'granted':
+            return 'GRANTED';
+        case 'denied':
+            return 'FAILED';
+        case 'prompting':
+            return 'INITIATED';
+        case 'prompt':
+        default:
+            return 'NOT_INITIATED';
+    }
+};
+const errorMessage = (err) => err instanceof Error ? err.message : String(err);
+const applyError = (pair, next) => {
+    if (!pair)
+        return;
+    pair.lastError = next;
+};
+const applyErrorIfAbsent = (pair, next) => {
+    if (!pair || pair.lastError)
+        return;
+    pair.lastError = next;
+};
+const mapCoordinatorHttpError = (err) => {
+    if (err instanceof ErrorFromResponse) {
+        return {
+            reason: err.message,
+            code: err.code != null ? String(err.code) : 'SERVER_ERROR',
+        };
+    }
+    return { reason: errorMessage(err), code: 'SERVER_ERROR' };
+};
+const mapCoordinatorWsError = (err) => {
+    if (err instanceof ErrorFromResponse) {
+        return {
+            reason: err.message,
+            code: err.code != null ? String(err.code) : 'SERVER_ERROR',
+        };
+    }
+    if (err instanceof Error) {
+        try {
+            const parsed = JSON.parse(err.message);
+            if (typeof parsed.isWSFailure === 'boolean') {
+                return {
+                    reason: parsed.message || err.message,
+                    code: !parsed.isWSFailure && parsed.code
+                        ? String(parsed.code)
+                        : 'SERVER_ERROR',
+                };
+            }
+        }
+        catch { }
+    }
+    return { reason: errorMessage(err), code: 'SERVER_ERROR' };
+};
+const mapWsJoinError = (err) => {
+    if (err instanceof SfuJoinError) {
+        const sfuError = err.errorEvent.error;
+        return {
+            reason: sfuError?.message || err.message,
+            code: (sfuError && ErrorCode[sfuError.code]) || 'SFU_ERROR',
+        };
+    }
+    const reason = errorMessage(err);
+    if (err instanceof SfuTimeoutError) {
+        return { reason, code: 'REQUEST_TIMEOUT' };
+    }
+    return { reason, code: 'SFU_ERROR' };
+};
+
 /**
  * A `StreamVideoClient` instance lets you communicate with our API, and authenticate users.
  */
@@ -17622,6 +18290,7 @@ class StreamVideoClient {
                     }
                     call = new Call({
                         streamClient: this.streamClient,
+                        clientEventReporter: this.clientEventReporter,
                         type: e.call.type,
                         id: e.call.id,
                         members: e.members,
@@ -17691,6 +18360,8 @@ class StreamVideoClient {
                 user.id = '!anon';
                 return this.connectAnonymousUser(user, tokenOrProvider);
             }
+            const reporter = this.clientEventReporter;
+            reporter.startCoordinatorConnection(user.id);
             const connectUserResponse = await withoutConcurrency(this.connectionConcurrencyTag, async () => {
                 const client = this.streamClient;
                 const { onConnectUserError, persistUserOnConnectionFailure } = client.options;
@@ -17700,14 +18371,15 @@ 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);
                         if (attempt === maxConnectUserRetries - 1) {
+                            reporter.closeCoordinatorWs();
                             onConnectUserError?.(err, errorQueue);
                             throw err;
                         }
@@ -17785,6 +18457,7 @@ class StreamVideoClient {
             return (call ??
                 new Call({
                     streamClient: this.streamClient,
+                    clientEventReporter: this.clientEventReporter,
                     id: id,
                     type: type,
                     clientStore: this.writeableStateStore,
@@ -17809,6 +18482,7 @@ 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,
@@ -17916,6 +18590,7 @@ class StreamVideoClient {
                     const [callType, callId] = call_cid.split(':');
                     call = new Call({
                         streamClient: this.streamClient,
+                        clientEventReporter: this.clientEventReporter,
                         type: callType,
                         id: callId,
                         clientStore: this.writeableStateStore,
@@ -17956,6 +18631,9 @@ class StreamVideoClient {
         this.logger = videoLoggerSystem.getLogger('client');
         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(this.writeableStateStore);
         if (typeof apiKeyOrArgs !== 'string' && apiKeyOrArgs.user) {
@@ -18018,5 +18696,5 @@ const humanize = (n) => {
     return String(n);
 };
 
-export { AudioSettingsRequestDefaultDeviceEnum, AudioSettingsResponseDefaultDeviceEnum, browsers as Browsers, Call, CallRecordingFailedEventRecordingTypeEnum, CallRecordingReadyEventRecordingTypeEnum, CallRecordingStartedEventRecordingTypeEnum, CallRecordingStoppedEventRecordingTypeEnum, CallState, CallType, CallTypes, CallingState, CameraManager, CameraManagerState, CreateDeviceRequestPushProviderEnum, DebounceType, DeviceManager, DeviceManagerState, DynascaleManager, ErrorFromResponse, FrameRecordingSettingsRequestModeEnum, FrameRecordingSettingsRequestQualityEnum, FrameRecordingSettingsResponseModeEnum, IndividualRecordingSettingsRequestModeEnum, IndividualRecordingSettingsResponseModeEnum, IngressAudioEncodingOptionsRequestChannelsEnum, IngressSourceRequestFpsEnum, IngressVideoLayerRequestCodecEnum, LayoutSettingsRequestNameEnum, MicrophoneManager, MicrophoneManagerState, NoiseCancellationSettingsModeEnum, OwnCapability, RTMPBroadcastRequestQualityEnum, RTMPSettingsRequestQualityEnum, RawRecordingSettingsRequestModeEnum, RawRecordingSettingsResponseModeEnum, RecordSettingsRequestModeEnum, RecordSettingsRequestQualityEnum, rxUtils as RxUtils, ScreenShareManager, ScreenShareState, events as SfuEvents, SfuJoinError, models as SfuModels, SpeakerManager, SpeakerState, StartClosedCaptionsRequestLanguageEnum, StartTranscriptionRequestLanguageEnum, StreamSfuClient, StreamVideoClient, StreamVideoReadOnlyStateStore, StreamVideoWriteableStateStore, TranscriptionSettingsRequestClosedCaptionModeEnum, TranscriptionSettingsRequestLanguageEnum, TranscriptionSettingsRequestModeEnum, TranscriptionSettingsResponseClosedCaptionModeEnum, TranscriptionSettingsResponseLanguageEnum, TranscriptionSettingsResponseModeEnum, VideoSettingsRequestCameraFacingEnum, VideoSettingsResponseCameraFacingEnum, ViewportTracker, VisibilityState, checkIfAudioOutputChangeSupported, combineComparators, conditional, createSoundDetector, defaultSortPreset, descending, deviceIds$, disposeOfMediaStream, dominantSpeaker, getAudioBrowserPermission, getAudioDevices, getAudioOutputDevices, getAudioStream, getClientDetails, getDeviceState, getScreenShareStream, getSdkInfo, getVideoBrowserPermission, getVideoDevices, getVideoStream, getWebRTCInfo, hasAudio$1 as hasAudio, hasInterruptedTrack, hasPausedTrack, hasScreenShare, hasScreenShareAudio, hasVideo, humanize, isPinned, livestreamOrAudioRoomSortPreset, logToConsole, name, noopComparator, paginatedLayoutSortPreset, pinned, publishingAudio, publishingVideo, reactionType, resolveDeviceId, role, screenSharing, setDeviceInfo, setOSInfo, setPowerState, setSdkInfo, setThermalState, setWebRTCInfo, speakerLayoutSortPreset, speaking, videoLoggerSystem, withParticipantSource };
+export { AudioSettingsRequestDefaultDeviceEnum, AudioSettingsResponseDefaultDeviceEnum, browsers as Browsers, Call, CallRecordingFailedEventRecordingTypeEnum, CallRecordingReadyEventRecordingTypeEnum, CallRecordingStartedEventRecordingTypeEnum, CallRecordingStoppedEventRecordingTypeEnum, CallState, CallType, CallTypes, CallingState, CameraManager, CameraManagerState, CreateDeviceRequestPushProviderEnum, DebounceType, DeviceManager, DeviceManagerState, DynascaleManager, ErrorFromResponse, FrameRecordingSettingsRequestModeEnum, FrameRecordingSettingsRequestQualityEnum, FrameRecordingSettingsResponseModeEnum, IndividualRecordingSettingsRequestModeEnum, IndividualRecordingSettingsResponseModeEnum, IngressAudioEncodingOptionsRequestChannelsEnum, IngressSourceRequestFpsEnum, IngressVideoLayerRequestCodecEnum, LayoutSettingsRequestNameEnum, MicrophoneManager, MicrophoneManagerState, NoiseCancellationSettingsModeEnum, OwnCapability, RTMPBroadcastRequestQualityEnum, RTMPSettingsRequestQualityEnum, RawRecordingSettingsRequestModeEnum, RawRecordingSettingsResponseModeEnum, RecordSettingsRequestModeEnum, RecordSettingsRequestQualityEnum, rxUtils as RxUtils, ScreenShareManager, ScreenShareState, events as SfuEvents, SfuJoinError, models as SfuModels, SfuTimeoutError, SpeakerManager, SpeakerState, StartClosedCaptionsRequestLanguageEnum, StartTranscriptionRequestLanguageEnum, StreamSfuClient, StreamVideoClient, StreamVideoReadOnlyStateStore, StreamVideoWriteableStateStore, TranscriptionSettingsRequestClosedCaptionModeEnum, TranscriptionSettingsRequestLanguageEnum, TranscriptionSettingsRequestModeEnum, TranscriptionSettingsResponseClosedCaptionModeEnum, TranscriptionSettingsResponseLanguageEnum, TranscriptionSettingsResponseModeEnum, VideoSettingsRequestCameraFacingEnum, VideoSettingsResponseCameraFacingEnum, ViewportTracker, VisibilityState, checkIfAudioOutputChangeSupported, combineComparators, conditional, createSoundDetector, defaultSortPreset, descending, deviceIds$, disposeOfMediaStream, dominantSpeaker, getAudioBrowserPermission, getAudioDevices, getAudioOutputDevices, getAudioStream, getClientDetails, getDeviceState, getScreenShareStream, getSdkInfo, getVideoBrowserPermission, getVideoDevices, getVideoStream, getWebRTCInfo, hasAudio$1 as hasAudio, hasInterruptedTrack, hasPausedTrack, hasScreenShare, hasScreenShareAudio, hasVideo, humanize, isPinned, livestreamOrAudioRoomSortPreset, logToConsole, name, noopComparator, paginatedLayoutSortPreset, pinned, publishingAudio, publishingVideo, reactionType, resolveDeviceId, role, screenSharing, setDeviceInfo, setOSInfo, setPowerState, setSdkInfo, setThermalState, setWebRTCInfo, speakerLayoutSortPreset, speaking, videoLoggerSystem, withParticipantSource };
 //# sourceMappingURL=index.browser.es.js.map