agora-appbuilder-core 4.0.24 → 4.0.25-beta-2

package/template/src/auth/useTokenAuth.tsx

@@ -39,17 +39,42 @@ const useTokenAuth = () => {
 
   const getRefreshToken = async () => {
     if (store?.token) {
+      const requestId = getUniqueID();
+      const startReqTs = Date.now();
+      logger.log(
+        LogSource.NetworkRest,
+        'token_refresh',
+        'API token_refresh Trying to refresh the token',
+        {
+          requestId: requestId,
+          startReqTs,
+        },
+      );
       await fetch(`${$config.BACKEND_ENDPOINT}/v1/token/refresh`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
           authorization: store?.token ? `Bearer ${store.token}` : '',
           'X-Platform-ID': getPlatformId(),
-          'X-Request-Id': getUniqueID(),
+          'X-Request-Id': requestId,
         },
       })
         .then(response => response.json())
         .then(data => {
+          const endReqTs = Date.now();
+          const latency = endReqTs - startReqTs;
+          logger.log(
+            LogSource.NetworkRest,
+            'token_refresh',
+            'API token_refresh successfully done',
+            {
+              requestId,
+              responseData: data,
+              startReqTs,
+              endReqTs,
+              latency,
+            },
+          );
           if (data?.token) {
             updateToken(data.token);
             if (isSDK()) {
@@ -167,6 +192,17 @@ const useTokenAuth = () => {
   const tokenLogout = async (cookieLogout: boolean = false) => {
     return new Promise((resolve, reject) => {
       try {
+        const startReqTs = Date.now();
+        const requestId = getUniqueID();
+        logger.log(
+          LogSource.NetworkRest,
+          'idp_logout',
+          'Trying to call v1 logout',
+          {
+            startReqTs,
+            ...(cookieLogout ? {} : {requestId}),
+          },
+        );
         fetch(
           `${$config.BACKEND_ENDPOINT}/v1/logout`,
           cookieLogout
@@ -176,16 +212,42 @@ const useTokenAuth = () => {
                   authorization: tokenRef.current
                     ? `Bearer ${tokenRef.current}`
                     : '',
-                  'X-Request-Id': getUniqueID(),
+                  'X-Request-Id': requestId,
                 },
               },
         )
           .then(response => response.text())
-          .then(_ => {
+          .then(res => {
+            const endReqTs = Date.now();
+            logger.log(
+              LogSource.NetworkRest,
+              'idp_logout',
+              'API V1 logout called successfully',
+              {
+                responseData: res,
+                startReqTs,
+                endReqTs,
+                latency: endReqTs - startReqTs,
+                ...(cookieLogout ? {} : {requestId}),
+              },
+            );
             resolve(true);
             updateToken(null);
           })
-          .catch(_ => {
+          .catch(err => {
+            const endReqTs = Date.now();
+            logger.error(
+              LogSource.NetworkRest,
+              'idp_logout',
+              'Error API V1 logout called successfully',
+              {
+                error: err,
+                startReqTs,
+                endReqTs,
+                latency: endReqTs - startReqTs,
+                ...(cookieLogout ? {} : {requestId}),
+              },
+            );
             reject(false);
           });
       } catch (error) {

package/template/src/components/DeviceConfigure.tsx

@@ -80,6 +80,8 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
   const speakerSelectInProgress = useRef(false);
   const speakerSelectQueue = useRef([]);
 
+  const muteRefreshDeviceList = useRef(false);
+
   const {primaryColor} = useContext(ColorContext);
 
   const {store, setStore} = useContext(StorageContext);
@@ -160,49 +162,52 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
   const {localStream} = RtcEngineUnsafe;
 
   const refreshDeviceList = useCallback(async (noEmitLog?: boolean) => {
-    let updatedDeviceList: MediaDeviceInfo[];
-    await RtcEngineUnsafe.getDevices(function (devices: deviceInfo[]) {
-      !noEmitLog &&
-        console.debug(
-          LogSource.Internals,
-          'DEVICE_CONFIGURE',
-          'Fetching all devices: ',
-          devices,
-        );
-      /**
-       * Some browsers list the same microphone twice with different Id's,
-       * their group Id's match as they are the same physical device.
-       * deviceId == default is an oddity in chrome which stores the user
-       * preference
-       */
-      /**
-       *  1. Fetch devices and filter so the deviceId with empty
-       *     values are exluded
-       *  2. Store only unique devices with unique groupIds
-       */
-
-      updatedDeviceList = devices.filter(
-        (device: deviceInfo) =>
-          // device?.deviceId !== 'default' &&
-          device?.deviceId !== '' &&
-          (device.kind == 'audioinput' ||
-            device.kind == 'videoinput' ||
-            device.kind == 'audiooutput'),
-      );
-
-      !noEmitLog &&
-        console.debug(
-          LogSource.Internals,
-          'DEVICE_CONFIGURE',
-          'Setting unique devices',
-          updatedDeviceList,
+    if (!muteRefreshDeviceList.current) {
+      muteRefreshDeviceList.current = true;
+      let updatedDeviceList: MediaDeviceInfo[];
+      await RtcEngineUnsafe.getDevices(function (devices: deviceInfo[]) {
+        !noEmitLog &&
+          logger.log(
+            LogSource.Internals,
+            'DEVICE_CONFIGURE',
+            'Fetching all devices: ',
+            devices,
+          );
+        /**
+         * Some browsers list the same microphone twice with different Id's,
+         * their group Id's match as they are the same physical device.
+         * deviceId == default is an oddity in chrome which stores the user
+         * preference
+         */
+        /**
+         *  1. Fetch devices and filter so the deviceId with empty
+         *     values are exluded
+         *  2. Store only unique devices with unique groupIds
+         */
+
+        updatedDeviceList = devices.filter(
+          (device: deviceInfo) =>
+            // device?.deviceId !== 'default' &&
+            device?.deviceId !== '' &&
+            (device.kind == 'audioinput' ||
+              device.kind == 'videoinput' ||
+              device.kind == 'audiooutput'),
         );
-      if (updatedDeviceList.length > 0) {
-        setDeviceList(updatedDeviceList);
-      }
-    });
 
-    return updatedDeviceList;
+        !noEmitLog &&
+          logger.log(
+            LogSource.Internals,
+            'DEVICE_CONFIGURE',
+            'Setting unique devices',
+            updatedDeviceList,
+          );
+        if (updatedDeviceList.length > 0) {
+          setDeviceList(updatedDeviceList);
+        }
+      });
+      muteRefreshDeviceList.current = false;
+      return updatedDeviceList;
+    }
   }, []);
 
   const getAgoraTrackDeviceId = (type: 'audio' | 'video') => {
@@ -224,20 +229,22 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
             RtcEngineUnsafe.audioDeviceId
           : //@ts-ignore
             RtcEngineUnsafe.videoDeviceId;
-      console.debug(
-        LogSource.Internals,
-        'DEVICE_CONFIGURE',
-        `Agora ${type} Engine is using ${currentDevice}`,
-      );
+      currentDevice &&
+        logger.log(
+          LogSource.Internals,
+          'DEVICE_CONFIGURE',
+          `Agora ${type} Engine is using ${currentDevice}`,
+        );
     } else {
       currentDevice = localStream[type]
         ?.getMediaStreamTrack()
         .getSettings().deviceId;
-      console.debug(
-        LogSource.Internals,
-        'DEVICE_CONFIGURE',
-        `Agora ${type} Track is using ${currentDevice}`,
-      );
+      currentDevice &&
+        logger.log(
+          LogSource.Internals,
+          'DEVICE_CONFIGURE',
+          `Agora ${type} Track is using ${currentDevice}`,
+        );
     }
     return currentDevice ?? '';
   };
@@ -249,10 +256,10 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
    * truth.
    */
   const syncSelectedDeviceUi = (kind?: deviceKind) => {
-    console.debug(
+    logger.log(
       LogSource.Internals,
       'DEVICE_CONFIGURE',
-      'Refreshing',
+      'Refreshing UI for selected device',
       kind ?? 'all',
     );
     switch (kind) {
@@ -388,7 +395,7 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
       let count = 0;
       const interval = setInterval(() => {
         count = count + 1;
-        refreshDeviceList(count % 10 !== 0);
+        refreshDeviceList(true);
       }, 2000);
       return () => {
         clearInterval(interval);
@@ -489,12 +496,6 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
           },
         }[kind];
 
-        logger.debug(
-          LogSource.Internals,
-          'DEVICE_CONFIGURE',
-          `${logTag} ${deviceLogTag} Device list populated but none selected`,
-        );
-
         if (sdkDevice?.deviceId && currentDevice) {
           if (checkDeviceExists(sdkDevice.deviceId, deviceList)) {
             applySdkDeviceChangeRequest(kind);
@@ -507,7 +508,7 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
           currentDevice !== storedDevice &&
           checkDeviceExists(storedDevice, deviceList)
         ) {
-          logger.debug(
+          logger.log(
             LogSource.Internals,
             'DEVICE_CONFIGURE',
             `${logTag} ${deviceLogTag} Setting to active id ${storedDevice}`,
@@ -536,12 +537,12 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
       deviceList.length === 0 ||
       deviceList.find((device: MediaDeviceInfo) => device.label === '')
     ) {
-      logger.debug(
+      logger.log(
         LogSource.Internals,
         'DEVICE_CONFIGURE',
         `${logTag} Empty device list`,
       );
-      refreshDeviceList();
+      refreshDeviceList(false);
     }
   }, [rtc, store, deviceList]);
 
@@ -549,7 +550,7 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
     // Extracted devicelist because we want to perform fallback with
     // the most current version.
     const previousDeviceList = deviceList;
-    const updatedDeviceList = await refreshDeviceList();
+    const updatedDeviceList = await refreshDeviceList(false);
     const changedDevice = changedDeviceData.device;
 
     const {logTag, currentDevice, setCurrentDevice} = {
@@ -570,7 +571,7 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
       },
     }[changedDevice.kind];
 
-    logger.debug(
+    logger.log(
       LogSource.Internals,
       'DEVICE_CONFIGURE',
       `${logTag}`,
@@ -699,7 +700,7 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
       },
     }[kind];
 
-    logger.debug(
+    logger.log(
       LogSource.Internals,
       'DEVICE_CONFIGURE',
       `${logtag} ${kind} setting to ${deviceId}`,
@@ -718,7 +719,7 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
     return new Promise<void>((res, rej) => {
       if (mutexRef.current) {
         const e = new Error(logtag + ' Change already in progress');
-        logger.debug(
+        logger.error(
           LogSource.Internals,
           'DEVICE_CONFIGURE',
           `${logtag} Error setting ${kind}`,
@@ -739,7 +740,12 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
         },
         (e: any) => {
           mutexRef.current = false;
-          console.error('DeviceConfigure:', logtag, 'Error setting', kind, e);
+          logger.error(
+            LogSource.Internals,
+            'DEVICE_CONFIGURE',
+            `${logtag} Error setting ${kind}`,
+            {error: e},
+          );
           rej(e);
           handleQueue();
         },

package/template/src/components/GraphQLProvider.tsx

@@ -54,7 +54,6 @@ const authLink = (token: string) => {
           ...headers,
           'X-Project-ID': $config.PROJECT_ID,
           'X-Platform-ID': 'turnkey_web',
-          'X-REQUEST-ID': getUniqueID(),
           ...(token && {
             authorization: token ? `Bearer ${token}` : '',
           }),

package/template/src/components/contexts/WaitingRoomContext.tsx

@@ -30,10 +30,17 @@ const WaitingRoomProvider = ({children}) => {
           v?.type === 'rtc' && !v.offline && v?.isInWaitingRoom === true,
       ),
     ).map(Number);
-    logger.debug(LogSource.Internals, 'WAITING_ROOM', 'users in waiting room', {
-      uids,
-      defaultContent,
-    });
+    if ($config.ENABLE_WAITING_ROOM) {
+      logger.debug(
+        LogSource.Internals,
+        'WAITING_ROOM',
+        'users in waiting room',
+        {
+          uids,
+          defaultContent,
+        },
+      );
+    }
 
     setwaitingRoomUids(uids);
   }, [defaultContent]);

package/template/src/components/recording-bot/RecordingBotRoute.tsx

@@ -26,7 +26,7 @@ const RecordingBotRoute: React.FC<RecordingBotRouteProps> = props => {
   const [ready, setReady] = useState(false);
   const {recordingBotToken} = useIsRecordingBot();
   useEffect(() => {
-    logger.debug(
+    logger.log(
       LogSource.Internals,
       'RECORDING',
       'Inside the bot route wrapper',

package/template/src/components/useUserPreference.tsx

@@ -32,6 +32,7 @@ import {
 import {useLanguage} from '../language/useLanguage';
 import {useScreenContext} from '../components/contexts/ScreenShareContext';
 import {LogSource, logger} from '../logger/AppBuilderLogger';
+import getUniqueID from '../utils/getUniqueID';
 
 interface UserPreferenceContextInterface {
   displayName: string;
@@ -99,25 +100,71 @@ const UserPreferenceProvider = (props: {children: React.ReactNode}) => {
 
   const saveName = (name: string) => {
     if (name && name?.trim() !== '') {
+      const requestId = getUniqueID();
+      const startReqTs = Date.now();
       try {
+        logger.log(
+          LogSource.Internals,
+          'NAME',
+          'Trying to save the display name',
+          {
+            requestId,
+            startReqTs,
+          },
+        );
         updateUserName({
+          context: {
+            headers: {
+              'X-Request-Id': requestId,
+            },
+          },
           variables: {
             name,
           },
-        }).catch(error => {
-          logger.error(
-            LogSource.Internals,
-            'NAME',
-            'ERROR, could not save the name',
-            error,
-          );
-        });
+        })
+          .then(res => {
+            const endReqTs = Date.now();
+            logger.log(
+              LogSource.Internals,
+              'NAME',
+              'name updated successfully',
+              {
+                responseData: res,
+                startReqTs,
+                endReqTs,
+                latency: endReqTs - startReqTs,
+                requestId,
+              },
+            );
+          })
+          .catch(error => {
+            const endReqTs = Date.now();
+            logger.error(
+              LogSource.Internals,
+              'NAME',
+              'ERROR, could not save the name',
+              {
+                error,
+                startReqTs,
+                endReqTs,
+                latency: endReqTs - startReqTs,
+                requestId,
+              },
+            );
+          });
       } catch (error) {
+        const endReqTs = Date.now();
         logger.error(
           LogSource.Internals,
           'NAME',
           'ERROR, could not save the name',
-          error,
+          {
+            error,
+            startReqTs,
+            endReqTs,
+            latency: endReqTs - startReqTs,
+            requestId,
+          },
         );
       }
     }

package/template/src/components/whiteboard/WhiteboardConfigure.tsx

@@ -420,7 +420,10 @@ const WhiteboardConfigure: React.FC<WhiteboardPropsInterface> = props => {
     } else if (whiteboardActive) {
       join();
     } else {
-      if (whiteboardRoom.current) {
+      if (
+        whiteboardRoom.current &&
+        Object.keys(whiteboardRoom.current)?.length
+      ) {
         leave();
       }
     }