@stream-io/video-client 0.0.13 → 0.0.15

package/src/StreamVideoClient.ts

@@ -24,12 +24,15 @@ import type {
   ConnectionChangedEvent,
   EventHandler,
   EventTypes,
+  LogLevel,
+  Logger,
   StreamClientOptions,
   TokenOrProvider,
   TokenProvider,
   User,
   UserWithId,
 } from './coordinator/connection/types';
+import { getLogger, logToConsole, setLogger } from './logger';
 
 /**
  * A `StreamVideoClient` instance lets you communicate with our API, and authenticate users.
@@ -41,12 +44,16 @@ export class StreamVideoClient {
   readonly readOnlyStateStore: StreamVideoReadOnlyStateStore;
   readonly user?: User;
   readonly token?: TokenOrProvider;
+  readonly logLevel: LogLevel = 'warn';
+  readonly logger: Logger;
+
   private readonly writeableStateStore: StreamVideoWriteableStateStore;
   streamClient: StreamClient;
 
   private eventHandlersToUnregister: Array<() => void> = [];
   private connectionPromise: Promise<void | ConnectedEvent> | undefined;
   private disconnectionPromise: Promise<void> | undefined;
+  private logLevels: LogLevel[] = ['debug', 'info', 'warn', 'error'];
 
   /**
    * You should create only one instance of `StreamVideoClient`.
@@ -71,15 +78,32 @@ export class StreamVideoClient {
         },
     opts?: StreamClientOptions,
   ) {
+    let defaultLogger: Logger = logToConsole;
+    if (typeof apiKeyOrArgs === 'string') {
+      this.logLevel = opts?.logLevel || this.logLevel;
+      this.logger = opts?.logger || defaultLogger;
+    } else {
+      this.logLevel = apiKeyOrArgs.options?.logLevel || this.logLevel;
+      this.logger = apiKeyOrArgs.options?.logger || defaultLogger;
+    }
+
+    setLogger(this.filterLogs(defaultLogger));
+
+    const clientLogger = getLogger(['client']);
+
     if (typeof apiKeyOrArgs === 'string') {
       this.streamClient = new StreamClient(apiKeyOrArgs, {
         persistUserOnConnectionFailure: true,
         ...opts,
+        logLevel: this.logLevel,
+        logger: clientLogger,
       });
     } else {
       this.streamClient = new StreamClient(apiKeyOrArgs.apiKey, {
         persistUserOnConnectionFailure: true,
         ...apiKeyOrArgs.options,
+        logLevel: this.logLevel,
+        logger: clientLogger,
       });
 
       this.user = apiKeyOrArgs.user;
@@ -155,7 +179,7 @@ export class StreamVideoClient {
               },
               sort: [{ field: 'cid', direction: 1 }],
             }).catch((err) => {
-              console.warn('Failed to re-watch calls', err);
+              this.logger('error', 'Failed to re-watch calls', err);
             });
           }
         }
@@ -167,7 +191,10 @@ export class StreamVideoClient {
         if (event.type !== 'call.created') return;
         const { call, members } = event;
         if (userToConnect.id === call.created_by.id) {
-          console.warn('Received `call.created` sent by the current user');
+          this.logger(
+            'warn',
+            'Received `call.created` sent by the current user',
+          );
           return;
         }
 
@@ -189,7 +216,7 @@ export class StreamVideoClient {
         if (event.type !== 'call.ring') return;
         const { call, members } = event;
         if (userToConnect.id === call.created_by.id) {
-          console.warn('Received `call.ring` sent by the current user');
+          this.logger('warn', 'Received `call.ring` sent by the current user');
           return;
         }
 
@@ -465,4 +492,20 @@ export class StreamVideoClient {
     this.connectionPromise.finally(() => (this.connectionPromise = undefined));
     return this.connectionPromise;
   };
+
+  private filterLogs = (logMethod: Logger) => {
+    return (
+      logLevel: LogLevel,
+      messeage: string,
+      extraData?: Record<string, unknown>,
+      tags?: string[],
+    ) => {
+      if (
+        this.logLevels.indexOf(logLevel) >=
+        this.logLevels.indexOf(this.logLevel)
+      ) {
+        logMethod(logLevel, messeage, extraData, tags);
+      }
+    };
+  };
 }

package/src/coordinator/connection/client.ts

@@ -212,7 +212,8 @@ export class StreamClient {
      * If the user id remains the same we don't throw error
      */
     if (this.userID === user.id && this.setUserPromise) {
-      console.warn(
+      this.logger(
+        'warn',
         'Consecutive calls to connectUser is detected, ideally you should only call this function once in your app.',
       );
       return this.setUserPromise;
@@ -228,7 +229,8 @@ export class StreamClient {
       (this._isUsingServerAuth() || this.node) &&
       !this.options.allowServerSideConnect
     ) {
-      console.warn(
+      this.logger(
+        'warn',
         'Please do not use connectUser server side. connectUser impacts MAU and concurrent connection usage and thus your bill. If you have a valid use-case, add "allowServerSideConnect: true" to the client options to disable this warning.',
       );
     }
@@ -331,9 +333,6 @@ export class StreamClient {
       this.logger(
         'info',
         'client:openConnection() - connection already in progress',
-        {
-          tags: ['connection', 'client'],
-        },
       );
       return this.wsPromise;
     }
@@ -345,9 +344,6 @@ export class StreamClient {
       this.logger(
         'info',
         'client:openConnection() - openConnection called twice, healthy connection already exists',
-        {
-          tags: ['connection', 'client'],
-        },
       );
 
       return Promise.resolve();
@@ -379,9 +375,7 @@ export class StreamClient {
    *                https://developer.mozilla.org/en-US/docs/Web/API/CloseEvent
    */
   disconnectUser = async (timeout?: number) => {
-    this.logger('info', 'client:disconnect() - Disconnecting the client', {
-      tags: ['connection', 'client'],
-    });
+    this.logger('info', 'client:disconnect() - Disconnecting the client');
 
     // remove the user specific fields
     delete this.user;
@@ -440,9 +434,7 @@ export class StreamClient {
     if (!(key in this.listeners)) {
       this.listeners[key] = [];
     }
-    this.logger('info', `Attaching listener for ${key} event`, {
-      tags: ['event', 'client'],
-    });
+    this.logger('info', `Attaching listener for ${key} event`);
     this.listeners[key].push(callback);
 
     return () => {
@@ -466,9 +458,7 @@ export class StreamClient {
       this.listeners[key] = [];
     }
 
-    this.logger('info', `Removing listener for ${key} event`, {
-      tags: ['event', 'client'],
-    });
+    this.logger('info', `Removing listener for ${key} event`);
     this.listeners[key] = this.listeners[key].filter(
       (value) => value !== callback,
     );
@@ -482,9 +472,8 @@ export class StreamClient {
       config?: AxiosRequestConfig & { maxBodyLength?: number };
     },
   ) {
-    this.logger('info', `client: ${type} - Request - ${url}`, {
-      tags: ['api', 'api_request', 'client'],
-      url,
+    this.logger('info', `client: ${type} - Request - ${url}`);
+    this.logger('debug', `client: ${type} - Request payload`, {
       payload: data,
       config,
     });
@@ -495,16 +484,16 @@ export class StreamClient {
       'info',
       `client:${type} - Response - url: ${url} > status ${response.status}`,
       {
-        tags: ['api', 'api_response', 'client'],
-        url,
         response,
       },
     );
+    this.logger('debug', `client:${type} - Response payload`, {
+      response,
+    });
   }
 
   _logApiError(type: string, url: string, error: unknown) {
     this.logger('error', `client:${type} - Error - url: ${url}`, {
-      tags: ['api', 'api_response', 'client'],
       url,
       error,
     });
@@ -629,7 +618,8 @@ export class StreamClient {
   dispatchEvent = (event: StreamVideoEvent) => {
     if (!event.received_at) event.received_at = new Date();
 
-    console.log(`Dispatching event: ${event.type}`, event);
+    this.logger('info', `Dispatching event: ${event.type}`);
+    this.logger('debug', 'Event payload:', event);
     this._callClientListeners(event);
   };
 
@@ -696,7 +686,7 @@ export class StreamClient {
       if (this.wsFallback) {
         return await this.wsFallback.connect();
       }
-      console.log('StreamClient.connect: this.wsConnection.connect()');
+      this.logger('info', 'StreamClient.connect: this.wsConnection.connect()');
       // if WSFallback is enabled, ws connect should timeout faster so fallback can try
       return await this.wsConnection.connect(
         this.options.enableWSFallback
@@ -706,12 +696,15 @@ export class StreamClient {
     } catch (err) {
       // run fallback only if it's WS/Network error and not a normal API error
       // make sure browser is online before even trying the longpoll
-      // @ts-ignore
-      if (this.options.enableWSFallback && isWSFailure(err) && isOnline()) {
+      if (
+        this.options.enableWSFallback &&
+        // @ts-ignore
+        isWSFailure(err) &&
+        isOnline(this.logger)
+      ) {
         this.logger(
-          'info',
+          'warn',
           'client:connect() - WS failed, fallback to longpoll',
-          { tags: ['connection', 'client'] },
         );
         this.dispatchEvent({ type: 'transport.changed', mode: 'longpoll' });
 

package/src/coordinator/connection/connection.ts

@@ -107,7 +107,6 @@ export class StableWSConnection {
 
   _log(msg: string, extra: UR = {}, level: LogLevel = 'info') {
     this.client.logger(level, 'connection:' + msg, {
-      tags: ['connection'],
       ...extra,
     });
   }
@@ -496,13 +495,13 @@ export class StableWSConnection {
 
     const user = this.client.user;
     if (!user) {
-      console.error(`User not set, can't connect to WS`);
+      this.client.logger('error', `User not set, can't connect to WS`);
       return;
     }
 
     const token = this.client._getToken();
     if (!token) {
-      console.error(`Token not set, can't connect authenticate`);
+      this.client.logger('error', `Token not set, can't connect authenticate`);
       return;
     }
 

package/src/coordinator/connection/connection_fallback.ts

@@ -35,7 +35,6 @@ export class WSConnectionFallback {
 
   _log(msg: string, extra: UR = {}, level: LogLevel = 'info') {
     this.client.logger(level, 'WSConnectionFallback:' + msg, {
-      tags: ['connection_fallback', 'connection'],
       ...extra,
     });
   }

package/src/coordinator/connection/types.ts

@@ -24,7 +24,7 @@ export type { OwnUserResponse } from '../../gen/coordinator';
 
 export type ConnectAPIResponse = Promise<void | ConnectedEvent>;
 
-export type LogLevel = 'info' | 'error' | 'warn';
+export type LogLevel = 'debug' | 'info' | 'error' | 'warn';
 
 type ErrorResponseDetails = {
   code: number;
@@ -81,7 +81,8 @@ export type CallEventTypes = StreamCallEvent['type'];
 export type Logger = (
   logLevel: LogLevel,
   message: string,
-  extraData?: Record<string, unknown>,
+  extraData?: any,
+  tags?: string[],
 ) => void;
 
 export type StreamClientOptions = Partial<AxiosRequestConfig> & {
@@ -101,6 +102,7 @@ export type StreamClientOptions = Partial<AxiosRequestConfig> & {
   /** experimental feature, please contact support if you want this feature enabled for you */
   enableWSFallback?: boolean;
   logger?: Logger;
+  logLevel?: LogLevel;
   /**
    * When true, user will be persisted on client. Otherwise if `connectUser` call fails, then you need to
    * call `connectUser` again to retry.

package/src/coordinator/connection/utils.ts

@@ -1,3 +1,5 @@
+import { Logger } from './types';
+
 export const sleep = (m: number): Promise<void> =>
   new Promise((r) => setTimeout(r, m));
 
@@ -111,7 +113,7 @@ export function convertErrorToJson(err: Error) {
  * isOnline safely return the navigator.online value for browser env
  * if navigator is not in global object, it always return true
  */
-export function isOnline() {
+export function isOnline(logger: Logger) {
   const nav =
     typeof navigator !== 'undefined'
       ? navigator
@@ -120,7 +122,8 @@ export function isOnline() {
       : undefined;
 
   if (!nav) {
-    console.warn(
+    logger(
+      'warn',
       'isOnline failed to access window.navigator and assume browser is online',
     );
     return true;

package/src/devices/devices.ts

@@ -10,6 +10,7 @@ import {
   pairwise,
   shareReplay,
 } from 'rxjs';
+import { getLogger } from '../logger';
 
 const getDevices = (constraints?: MediaStreamConstraints) => {
   return new Observable<MediaDeviceInfo[]>((subscriber) => {
@@ -26,7 +27,10 @@ const getDevices = (constraints?: MediaStreamConstraints) => {
         });
       })
       .catch((error) => {
-        console.error('Failed to get devices', error);
+        const logger = getLogger(['devices']);
+        if (logger) {
+          logger('error', 'Failed to get devices', error);
+        }
         subscriber.error(error);
       });
   });
@@ -134,7 +138,10 @@ const getStream = async (constraints: MediaStreamConstraints) => {
   try {
     return await navigator.mediaDevices.getUserMedia(constraints);
   } catch (e) {
-    console.error(`Failed get user media`, constraints, e);
+    getLogger(['devices'])?.('error', `Failed get user media`, {
+      error: e,
+      constraints: constraints,
+    });
     throw e;
   }
 };
@@ -199,7 +206,7 @@ export const getScreenShareStream = async (
       ...options,
     });
   } catch (e) {
-    console.error('Failed to get screen share stream', e);
+    getLogger(['devices'])?.('error', 'Failed to get screen share stream', e);
     throw e;
   }
 };

package/src/events/__tests__/call-permissions.test.ts

@@ -14,7 +14,7 @@ describe('Call Permission Events', () => {
     // @ts-expect-error
     state.updateOrAddParticipant('session-id', {
       userId: 'test',
-      isLoggedInUser: true,
+      isLocalParticipant: true,
     });
     const handler = watchCallPermissionRequest(state);
     handler({
@@ -59,7 +59,7 @@ describe('Call Permission Events', () => {
         connectionQuality: ConnectionQuality.EXCELLENT,
         roles: [],
         trackLookupPrefix: '',
-        isLoggedInUser: true,
+        isLocalParticipant: true,
       },
     ]);
     const handler = watchCallPermissionsUpdated(state);

package/src/events/call.ts

@@ -1,6 +1,7 @@
 import { CallingState, CallState } from '../store';
 import { StreamVideoEvent } from '../coordinator/connection/types';
 import { Call } from '../Call';
+import { getLogger } from '../logger';
 
 /**
  * Event handler that watched the delivery of `call.accepted`.
@@ -35,15 +36,21 @@ export const watchCallRejected = (call: Call) => {
     const { session: callSession } = eventCall;
 
     if (!callSession) {
-      console.log('No call session provided. Ignoring call.rejected event.');
+      call.logger(
+        'warn',
+        'No call session provided. Ignoring call.rejected event.',
+        event,
+      );
       return;
     }
 
     const rejectedBy = callSession.rejected_by;
     const { members, callingState } = call.state;
     if (callingState !== CallingState.RINGING) {
-      console.log(
+      call.logger(
+        'warn',
         'Call is not in ringing mode (it is either accepted or rejected already). Ignoring call.rejected event.',
+        event,
       );
       return;
     }
@@ -52,12 +59,12 @@ export const watchCallRejected = (call: Call) => {
         .filter((m) => m.user_id !== call.currentUserId)
         .every((m) => rejectedBy[m.user_id]);
       if (everyoneElseRejected) {
-        console.log('everyone rejected, leaving the call');
+        call.logger('info', 'everyone rejected, leaving the call');
         await call.leave();
       }
     } else {
       if (rejectedBy[eventCall.created_by.id]) {
-        console.log('call creator rejected, leaving call');
+        call.logger('info', 'call creator rejected, leaving call');
         await call.leave();
       }
     }

package/src/events/sessions.ts

@@ -1,5 +1,6 @@
 import { CallState } from '../store';
 import { StreamVideoEvent } from '../coordinator/connection/types';
+import { getLogger } from '../logger';
 
 /**
  * Watch for call.session_started events and update the call metadata.
@@ -36,8 +37,10 @@ export const watchCallSessionParticipantJoined = (state: CallState) => {
     const { user } = event;
     state.setMetadata((metadata) => {
       if (!metadata || !metadata.session) {
-        console.warn(
+        state.logger(
+          'warn',
           `Received call.session_participant_joined event but the metadata structure is invalid.`,
+          event,
         );
         return metadata;
       }
@@ -76,8 +79,10 @@ export const watchCallSessionParticipantLeft = (state: CallState) => {
     const { user } = event;
     state.setMetadata((metadata) => {
       if (!metadata || !metadata.session) {
-        console.warn(
+        state.logger(
+          'warn',
           `Received call.session_participant_left event but the metadata structure is invalid.`,
+          event,
         );
         return metadata;
       }

package/src/logger.ts

@@ -0,0 +1,45 @@
+import { LogLevel, Logger } from './coordinator/connection/types';
+
+let logger: Logger | undefined;
+
+export const logToConsole: Logger = (
+  logLevel: LogLevel,
+  message: string,
+  extraData?: Record<string, unknown>,
+  tags?: string[],
+) => {
+  let logMethod;
+  if (logLevel === 'error') {
+    logMethod = console.error;
+  } else if (logLevel === 'warn') {
+    logMethod = console.warn;
+  } else {
+    logMethod = console.log;
+  }
+
+  logMethod(
+    logLevel,
+    `${tags?.join(':')} - ${message}`,
+    extraData ? extraData : '',
+  );
+};
+
+export const setLogger = (l: Logger) => {
+  logger = l;
+};
+
+export const getLogger = (withTags?: string[]) => {
+  const loggerMethod = logger || (() => {});
+  const result: Logger = (
+    logLevel: LogLevel,
+    messeage: string,
+    extraData?: Record<string, unknown>,
+    tags?: string[],
+  ) => {
+    loggerMethod(logLevel, messeage, extraData, [
+      ...(tags || []),
+      ...(withTags || []),
+    ]);
+  };
+  return result;
+};

package/src/rtc/Dispatcher.ts

@@ -1,5 +1,6 @@
-import { CallEventTypes } from '../coordinator/connection/types';
+import { CallEventTypes, Logger } from '../coordinator/connection/types';
 import type { SfuEvent } from '../gen/video/sfu/event/events';
+import { getLogger } from '../logger';
 
 export type SfuEventKinds = NonNullable<SfuEvent['eventPayload']['oneofKind']>;
 
@@ -33,18 +34,27 @@ export class Dispatcher {
   private subscribers: {
     [eventName: string]: SfuEventListener[] | undefined;
   } = {};
+  private logger?: Logger;
+
+  constructor() {
+    this.logger = getLogger(['sfu-client']);
+  }
 
   dispatch = (message: SfuEvent) => {
     const eventKind = message.eventPayload.oneofKind;
     if (eventKind) {
-      // @ts-ignore
-      console.log(`Dispatching`, eventKind, message.eventPayload[eventKind]);
+      this.logger?.('info', `Dispatching ${eventKind}`);
+      this.logger?.(
+        'debug',
+        `Event payload`,
+        (message.eventPayload as any)[eventKind],
+      );
       const listeners = this.subscribers[eventKind];
       listeners?.forEach((fn) => {
         try {
           fn(message);
         } catch (e) {
-          console.warn(`Listener failed with error`, e);
+          this.logger?.('warn', 'Listener failed with error', e);
         }
       });
     }

package/src/rtc/IceTrickleBuffer.ts

@@ -1,5 +1,7 @@
 import { ReplaySubject } from 'rxjs';
 import { ICETrickle, PeerType } from '../gen/video/sfu/models/models';
+import { getLogger } from '../logger';
+import { Logger } from '../coordinator/connection/types';
 
 /**
  * A buffer for ICE Candidates. Used for ICE Trickle:
@@ -8,6 +10,11 @@ import { ICETrickle, PeerType } from '../gen/video/sfu/models/models';
 export class IceTrickleBuffer {
   readonly subscriberCandidates = new ReplaySubject<ICETrickle>();
   readonly publisherCandidates = new ReplaySubject<ICETrickle>();
+  private logger?: Logger;
+
+  constructor() {
+    this.logger = getLogger(['sfu-client']);
+  }
 
   push = (iceTrickle: ICETrickle) => {
     if (iceTrickle.peerType === PeerType.SUBSCRIBER) {
@@ -15,7 +22,7 @@ export class IceTrickleBuffer {
     } else if (iceTrickle.peerType === PeerType.PUBLISHER_UNSPECIFIED) {
       this.publisherCandidates.next(iceTrickle);
     } else {
-      console.warn(`ICETrickle, Unknown peer type`, iceTrickle);
+      this.logger?.('warn', `ICETrickle, Unknown peer type`, iceTrickle);
     }
   };
 }

package/src/rtc/__tests__/publisher.test.ts

@@ -67,7 +67,7 @@ describe('Publisher', () => {
     state.setParticipants([
       // @ts-ignore
       {
-        isLoggedInUser: true,
+        isLocalParticipant: true,
         userId: 'test-user-id',
         sessionId: sessionId,
         publishedTracks: [],

package/src/rtc/codecs.ts

@@ -1,24 +1,25 @@
 import { isReactNative } from '../helpers/platforms';
 import { removeCodec, setPreferredCodec } from '../helpers/sdp-munging';
+import { getLogger } from '../logger';
 
 export const getPreferredCodecs = (
   kind: 'audio' | 'video',
   preferredCodec: string,
   codecToRemove?: string,
 ): RTCRtpCodecCapability[] | undefined => {
+  const logger = getLogger(['codecs']);
   if (!('getCapabilities' in RTCRtpSender)) {
-    console.warn('RTCRtpSender.getCapabilities is not supported');
+    logger?.('warn', 'RTCRtpSender.getCapabilities is not supported');
     return;
   }
   const cap = RTCRtpSender.getCapabilities(kind);
-  console.log('s4e');
   if (!cap) return;
   const matched: RTCRtpCodecCapability[] = [];
   const partialMatched: RTCRtpCodecCapability[] = [];
   const unmatched: RTCRtpCodecCapability[] = [];
   cap.codecs.forEach((c) => {
     const codec = c.mimeType.toLowerCase();
-    console.log(c);
+    logger?.('debug', `Found supported codec: ${codec}`);
     const shouldRemoveCodec =
       codecToRemove && codec === `${kind}/${codecToRemove}`;
     if (shouldRemoveCodec) return;
@@ -37,11 +38,12 @@ export const getPreferredCodecs = (
       }
       return;
     }
-    console.log('matched', matched);
     matched.push(c);
   });
 
-  return [...matched, ...partialMatched, ...unmatched];
+  const result = [...matched, ...partialMatched, ...unmatched];
+  logger?.('info', `Preffered codecs: `, result);
+  return result;
 };
 
 export const getGenericSdp = async (

package/src/rtc/flows/join.ts

@@ -5,6 +5,7 @@ import {
 } from '../../gen/coordinator';
 import { JoinCallData } from '../../types';
 import { StreamClient } from '../../coordinator/connection/client';
+import { getLogger } from '../../logger';
 
 /**
  * Collects all necessary information to join a call, talks to the coordinator
@@ -71,15 +72,17 @@ const getLocationHint = async () => {
   const hintURL = `https://hint.stream-io-video.com/`;
   const abortController = new AbortController();
   const timeoutId = setTimeout(() => abortController.abort(), 1000);
+  const logger = getLogger(['call']);
   try {
     const response = await fetch(hintURL, {
       method: 'HEAD',
       signal: abortController.signal,
     });
     const awsPop = response.headers.get('x-amz-cf-pop') || 'ERR';
+    logger?.('info', `Location header: ${awsPop}`);
     return awsPop.substring(0, 3); // AMS1-P2 -> AMS
   } catch (e) {
-    console.error(`Failed to get location hint from ${hintURL}`, e);
+    logger?.('error', `Failed to get location hint from ${hintURL}`, e);
     return 'ERR';
   } finally {
     clearTimeout(timeoutId);