@vivix-ai/ivi-frontend-sdk 0.3.9 → 0.3.10

package/dist/index.js

@@ -1,4 +1,5 @@
 import { ReceiveConversationItemAddedEvent, ReceiveConversationItemDoneEvent, ReceiveResponseCreatedEvent, IviClient, ReceiveSessionCreatedEvent, ReceiveSessionEndedEvent, ReceiveSessionStageGetResponseEvent, ReceiveSessionStageUpdatedEvent, ReceiveSessionTrackCreatedEvent, ReceiveSessionTrackDeletedEvent, ReceiveSessionTrackTookEvent, ReceiveSessionTrackCuedEvent, ReceiveSessionTrackNextSetEvent, ReceiveSessionTracksListResponseEvent, ReceiveSessionSourceCreatedEvent, ReceiveSessionSourceReadyEvent, ReceiveSessionSourceFailedEvent, ReceiveSessionSourceDeletedEvent, ReceiveSessionSourcePreloadEvent, ReceiveSessionSourceClearPreloadEvent, ReceiveSessionSourcesListResponseEvent, ReceiveSessionSourcePlaybackCompletedEvent, ReceiveSessionStreamCreatedEvent, ReceiveSessionStreamStartedEvent, ReceiveSessionStreamEndedEvent, ReceiveSessionStreamFailedEvent, ReceiveSessionStreamDeletedEvent, ReceiveSessionStreamsListResponseEvent, ReceiveConversationListResponseEvent, ReceiveResponseOutputTextDeltaEvent, ReceiveResponseOutputTextDoneEvent, ReceiveResponseOutputAudioTranscriptDeltaEvent, ReceiveResponseOutputAudioTranscriptDoneEvent, ReceiveResponseDoneEvent } from '@vivix-ai/ivi-sdk-ts';
+import { propagation, SpanKind, trace, SpanStatusCode, context } from '@opentelemetry/api';
 import { WebSocketTransport } from '@vivix-ai/ivi-sdk-ts/transports/websocket';
 import { createContext, useState, useEffect, useMemo, useRef, useContext, useCallback, useId } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -1139,6 +1140,94 @@ var ConversationManager = class {
     ];
   }
 };
+var DEFAULT_TRACER_NAME = "@vivix-ai/ivi-frontend-sdk";
+function getIviTelemetryTracer(options) {
+  return options?.tracer ?? trace.getTracer(DEFAULT_TRACER_NAME);
+}
+function getIviTelemetryContext(options) {
+  return options?.context ?? context.active();
+}
+function startIviTelemetrySpan(name, options, attributes) {
+  const tracer = getIviTelemetryTracer(options);
+  const parentContext = getIviTelemetryContext(options);
+  const span = tracer.startSpan(
+    name,
+    {
+      kind: SpanKind.INTERNAL,
+      attributes: mergeIviTelemetryAttributes(options?.attributes, attributes)
+    },
+    parentContext
+  );
+  return {
+    span,
+    context: trace.setSpan(parentContext, span)
+  };
+}
+function endIviTelemetrySpan(span, attributes) {
+  const cleaned = cleanIviTelemetryAttributes(attributes);
+  if (cleaned) {
+    span.setAttributes(cleaned);
+  }
+  span.setStatus({ code: SpanStatusCode.OK });
+  span.end();
+}
+function failIviTelemetrySpan(span, error, attributes) {
+  const cleaned = cleanIviTelemetryAttributes(attributes);
+  if (cleaned) {
+    span.setAttributes(cleaned);
+  }
+  recordIviTelemetryError(span, error);
+  span.end();
+}
+function recordIviTelemetrySpan(name, options, attributes, error) {
+  const { span } = startIviTelemetrySpan(name, options, attributes);
+  if (error === void 0) {
+    span.setStatus({ code: SpanStatusCode.OK });
+  } else {
+    recordIviTelemetryError(span, error);
+  }
+  span.end();
+}
+function withIviTelemetryContext(options, context, attributes) {
+  return {
+    ...options,
+    context,
+    attributes: mergeIviTelemetryAttributes(options?.attributes, attributes)
+  };
+}
+function mergeIviTelemetryAttributes(base, next) {
+  return cleanIviTelemetryAttributes({
+    ...base ?? {},
+    ...next ?? {}
+  });
+}
+function cleanIviTelemetryAttributes(attributes) {
+  const cleaned = {};
+  Object.entries(attributes ?? {}).forEach(([key, value]) => {
+    if (isIviTelemetryAttributeValue(value)) {
+      cleaned[key] = value;
+    }
+  });
+  return Object.keys(cleaned).length > 0 ? cleaned : void 0;
+}
+function recordIviTelemetryError(span, error) {
+  const message = error instanceof Error ? error.message : String(error);
+  span.recordException(error instanceof Error ? error : message);
+  span.setStatus({
+    code: SpanStatusCode.ERROR,
+    message
+  });
+}
+function isIviTelemetryAttributeValue(value) {
+  if (typeof value === "string" || typeof value === "boolean") return true;
+  if (typeof value === "number") return Number.isFinite(value);
+  if (!Array.isArray(value)) return false;
+  const nonNullValues = value.filter((item) => item !== null && item !== void 0);
+  if (nonNullValues.length === 0) return true;
+  const firstType = typeof nonNullValues[0];
+  if (firstType !== "string" && firstType !== "number" && firstType !== "boolean") return false;
+  return nonNullValues.every((item) => typeof item === firstType && (typeof item !== "number" || Number.isFinite(item)));
+}
 
 // src/runtime/managers/trtc-source-manager.ts
 var TAG = "[IVI-TRTC]";
@@ -1149,10 +1238,11 @@ var DEFAULT_DENOISER_OPTIONS = {
   mode: "normal"
 };
 var TrtcSourceManager = class {
-  constructor(onLog, onTrtcEvent, aiDenoiser) {
+  constructor(onLog, onTrtcEvent, aiDenoiser, telemetry) {
     this.onLog = onLog;
     this.onTrtcEvent = onTrtcEvent;
     this.aiDenoiser = aiDenoiser;
+    this.telemetry = telemetry;
     this.sessions = /* @__PURE__ */ new Map();
     this.sourceSessionKeys = /* @__PURE__ */ new Map();
     this.listeners = /* @__PURE__ */ new Map();
@@ -1448,6 +1538,11 @@ var TrtcSourceManager = class {
       const client = TRTC.create();
       const onRemoteVideoAvailable = (event) => {
         this.log("info", `\u8FDC\u7AEF\u89C6\u9891\u53EF\u7528 source=${session.sourceId} userId=${event.userId} streamType=${event.streamType}`);
+        recordIviTelemetrySpan(
+          "ivi.media.trtc.remote_video_available",
+          this.telemetry,
+          buildTrtcMediaTelemetryAttributes(session.sourceId, event.userId, event.streamType)
+        );
         const remoteVideoKey = buildRemoteVideoKey(event.userId, String(event.streamType));
         session.remoteVideoStreams.add(remoteVideoKey);
         if (!session.hasEverReceivedRemoteVideo) {
@@ -1555,6 +1650,16 @@ var TrtcSourceManager = class {
       return;
     }
     binding.startingVideoKeys.add(remoteVideoKey);
+    const telemetryAttributes = buildTrtcMediaTelemetryAttributes(
+      binding.sourceId,
+      userId,
+      streamType
+    );
+    const telemetrySpan = startIviTelemetrySpan(
+      "ivi.media.trtc.start_remote_video",
+      this.telemetry,
+      telemetryAttributes
+    );
     try {
       this.log("info", `\u5F00\u59CB\u6E32\u67D3\u8FDC\u7AEF\u89C6\u9891 source=${binding.sourceId} view=${remoteVideoKey} userId=${userId} streamType=${streamType}`);
       await client.startRemoteVideo({
@@ -1563,14 +1668,24 @@ var TrtcSourceManager = class {
         view: binding.container,
         option: { fillMode: "contain" }
       });
+      endIviTelemetrySpan(telemetrySpan.span);
+      recordIviTelemetrySpan(
+        "ivi.media.trtc.remote_video_rendered",
+        this.telemetry,
+        telemetryAttributes
+      );
       this.log("info", `\u8FDC\u7AEF\u89C6\u9891\u6E32\u67D3\u5B8C\u6210 source=${binding.sourceId} userId=${userId} streamType=${streamType}`);
       binding.startedVideoKeys.add(remoteVideoKey);
       enforceContainMedia(binding.container);
     } catch (error) {
       if (error instanceof Error && /already started|OPERATION_ABORT/i.test(error.message)) {
         binding.startedVideoKeys.add(remoteVideoKey);
+        endIviTelemetrySpan(telemetrySpan.span, {
+          "ivi.media.trtc.start_remote_video.result": "already_started"
+        });
         return;
       }
+      failIviTelemetrySpan(telemetrySpan.span, error);
       this.log("warn", `\u8FDC\u7AEF\u89C6\u9891\u6E32\u67D3\u5931\u8D25 userId=${userId} streamType=${streamType}`, error);
     } finally {
       binding.startingVideoKeys.delete(remoteVideoKey);
@@ -1784,6 +1899,13 @@ function getAIDenoiserModeValue(mode) {
 function buildRemoteVideoKey(userId, streamType) {
   return `${userId}::${streamType}`;
 }
+function buildTrtcMediaTelemetryAttributes(sourceId, userId, streamType) {
+  return {
+    "ivi.source.id": sourceId,
+    "ivi.trtc.user_id": userId,
+    "ivi.trtc.stream_type": String(streamType)
+  };
+}
 function parseRemoteVideoKey(key) {
   const separatorIndex = key.indexOf("::");
   if (separatorIndex < 0) {
@@ -1846,9 +1968,10 @@ function describeLivekitRoom(livekit) {
 // src/runtime/managers/livekit-source-manager.ts
 var TAG2 = "[IVI-LIVEKIT]";
 var LivekitSourceManager = class {
-  constructor(onLog, onRemoteVideoAvailable) {
+  constructor(onLog, onRemoteVideoAvailable, telemetry) {
     this.onLog = onLog;
     this.onRemoteVideoAvailable = onRemoteVideoAvailable;
+    this.telemetry = telemetry;
     this.sessions = /* @__PURE__ */ new Map();
     this.listeners = /* @__PURE__ */ new Map();
   }
@@ -2070,6 +2193,15 @@ var LivekitSourceManager = class {
           kind
         });
         if (kind === "video" && !session.hasEverReceivedRemoteVideo) {
+          recordIviTelemetrySpan(
+            "ivi.media.livekit.remote_video_available",
+            this.telemetry,
+            {
+              "ivi.source.id": session.sourceId,
+              "ivi.livekit.participant_identity": participant.identity,
+              "ivi.livekit.track_sid": track.sid
+            }
+          );
           session.hasEverReceivedRemoteVideo = true;
           for (const waiter of session.remoteVideoWaiters) {
             waiter(true);
@@ -2291,11 +2423,16 @@ var IviRuntimeCoordinator = class {
     this.trtcSourceManager = new TrtcSourceManager(
       this.config.onLog,
       (event) => this.onTrtcManagerEvent(event),
-      this.config.trtcAIDenoiser
+      this.config.trtcAIDenoiser,
+      this.config.telemetry
+    );
+    this.livekitSourceManager = new LivekitSourceManager(
+      this.config.onLog,
+      () => {
+        this.recomposeBootstrapState();
+      },
+      this.config.telemetry
     );
-    this.livekitSourceManager = new LivekitSourceManager(this.config.onLog, () => {
-      this.recomposeBootstrapState();
-    });
     this.sessionHandler = new SessionEventHandler(this.sessionManager, {
       onSessionCreated: (event) => this.onSessionCreated(event),
       onSessionEnded: (event) => this.onSessionEnded(event)
@@ -2332,15 +2469,27 @@ var IviRuntimeCoordinator = class {
    * 启动后状态会从 idle/stopped 进入 connecting，连接成功后由事件驱动进入后续状态。
    */
   async start() {
-    this.setState({
-      ...this.state,
-      status: "connecting"
+    const telemetrySpan = startIviTelemetrySpan("ivi.runtime.start", this.config.telemetry, {
+      "ivi.runtime.status": this.state.status,
+      "ivi.session.id": this.state.session?.id
     });
-    this.dispatcher.start();
     try {
+      this.setState({
+        ...this.state,
+        status: "connecting"
+      });
+      this.dispatcher.start();
       await this.client.connect();
+      endIviTelemetrySpan(telemetrySpan.span, {
+        "ivi.runtime.status": this.state.status,
+        "ivi.session.id": this.state.session?.id
+      });
     } catch (error) {
       this.stop();
+      failIviTelemetrySpan(telemetrySpan.span, error, {
+        "ivi.runtime.status": this.state.status,
+        "ivi.session.id": this.state.session?.id
+      });
       throw error;
     }
   }
@@ -2348,13 +2497,31 @@ var IviRuntimeCoordinator = class {
    * 停止协调器并断开实时连接，同时重置运行态数据为 stopped。
    */
   stop() {
-    this.dispatcher.stop();
-    this.client.disconnect();
-    this.resetStoppedState();
+    const telemetrySpan = startIviTelemetrySpan("ivi.runtime.stop", this.config.telemetry, {
+      "ivi.runtime.status": this.state.status,
+      "ivi.session.id": this.state.session?.id
+    });
+    try {
+      this.dispatcher.stop();
+      this.client.disconnect();
+      this.resetStoppedState();
+      endIviTelemetrySpan(telemetrySpan.span, {
+        "ivi.runtime.status": this.state.status
+      });
+    } catch (error) {
+      failIviTelemetrySpan(telemetrySpan.span, error, {
+        "ivi.runtime.status": this.state.status,
+        "ivi.session.id": this.state.session?.id
+      });
+      throw error;
+    }
   }
   getState() {
     return this.state;
   }
+  getTelemetryOptions() {
+    return this.config.telemetry;
+  }
   onStateChange(listener) {
     this.stateListeners.add(listener);
     return () => {
@@ -2645,7 +2812,16 @@ var IviRuntimeCoordinator = class {
     if (this.state.status === composedNextState.status && this.state.session === composedNextState.session && this.state.stage === composedNextState.stage && this.state.tracks === composedNextState.tracks && this.state.sources === composedNextState.sources && this.state.streams === composedNextState.streams && this.state.conversationItems === composedNextState.conversationItems && this.state.conversations === composedNextState.conversations && isSameBootstrapState(this.state.bootstrap, composedNextState.bootstrap)) {
       return;
     }
+    const previousState = this.state;
     this.state = composedNextState;
+    if (previousState.status !== composedNextState.status) {
+      recordIviTelemetrySpan("ivi.runtime.state_change", this.config.telemetry, {
+        "ivi.runtime.status.previous": previousState.status,
+        "ivi.runtime.status.next": composedNextState.status,
+        "ivi.runtime.state_change.reason": "state_update",
+        "ivi.session.id": composedNextState.session?.id ?? previousState.session?.id
+      });
+    }
     this.stateListeners.forEach((listener) => listener(this.state));
   }
   composeBootstrapState(nextState) {
@@ -2928,44 +3104,101 @@ async function createIVISession(request, options) {
   if (!fetchImpl) {
     throw new Error("fetch is not available. Pass options.fetch to createIVISession.");
   }
-  const requestBody = toCpCreateIVISessionRequestBody(request);
-  const response = await fetchImpl(resolveCreateIVISessionUrl(options), {
-    method: "POST",
-    headers: await buildHeaders(options.headers),
-    body: JSON.stringify(requestBody),
-    credentials: options.credentials,
-    signal: options.signal
-  });
-  const responseBody = await readJsonResponse(response);
-  if (!response.ok) {
-    throw new IviCreateIVISessionError(response, responseBody);
+  const telemetrySpan = startIviTelemetrySpan(
+    "ivi.session.create",
+    options.telemetry,
+    buildCreateSessionTelemetryAttributes(request)
+  );
+  try {
+    const requestBody = toCpCreateIVISessionRequestBody(request);
+    const headers = await buildHeaders(options.headers);
+    injectIviTelemetryHeaders(headers, telemetrySpan.context);
+    const response = await fetchImpl(resolveCreateIVISessionUrl(options), {
+      method: "POST",
+      headers,
+      body: JSON.stringify(requestBody),
+      credentials: options.credentials,
+      signal: options.signal
+    });
+    const responseBody = await readJsonResponse(response);
+    if (!response.ok) {
+      const error = new IviCreateIVISessionError(response, responseBody);
+      failIviTelemetrySpan(telemetrySpan.span, error, {
+        "http.response.status_code": response.status,
+        "http.response.status_text": response.statusText
+      });
+      throw error;
+    }
+    const result = normalizeCreateIVISessionResponse(responseBody, request, requestBody);
+    endIviTelemetrySpan(telemetrySpan.span, {
+      "http.response.status_code": response.status,
+      "ivi.session.id": result.iviSessionId,
+      "ivi.prebuild.playback.kind": result.prebuiltPlayback?.kind
+    });
+    return result;
+  } catch (error) {
+    if (!(error instanceof IviCreateIVISessionError)) {
+      failIviTelemetrySpan(telemetrySpan.span, error);
+    }
+    throw error;
   }
-  return normalizeCreateIVISessionResponse(responseBody, request, requestBody);
 }
 function createRuntimeFromSession(session, options = {}) {
-  const websocketUrl = buildWebSocketUrl(session.endpoint, options.websocket);
-  const client = new IviClient({
-    ...options.clientConfig ?? {},
-    transport: new WebSocketTransport({
-      url: websocketUrl,
-      sessionId: session.iviSessionId,
-      protocols: options.websocket?.protocols,
-      socketFactory: options.websocket?.socketFactory
-    })
+  const telemetrySpan = startIviTelemetrySpan("ivi.runtime.create", options.telemetry, {
+    "ivi.session.id": session.iviSessionId,
+    "ivi.prebuild.playback.kind": session.prebuiltPlayback?.kind
   });
-  const runtime = new IviRuntimeCoordinator(client, options.runtimeConfig);
-  if (options.fastStart !== false && session.prebuiltPlayback) {
-    runtime.setBootstrapSource(toBootstrapSource(session.prebuiltPlayback, options));
+  try {
+    const websocketUrl = buildWebSocketUrl(session.endpoint, options.websocket);
+    const childTelemetry = withIviTelemetryContext(options.telemetry, telemetrySpan.context, {
+      "ivi.session.id": session.iviSessionId
+    });
+    const clientTelemetry = mergeIviTelemetryOptions(
+      options.clientConfig?.telemetry,
+      childTelemetry
+    );
+    const runtimeTelemetry = mergeIviTelemetryOptions(
+      options.runtimeConfig?.telemetry,
+      childTelemetry
+    );
+    const client = new IviClient({
+      ...options.clientConfig ?? {},
+      telemetry: clientTelemetry,
+      transport: new WebSocketTransport({
+        url: websocketUrl,
+        sessionId: session.iviSessionId,
+        protocols: options.websocket?.protocols,
+        socketFactory: options.websocket?.socketFactory
+      })
+    });
+    const runtime = new IviRuntimeCoordinator(client, {
+      ...options.runtimeConfig ?? {},
+      telemetry: runtimeTelemetry
+    });
+    if (options.fastStart !== false && session.prebuiltPlayback) {
+      runtime.setBootstrapSource(toBootstrapSource(session.prebuiltPlayback, options));
+    }
+    endIviTelemetrySpan(telemetrySpan.span);
+    return {
+      session,
+      client,
+      runtime
+    };
+  } catch (error) {
+    failIviTelemetrySpan(telemetrySpan.span, error);
+    throw error;
   }
-  return {
-    session,
-    client,
-    runtime
-  };
 }
 async function createIVISessionRuntime(request, options) {
-  const session = await createIVISession(request, options.http);
-  return createRuntimeFromSession(session, options);
+  const telemetry = mergeIviTelemetryOptions(options.telemetry, options.http.telemetry);
+  const session = await createIVISession(request, {
+    ...options.http,
+    telemetry
+  });
+  return createRuntimeFromSession(session, {
+    ...options,
+    telemetry
+  });
 }
 function toCpCreateIVISessionRequestBody(request) {
   const body = { ...request };
@@ -3051,6 +3284,25 @@ function resolveCreateIVISessionUrl(options) {
   const path = options.path ?? "/v1/ivi/sessions";
   return new URL(path, ensureTrailingSlash(options.baseUrl)).toString();
 }
+function buildCreateSessionTelemetryAttributes(request) {
+  return {
+    "ivi.version": request.iviVersion,
+    "ivi.stream.type": request.streamType,
+    "ivi.prebuild.enabled": Boolean(
+      request.prebuiltStream || request.prebuiltCharacters && request.prebuiltCharacters.length > 0
+    )
+  };
+}
+function mergeIviTelemetryOptions(explicit, inherited) {
+  if (!explicit && !inherited) {
+    return void 0;
+  }
+  return {
+    tracer: explicit?.tracer ?? inherited?.tracer,
+    context: explicit?.context ?? inherited?.context,
+    attributes: mergeIviTelemetryAttributes(inherited?.attributes, explicit?.attributes)
+  };
+}
 async function buildHeaders(headers) {
   const resolvedHeaders = typeof headers === "function" ? await headers() : headers;
   const next = new Headers(resolvedHeaders);
@@ -3059,6 +3311,14 @@ async function buildHeaders(headers) {
   }
   return next;
 }
+var headersTextMapSetter = {
+  set(carrier, key, value) {
+    carrier.set(key, value);
+  }
+};
+function injectIviTelemetryHeaders(headers, context) {
+  propagation.inject(context, headers, headersTextMapSetter);
+}
 async function readJsonResponse(response) {
   const text = await response.text();
   if (!text) {
@@ -3232,32 +3492,71 @@ var IviFrontendSdk = class {
     this.config = config;
   }
   createClient(config) {
-    return new IviClient(config);
+    return new IviClient({
+      ...config,
+      telemetry: mergeSdkTelemetryOptions(config.telemetry, this.config.telemetry)
+    });
   }
   createRuntimeCoordinator(clientConfig, runtimeConfig) {
     const client = this.createClient(clientConfig);
-    return new IviRuntimeCoordinator(client, runtimeConfig);
+    return new IviRuntimeCoordinator(client, {
+      ...runtimeConfig ?? {},
+      telemetry: mergeSdkTelemetryOptions(runtimeConfig?.telemetry, this.config.telemetry)
+    });
   }
   createIVISession(request, options) {
+    const telemetry = mergeSdkTelemetryChain(
+      this.config.telemetry,
+      this.config.http?.telemetry,
+      options?.telemetry
+    );
     return createIVISession(request, {
       ...this.config.http ?? {},
-      ...options ?? {}
+      ...options ?? {},
+      telemetry
     });
   }
   createRuntimeFromSession(session, options) {
-    return createRuntimeFromSession(session, options);
+    return createRuntimeFromSession(session, {
+      ...options ?? {},
+      telemetry: mergeSdkTelemetryChain(this.config.telemetry, options?.telemetry)
+    });
   }
   createIVISessionRuntime(request, options) {
+    const telemetry = mergeSdkTelemetryChain(
+      this.config.telemetry,
+      this.config.http?.telemetry,
+      options?.http?.telemetry,
+      options?.telemetry
+    );
     const http = {
       ...this.config.http ?? {},
-      ...options?.http ?? {}
+      ...options?.http ?? {},
+      telemetry
     };
     return createIVISessionRuntime(request, {
       ...options ?? {},
+      telemetry,
       http
     });
   }
 };
+function mergeSdkTelemetryChain(...items) {
+  return items.reduce(
+    (merged, item) => mergeSdkTelemetryOptions(item, merged),
+    void 0
+  );
+}
+function mergeSdkTelemetryOptions(explicit, inherited) {
+  if (!explicit && !inherited) {
+    return void 0;
+  }
+  return {
+    tracer: explicit?.tracer ?? inherited?.tracer,
+    context: explicit?.context ?? inherited?.context,
+    attributes: mergeIviTelemetryAttributes(inherited?.attributes, explicit?.attributes)
+  };
+}
 var IviStageViewContext = createContext(null);
 var EMPTY_RUNTIME_STATE = {
   status: "idle",
@@ -4458,7 +4757,16 @@ function makeLoadPolicy(label, onLog) {
   };
 }
 function IVIHlsVideo(props) {
-  const { url, videoProps, style, aggressivePreload = false, paused = false, onLog } = props;
+  const {
+    url,
+    sourceId,
+    videoProps,
+    style,
+    aggressivePreload = false,
+    paused = false,
+    onLog,
+    telemetry
+  } = props;
   const videoRef = useRef(null);
   const pausedRef = useRef(paused);
   useEffect(() => {
@@ -4495,6 +4803,7 @@ function IVIHlsVideo(props) {
     const onVideoError = () => {
       const el = videoRef.current;
       const mediaErr = el?.error;
+      recordVideoTelemetry("ivi.media.video.error", telemetry, sourceId, "hls", mediaErr);
       emitHlsLog(onLog, "warn", "<video> \u5143\u7D20\u62A5\u9519", {
         code: mediaErr?.code,
         message: mediaErr?.message,
@@ -4504,6 +4813,13 @@ function IVIHlsVideo(props) {
       });
     };
     const onVideoStalled = () => {
+      recordVideoTelemetry(
+        "ivi.media.video.stalled",
+        telemetry,
+        sourceId,
+        "hls",
+        new Error("<video> stalled")
+      );
       emitHlsLog(onLog, "warn", "<video> stalled\uFF08\u7F13\u51B2\u505C\u6EDE\uFF09", {
         currentTime: videoRef.current?.currentTime,
         readyState: videoRef.current?.readyState
@@ -4646,7 +4962,7 @@ function IVIHlsVideo(props) {
       hlsInstance?.destroy();
       hlsInstance = null;
     };
-  }, [url, aggressivePreload, onLog]);
+  }, [url, sourceId, aggressivePreload, onLog, telemetry]);
   return /* @__PURE__ */ jsx(
     "video",
     {
@@ -4659,6 +4975,17 @@ function IVIHlsVideo(props) {
     }
   );
 }
+function recordVideoTelemetry(name, telemetry, sourceId, kind, error) {
+  recordIviTelemetrySpan(
+    name,
+    telemetry,
+    {
+      "ivi.source.id": sourceId,
+      "ivi.media.kind": kind
+    },
+    error
+  );
+}
 function isM3u8Url(url) {
   return /\.m3u8(?:$|[?#])/i.test(url);
 }
@@ -4724,6 +5051,7 @@ function TrackSlotMediaContent(props) {
     source,
     isPreloading: !isActive
   };
+  const telemetry = runtime?.getTelemetryOptions();
   const mediaStyle = buildAdaptiveMediaStyle(adaptToSourceSize, fitStrategy);
   const shouldMute = !isActive;
   if (renderMedia) return renderMedia(renderContext);
@@ -4795,9 +5123,11 @@ function TrackSlotMediaContent(props) {
       IVIHlsVideo,
       {
         url: playbackUrl,
+        sourceId: slotSourceId,
         videoProps: mergedVideoProps,
         style: videoStyle,
-        paused: shouldPause
+        paused: shouldPause,
+        telemetry
       }
     );
   }
@@ -4819,6 +5149,7 @@ function TrackSlotMediaContent(props) {
     SlotVideo,
     {
       src: playbackUrl,
+      sourceId: slotSourceId,
       paused: shouldPause,
       videoProps: {
         ...mergedVideoProps,
@@ -4826,7 +5157,8 @@ function TrackSlotMediaContent(props) {
         playsInline: videoProps?.playsInline ?? true,
         controls: isActive ? videoProps?.controls ?? true : false
       },
-      style: videoStyle
+      style: videoStyle,
+      telemetry
     }
   );
 }
@@ -4876,17 +5208,48 @@ function SlotVideo(props) {
       video.play().catch(() => void 0);
     }
   }, [props.paused]);
+  const onError = (event) => {
+    recordPlainVideoTelemetry(
+      "ivi.media.video.error",
+      props.telemetry,
+      props.sourceId,
+      event.currentTarget.error
+    );
+    props.videoProps.onError?.(event);
+  };
+  const onStalled = (event) => {
+    recordPlainVideoTelemetry(
+      "ivi.media.video.stalled",
+      props.telemetry,
+      props.sourceId,
+      new Error("<video> stalled")
+    );
+    props.videoProps.onStalled?.(event);
+  };
   return /* @__PURE__ */ jsx(
     "video",
     {
       ref: videoRef,
       src: props.src,
       ...props.videoProps,
+      onError,
+      onStalled,
       autoPlay: props.paused ? false : props.videoProps.autoPlay ?? true,
       style: props.style
     }
   );
 }
+function recordPlainVideoTelemetry(name, telemetry, sourceId, error) {
+  recordIviTelemetrySpan(
+    name,
+    telemetry,
+    {
+      "ivi.source.id": sourceId,
+      "ivi.media.kind": "video"
+    },
+    error
+  );
+}
 
 // src/react/internal/use-multi-preload-sources.ts
 function useMultiPreloadSources(sources, activeSourceId) {