agora-appbuilder-core 4.0.29-beta-22 → 4.0.29-beta-24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "4.0.29-beta-22",
+  "version": "4.0.29-beta-24",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [

package/template/agora-rn-uikit/src/Rtc/Create.tsx

@@ -194,9 +194,9 @@ const Create = ({
       mode === ChannelProfileType.ChannelProfileLiveBroadcasting &&
       rtcProps?.role === ClientRoleType.ClientRoleAudience
     ) {
-      enableVideoAndAudioWithDisabledState();
+      await enableVideoAndAudioWithDisabledState();
     } else {
-      enableVideoAndAudioWithEnabledState();
+      await enableVideoAndAudioWithEnabledState();
     }
   };
 

package/template/agora-rn-uikit/src/Rtc/Join.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useContext, useRef} from 'react';
+import React, {useEffect, useContext, useRef, useState} from 'react';
 import {IRtcEngine} from 'react-native-agora';
 import {ContentStateInterface} from '../Contexts/RtcContext';
 import {DispatchType} from '../Contexts/DispatchContext';
@@ -14,7 +14,7 @@ const Join: React.FC<{
   tracksReady: boolean;
   preventJoin?: boolean;
 }> = ({children, precall, engineRef, uidState, dispatch, tracksReady}) => {
-  let joinState = useRef(false);
+  const [joinState, setJoinState] = useState(false);
   const {rtcProps} = useContext(PropsContext);
 
   const audioRoom = rtcProps?.audioRoom || false;
@@ -24,12 +24,12 @@ const Join: React.FC<{
   //   : null;
 
   useEffect(() => {
-    if (joinState.current && tracksReady && Platform.OS === 'web') {
+    if (joinState && tracksReady && Platform.OS === 'web') {
       //@ts-ignore
       engineRef.current.publish();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [tracksReady]);
+  }, [tracksReady, joinState]);
 
   useEffect(() => {
     if (rtcProps?.preventJoin) {
@@ -41,7 +41,7 @@ const Join: React.FC<{
       try {
         console.log('Leaving channel');
         engine.leaveChannel();
-        joinState.current = false;
+        setJoinState(false);
       } catch (err) {
         console.error('Cannot leave the channel:', err);
       }
@@ -118,9 +118,9 @@ const Join: React.FC<{
     }
     async function init() {
       if (!precall) {
-        if (!joinState.current) {
+        if (!joinState) {
           await join();
-          joinState.current = true;
+          setJoinState(true);
         } else {
           await leave();
           await join();

package/template/customization-api/utils.ts

@@ -43,7 +43,6 @@ export {useString} from '../src/utils/useString';
 export type {LanguageType} from '../src/subComponents/caption/utils';
 export {default as useSpeechToText} from '../src/utils/useSpeechToText';
 export {isMobileUA} from '../src/utils/common';
-export {getSessionId} from '../src/utils/common';
 export {default as ThemeConfig} from '../src/theme';
 export {default as hexadecimalTransparency} from '../src/utils/hexadecimalTransparency';
 export {useFullScreen} from '../src/utils/useFullScreen';

package/template/defaultConfig.js

@@ -76,8 +76,8 @@ const DefaultConfig = {
   CHAT_ORG_NAME: '',
   CHAT_APP_NAME: '',
   CHAT_URL: '',
-  CLI_VERSION: '3.0.28',
-  CORE_VERSION: '4.0.28',
+  CLI_VERSION: '3.0.29-beta-24',
+  CORE_VERSION: '4.0.29-beta-24',
   DISABLE_LANDSCAPE_MODE: false,
   STT_AUTO_START: false,
   CLOUD_RECORDING_AUTO_START: false,

package/template/src/auth/AuthProvider.tsx

@@ -309,6 +309,7 @@ const AuthProvider = (props: AuthProviderProps) => {
         context: {
           headers: {
             'X-Request-Id': requestId,
+            'X-Session-Id': logger.getSessionId(),
           },
         },
       });
@@ -332,6 +333,11 @@ const AuthProvider = (props: AuthProviderProps) => {
         'user_details',
         'API user details query failed. User is un-authenticated. Will Login in the user',
         {
+          networkError: {
+            name: error?.networkError?.name,
+            code: error?.networkError?.result?.error?.code,
+            message: error?.networkError?.result?.error?.message,
+          },
           error,
           startReqTs,
           endRequestTs,
@@ -522,6 +528,7 @@ const AuthProvider = (props: AuthProviderProps) => {
         credentials: 'include',
         headers: {
           'X-Request-Id': requestId,
+          'X-Session-Id': logger.getSessionId(),
         },
       })
         .then(response => response.json())

package/template/src/auth/useIDPAuth.electron.tsx

@@ -36,6 +36,7 @@ export const useIDPAuth = () => {
           headers: {
             authorization: store?.token ? `Bearer ${store?.token}` : '',
             'X-Request-Id': requestId,
+            'X-Session-Id': logger.getSessionId(),
           },
         })
           .then(response => response.json())

package/template/src/auth/useIDPAuth.native.tsx

@@ -33,6 +33,7 @@ export const useIDPAuth = () => {
           headers: {
             authorization: store?.token ? `Bearer ${store?.token}` : '',
             'X-Request-Id': requestId,
+            'X-Session-Id': logger.getSessionId(),
           },
         })
           .then(response => response.json())

package/template/src/auth/useIDPAuth.tsx

@@ -31,6 +31,7 @@ export const useIDPAuth = () => {
           headers: {
             authorization: store?.token ? `Bearer ${store?.token}` : '',
             'X-Request-Id': requestId,
+            'X-Session-Id': logger.getSessionId(),
           },
         })
           .then(response => response.json())

package/template/src/auth/useTokenAuth.tsx

@@ -57,6 +57,7 @@ const useTokenAuth = () => {
           authorization: store?.token ? `Bearer ${store.token}` : '',
           'X-Platform-ID': getPlatformId(),
           'X-Request-Id': requestId,
+          'X-Session-Id': logger.getSessionId(),
         },
       })
         .then(response => response.json())
@@ -213,6 +214,7 @@ const useTokenAuth = () => {
                     ? `Bearer ${tokenRef.current}`
                     : '',
                   'X-Request-Id': requestId,
+                  'X-Session-Id': logger.getSessionId(),
                 },
               },
         )

package/template/src/components/ChatContext.ts

@@ -16,7 +16,6 @@ import {createContext, SetStateAction} from 'react';
 import {ChatMessageType, Reaction} from './chat-messages/useChatMessages';
 import {createHook} from 'customization-implementation';
 
-
 export interface ChatBubbleProps {
   isLocal: boolean;
   message: string;
@@ -67,6 +66,7 @@ export enum messageActionType {
 }
 
 export interface RtmContextInterface {
+  isInitialQueueCompleted: boolean;
   hasUserJoinedRTM: boolean;
   rtmInitTimstamp: number;
   engine: RtmEngine;

package/template/src/components/EventsConfigure.tsx

@@ -58,9 +58,17 @@ import {logger, LogSource} from '../logger/AppBuilderLogger';
 interface Props {
   children: React.ReactNode;
   callActive: boolean;
+  sttAutoStarted: boolean;
+  setSttAutoStarted: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-const EventsConfigure: React.FC<Props> = ({callActive, children}) => {
+const EventsConfigure: React.FC<Props> = ({
+  callActive,
+  children,
+  setSttAutoStarted,
+  sttAutoStarted,
+}) => {
+  const isSTTAlreadyActiveRef = useRef(undefined);
   // mute user audio
   const hostMutedUserAudioToastHeadingTT = useString<I18nMuteType>(
     hostMutedUserToastHeading,
@@ -257,10 +265,8 @@ const EventsConfigure: React.FC<Props> = ({callActive, children}) => {
     permissionStatusRef.current = permissionStatus;
   }, [permissionStatus]);
 
-  const {hasUserJoinedRTM} = useContext(ChatContext);
+  const {hasUserJoinedRTM, isInitialQueueCompleted} = useContext(ChatContext);
   const {startSpeechToText} = useSpeechToText();
-  const [autoStartCompleted, setAutoStartCompleted] = useState(false);
-
   //auto start stt
   useEffect(() => {
     if (
@@ -268,16 +274,17 @@ const EventsConfigure: React.FC<Props> = ({callActive, children}) => {
       $config.STT_AUTO_START &&
       callActive &&
       hasUserJoinedRTM &&
-      !autoStartCompleted
+      isInitialQueueCompleted &&
+      !sttAutoStarted
     ) {
       //host will start the caption
-      if (isHost && roomId?.host) {
+      if (isHost && roomId?.host && !isSTTAlreadyActiveRef.current) {
         logger.log(LogSource.Internals, 'STT', 'STT_AUTO_START triggered');
         //start with default language
         startSpeechToText(['en-US'])
           .then(() => {
             logger.log(LogSource.Internals, 'STT', 'STT_AUTO_START success');
-            setAutoStartCompleted(true);
+            setSttAutoStarted(true);
           })
           .catch(err => {
             logger.log(
@@ -286,11 +293,28 @@ const EventsConfigure: React.FC<Props> = ({callActive, children}) => {
               'STT_AUTO_START failed',
               err,
             );
-            setAutoStartCompleted(false);
+            setSttAutoStarted(false);
           });
       }
+
+      if (isHost && roomId?.host && isSTTAlreadyActiveRef.current) {
+        logger.log(
+          LogSource.Internals,
+          'STT',
+          'STT_AUTO_START triggered already by some other host success',
+        );
+        setSttAutoStarted(true);
+      }
     }
-  }, [callActive, isHost, hasUserJoinedRTM, roomId, autoStartCompleted]);
+  }, [
+    callActive,
+    isHost,
+    hasUserJoinedRTM,
+    roomId,
+    sttAutoStarted,
+    isInitialQueueCompleted,
+    isSTTAlreadyActiveRef.current,
+  ]);
 
   useEffect(() => {
     //user joined event listener
@@ -520,6 +544,11 @@ const EventsConfigure: React.FC<Props> = ({callActive, children}) => {
 
     events.on(EventNames.STT_ACTIVE, data => {
       const payload = JSON.parse(data?.payload);
+      if (payload.active) {
+        isSTTAlreadyActiveRef.current = true;
+      } else {
+        isSTTAlreadyActiveRef.current = false;
+      }
       setRoomInfo(prev => {
         return {
           ...prev,

package/template/src/components/RTMConfigure.tsx

@@ -93,6 +93,7 @@ const RtmConfigure = (props: any) => {
   }, [defaultContent]);
 
   const [hasUserJoinedRTM, setHasUserJoinedRTM] = useState<boolean>(false);
+  const [isInitialQueueCompleted, setIsInitialQueueCompleted] = useState(false);
   const [onlineUsersCount, setTotalOnlineUsers] = useState<number>(0);
 
   let engine = useRef<RtmEngine>(null!);
@@ -181,6 +182,7 @@ const RtmConfigure = (props: any) => {
       });
       setHasUserJoinedRTM(true);
       await runQueuedEvents();
+      setIsInitialQueueCompleted(true);
       logger.log(
         LogSource.AgoraSDK,
         'Log',
@@ -811,6 +813,7 @@ const RtmConfigure = (props: any) => {
   return (
     <ChatContext.Provider
       value={{
+        isInitialQueueCompleted,
         rtmInitTimstamp,
         hasUserJoinedRTM,
         engine: engine.current,

package/template/src/components/common/Error.tsx

@@ -16,6 +16,15 @@ import Error from '../../subComponents/Error';
 type ErrorType = {
   name: string;
   message: string;
+  networkError?: {
+    name?: string;
+    result?: {
+      error?: {
+        code?: number;
+        message?: string;
+      };
+    };
+  };
 };
 type ErrorContextType = {
   error: ErrorType | undefined;
@@ -46,12 +55,17 @@ const ErrorProvider = (props: {children: React.ReactNode}) => {
 const CommonError: React.FC = () => {
   const {error} = useContext(ErrorContext);
   useEffect(() => {
-    if (error?.name || error?.message) {
+    if (
+      error?.networkError?.name ||
+      error?.networkError?.result?.error?.message ||
+      error?.name ||
+      error?.message
+    ) {
       Toast.show({
         leadingIconName: 'alert',
         type: 'error',
-        text1: error.name,
-        text2: error.message,
+        text1: error?.networkError?.name || error.name,
+        text2: error?.networkError?.result?.error?.message || error.message,
         visibilityTime: 1000 * 10,
         primaryBtn: null,
         secondaryBtn: null,

package/template/src/components/popups/InvitePopup.tsx

@@ -37,6 +37,7 @@ import {
   invitePopupHeading,
 } from '../../language/default-labels/videoCallScreenLabels';
 import {cancelText} from '../../language/default-labels/commonLabels';
+import {logger, LogSource} from '../../logger/AppBuilderLogger';
 
 const InvitePopup = () => {
   const {setShowInvitePopup, showInvitePopup} = useVideoCall();
@@ -47,6 +48,21 @@ const InvitePopup = () => {
   const getMeeting = useGetMeetingPhrase();
   useEffect(() => {
     getMeeting(phrase).catch(error => {
+      logger.error(
+        LogSource.Internals,
+        'GET_MEETING_PHRASE',
+        'unable to fetch meeting details',
+        error,
+        {
+          networkError: {
+            name: error?.networkError?.name,
+            //@ts-ignore
+            code: error?.networkError?.result?.error?.code,
+            //@ts-ignore
+            message: error?.networkError?.result?.error?.message,
+          },
+        },
+      );
       setGlobalErrorMessage(error);
     });
   }, [phrase]);

package/template/src/components/useUserPreference.tsx

@@ -116,6 +116,7 @@ const UserPreferenceProvider = (props: {children: React.ReactNode}) => {
           context: {
             headers: {
               'X-Request-Id': requestId,
+              'X-Session-Id': logger.getSessionId(),
             },
           },
           variables: {
@@ -145,6 +146,13 @@ const UserPreferenceProvider = (props: {children: React.ReactNode}) => {
               'ERROR, could not save the name',
               error,
               {
+                networkError: {
+                  name: error?.networkError?.name,
+                  //@ts-ignore
+                  code: error?.networkError?.result?.error?.code,
+                  //@ts-ignore
+                  message: error?.networkError?.result?.error?.message,
+                },
                 startReqTs,
                 endReqTs,
                 latency: endReqTs - startReqTs,
@@ -160,6 +168,13 @@ const UserPreferenceProvider = (props: {children: React.ReactNode}) => {
           'ERROR, could not save the name',
           error,
           {
+            networkError: {
+              name: error?.networkError?.name,
+              //@ts-ignore
+              code: error?.networkError?.result?.error?.code,
+              //@ts-ignore
+              message: error?.networkError?.result?.error?.message,
+            },
             startReqTs,
             endReqTs,
             latency: endReqTs - startReqTs,

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

@@ -359,6 +359,7 @@ const WhiteboardToolBox = ({whiteboardRoom}) => {
           myHeaders2.append('Content-Type', 'application/json');
           myHeaders2.append('Authorization', `Bearer ${store?.token}`);
           myHeaders2.append('X-Request-Id', requestId);
+          myHeaders2.append('X-Session-Id', logger.getSessionId());
 
           const body = JSON.stringify({
             resource_url: url,
@@ -498,6 +499,7 @@ const WhiteboardToolBox = ({whiteboardRoom}) => {
           myHeaders2.append('Content-Type', 'application/json');
           myHeaders2.append('Authorization', `Bearer ${store?.token}`);
           myHeaders2.append('X-Request-Id', requestId);
+          myHeaders2.append('X-Session-Id', logger.getSessionId());
           const body = JSON.stringify({
             resource_url: url,
           });
@@ -624,6 +626,7 @@ const WhiteboardToolBox = ({whiteboardRoom}) => {
           headers: {
             authorization: store?.token ? `Bearer ${store?.token}` : '',
             'X-Request-Id': requestId,
+            'X-Session-Id': logger.getSessionId(),
           },
         })
           .then(async res => {

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

@@ -148,6 +148,7 @@ const WhiteboardWidget = ({whiteboardRoom}) => {
       myHeaders2.append('Content-Type', 'application/json');
       myHeaders2.append('Authorization', `Bearer ${store?.token}`);
       myHeaders2.append('X-Request-Id', requestId);
+      myHeaders2.append('X-Session-Id', logger.getSessionId());
       const body = JSON.stringify({
         room_uuid: room_uuid,
         path: '/init',

package/template/src/pages/Create.tsx

@@ -212,6 +212,15 @@ const Create = () => {
           'CREATE_MEETING',
           'There was error while creating meeting',
           error,
+          {
+            networkError: {
+              name: error?.networkError?.name,
+              //@ts-ignore
+              code: error?.networkError?.result?.error?.code,
+              //@ts-ignore
+              message: error?.networkError?.result?.error?.message,
+            },
+          },
         );
         if (
           createRoomErrorToastHeadingText ||

package/template/src/pages/Join.tsx

@@ -130,6 +130,21 @@ const Join = () => {
         history.push(phrase);
       })
       .catch(error => {
+        logger.error(
+          LogSource.Internals,
+          'JOIN_MEETING',
+          'Error on join room page',
+          error,
+          {
+            networkError: {
+              name: error?.networkError?.name,
+              //@ts-ignore
+              code: error?.networkError?.result?.error?.code,
+              //@ts-ignore
+              message: error?.networkError?.result?.error?.message,
+            },
+          },
+        );
         const isInvalidUrl =
           error?.message.toLowerCase().trim() === 'invalid passphrase' || false;
         Toast.show({

package/template/src/pages/VideoCall.tsx

@@ -150,6 +150,7 @@ const VideoCall: React.FC = () => {
   const [queryComplete, setQueryComplete] = useState(false);
   const [waitingRoomAttendeeJoined, setWaitingRoomAttendeeJoined] =
     useState(false);
+  const [sttAutoStarted, setSttAutoStarted] = useState(false);
 
   const {phrase} = useParams<{phrase: string}>();
 
@@ -249,6 +250,21 @@ const VideoCall: React.FC = () => {
       useJoin(phrase, RoomInfoDefaultValue.roomPreference)
         .then(() => {})
         .catch(error => {
+          logger.error(
+            LogSource.Internals,
+            'JOIN_MEETING',
+            'Join channel error',
+            error,
+            {
+              networkError: {
+                name: error?.networkError?.name,
+                //@ts-ignore
+                code: error?.networkError?.result?.error?.code,
+                //@ts-ignore
+                message: error?.networkError?.result?.error?.message,
+              },
+            },
+          );
           setGlobalErrorMessage(error);
           history.push('/');
         });
@@ -287,6 +303,21 @@ const VideoCall: React.FC = () => {
       setQueryComplete(false);
       currentMeetingPhrase.current = sdkMeetingPath;
       useJoin(sdkMeetingPhrase, preference).catch(error => {
+        logger.error(
+          LogSource.Internals,
+          'JOIN_MEETING',
+          'Join channel error',
+          error,
+          {
+            networkError: {
+              name: error?.networkError?.name,
+              //@ts-ignore
+              code: error?.networkError?.result?.error?.code,
+              //@ts-ignore
+              message: error?.networkError?.result?.error?.message,
+            },
+          },
+        );
         setGlobalErrorMessage(error);
         history.push('/');
         currentMeetingPhrase.current = '';
@@ -435,6 +466,10 @@ const VideoCall: React.FC = () => {
                                         <CaptionProvider>
                                           <WaitingRoomProvider>
                                             <EventsConfigure
+                                              setSttAutoStarted={
+                                                setSttAutoStarted
+                                              }
+                                              sttAutoStarted={sttAutoStarted}
                                               callActive={callActive}>
                                               <ScreenshareConfigure
                                                 isRecordingActive={

package/template/src/subComponents/caption/useSTTAPI.tsx

@@ -65,6 +65,7 @@ const useSTTAPI = (): IuseSTTAPI => {
           'Content-Type': 'application/json',
           authorization: store.token ? `Bearer ${store.token}` : '',
           'X-Request-Id': requestId,
+          'X-Session-Id': logger.getSessionId(),
         },
         body: JSON.stringify({
           passphrase: roomId?.host || '',

package/template/src/subComponents/recording/useRecording.tsx

@@ -274,6 +274,7 @@ const RecordingProvider = (props: RecordingProviderProps) => {
         'Content-Type': 'application/json',
         authorization: store.token ? `Bearer ${store.token}` : '',
         'X-Request-Id': requestId,
+        'X-Session-Id': logger.getSessionId(),
       },
       body: JSON.stringify({
         passphrase: roomId.host,
@@ -356,7 +357,19 @@ const RecordingProvider = (props: RecordingProviderProps) => {
           'recording_start',
           'Error while start recording',
           err,
-          {startReqTs, endRequestTs, latency, requestId},
+          {
+            networkError: {
+              name: err?.networkError?.name,
+              //@ts-ignore
+              code: err?.networkError?.result?.error?.code,
+              //@ts-ignore
+              message: err?.networkError?.result?.error?.message,
+            },
+            startReqTs,
+            endRequestTs,
+            latency,
+            requestId,
+          },
         );
         setRecordingActive(false);
         setInProgress(false);
@@ -405,6 +418,7 @@ const RecordingProvider = (props: RecordingProviderProps) => {
           'Content-Type': 'application/json',
           authorization: store.token ? `Bearer ${store.token}` : '',
           'X-Request-Id': requestId,
+          'X-Session-Id': logger.getSessionId(),
         },
         body: JSON.stringify({
           passphrase: roomId.host,
@@ -548,6 +562,7 @@ const RecordingProvider = (props: RecordingProviderProps) => {
           'Content-Type': 'application/json',
           authorization: store.token ? `Bearer ${store.token}` : '',
           'X-Request-Id': requestId,
+          'X-Session-Id': logger.getSessionId(),
         },
         body: JSON.stringify({
           passphrase: roomId?.host,
@@ -826,32 +841,33 @@ const RecordingProvider = (props: RecordingProviderProps) => {
     _stopRecording,
   ]);
 
+  //commented auto start for cloud recording
   // auto start recording
-  useEffect(() => {
-    if (
-      $config.CLOUD_RECORDING &&
-      $config.CLOUD_RECORDING_AUTO_START &&
-      callActive &&
-      !isRecordingActive &&
-      isHost &&
-      hasUserJoinedRTM &&
-      !autoStartCompleted
-    ) {
-      logger.log(
-        LogSource.Internals,
-        'RECORDING',
-        'CLOUD_RECORDING_AUTO_START triggered',
-      );
-      startRecording();
-      setAutoStartCompleted(true);
-    }
-  }, [
-    isRecordingActive,
-    isHost,
-    callActive,
-    hasUserJoinedRTM,
-    autoStartCompleted,
-  ]);
+  // useEffect(() => {
+  //   if (
+  //     $config.CLOUD_RECORDING &&
+  //     $config.CLOUD_RECORDING_AUTO_START &&
+  //     callActive &&
+  //     !isRecordingActive &&
+  //     isHost &&
+  //     hasUserJoinedRTM &&
+  //     !autoStartCompleted
+  //   ) {
+  //     logger.log(
+  //       LogSource.Internals,
+  //       'RECORDING',
+  //       'CLOUD_RECORDING_AUTO_START triggered',
+  //     );
+  //     startRecording();
+  //     setAutoStartCompleted(true);
+  //   }
+  // }, [
+  //   isRecordingActive,
+  //   isHost,
+  //   callActive,
+  //   hasUserJoinedRTM,
+  //   autoStartCompleted,
+  // ]);
 
   // useEffect(() => { //
   //   if (hasUserJoinedRTM && isRecordingBot) {

package/template/src/subComponents/recording/useRecordingLayoutQuery.tsx

@@ -3,6 +3,8 @@ import {useParams} from '../../components/Router';
 
 import {gql, useMutation} from '@apollo/client';
 import {UidType} from '../../../agora-rn-uikit';
+import {logger, LogSource} from '../../logger/AppBuilderLogger';
+import getUniqueID from '../../utils/getUniqueID';
 
 const SET_PRESENTER = gql`
   mutation setPresenter($uid: Int!, $passphrase: String!) {
@@ -29,25 +31,88 @@ function useRecordingLayoutQuery() {
    * https://docs.agora.io/en/cloud-recording/cloud_recording_layout?platform=RESTful
    */
   const executePresenterQuery = (screenShareUid: UidType) => {
+    const requestId = getUniqueID();
+    const startReqTs = Date.now();
     setPresenterQuery({
       variables: {
         uid: screenShareUid,
         passphrase: phrase,
       },
+      context: {
+        headers: {
+          'X-Request-Id': requestId,
+          'X-Session-Id': logger.getSessionId(),
+        },
+      },
     })
-      .then((res) => {
-        if (res.data.setPresenter === 'success') {
+      .then(res => {
+        if (res?.data?.setPresenter === 'success') {
+          const endReqTs = Date.now();
+          logger.log(
+            LogSource.Internals,
+            'RECORDING',
+            'setPresenterQuery success',
+            {
+              responseData: res,
+              startReqTs,
+              endReqTs,
+              latency: endReqTs - startReqTs,
+              requestId,
+            },
+          );
         }
       })
-      .catch((err) => {
-        console.log(err);
+      .catch(error => {
+        const endReqTs = Date.now();
+        logger.error(
+          LogSource.Internals,
+          'RECORDING',
+          'setPresenterQuery failure',
+          error,
+          {
+            networkError: {
+              name: error?.networkError?.name,
+              //@ts-ignore
+              code: error?.networkError?.result?.error?.code,
+              //@ts-ignore
+              message: error?.networkError?.result?.error?.message,
+            },
+            startReqTs,
+            endReqTs,
+            latency: endReqTs - startReqTs,
+            requestId,
+          },
+        );
       });
   };
 
   const executeNormalQuery = () => {
-    setNormalQuery({variables: {passphrase: phrase}})
-      .then((res) => {
-        if (res.data.stopRecordingSession === 'success') {
+    const requestId = getUniqueID();
+    const startReqTs = Date.now();
+    setNormalQuery({
+      variables: {passphrase: phrase},
+      context: {
+        headers: {
+          'X-Request-Id': requestId,
+          'X-Session-Id': logger.getSessionId(),
+        },
+      },
+    })
+      .then(res => {
+        if (res?.data?.stopRecordingSession === 'success') {
+          const endReqTs = Date.now();
+          logger.log(
+            LogSource.Internals,
+            'RECORDING',
+            'executeNormalQuery success',
+            {
+              responseData: res,
+              startReqTs,
+              endReqTs,
+              latency: endReqTs - startReqTs,
+              requestId,
+            },
+          );
           // Once the backend sucessfuly stops recording,
           // send a control message to everbody in the channel indicating that cloud recording is now inactive.
           // sendControlMessage(controlMessageEnum.cloudRecordingUnactive);
@@ -55,8 +120,27 @@ function useRecordingLayoutQuery() {
           // setScreenshareActive(false);
         }
       })
-      .catch((err) => {
-        console.log(err);
+      .catch(error => {
+        const endReqTs = Date.now();
+        logger.error(
+          LogSource.Internals,
+          'RECORDING',
+          'executeNormalQuery failure',
+          error,
+          {
+            networkError: {
+              name: error?.networkError?.name,
+              //@ts-ignore
+              code: error?.networkError?.result?.error?.code,
+              //@ts-ignore
+              message: error?.networkError?.result?.error?.message,
+            },
+            startReqTs,
+            endReqTs,
+            latency: endReqTs - startReqTs,
+            requestId,
+          },
+        );
       });
   };
 

package/template/src/subComponents/waiting-rooms/useWaitingRoomAPI.ts

@@ -43,6 +43,7 @@ const useWaitingRoomAPI = (): IuseWaitingRoomAPI => {
         'Content-Type': 'application/json',
         authorization: store.token ? `Bearer ${store.token}` : '',
         'X-Request-Id': requestId,
+        'X-Session-Id': logger.getSessionId(),
       },
       body: payload,
     });

package/template/src/utils/common.tsx

@@ -17,11 +17,6 @@ import {
 import Platform from '../subComponents/Platform';
 import * as ReactIs from 'react-is';
 
-const getSessionId = () => {
-  const {logger} = require('../logger/AppBuilderLogger');
-  return logger.getSessionId();
-};
-
 const trimText = (text: string, length: number = 25) => {
   if (!text) {
     return '';
@@ -386,7 +381,6 @@ function MergeMoreButtonFields(sourceArray, updateObject) {
 }
 
 export {
-  getSessionId,
   updateToolbarDefaultConfig,
   useIsDesktop,
   useIsSmall,

package/template/src/utils/useCreateRoom.ts

@@ -56,6 +56,7 @@ export default function useCreateRoom(): createRoomFun {
       context: {
         headers: {
           'X-Request-Id': requestId,
+          'X-Session-Id': logger.getSessionId(),
         },
       },
       variables: {
@@ -75,7 +76,19 @@ export default function useCreateRoom(): createRoomFun {
         'createChannel',
         'API createChannel failed. There was an error',
         error,
-        {startReqTs, endReqTs, latency: latency, requestId},
+        {
+          networkError: {
+            name: error?.networkError?.name,
+            //@ts-ignore
+            code: error?.networkError?.result?.error?.code,
+            //@ts-ignore
+            message: error?.networkError?.result?.error?.message,
+          },
+          startReqTs,
+          endReqTs,
+          latency: latency,
+          requestId,
+        },
       );
       throw error;
     }

package/template/src/utils/useGetMeetingPhrase.ts

@@ -42,6 +42,7 @@ export default function useGetMeetingPhrase() {
       context: {
         headers: {
           'X-Request-Id': requestId,
+          'X-Session-Id': logger.getSessionId(),
         },
       },
       query: SHARE,
@@ -57,6 +58,13 @@ export default function useGetMeetingPhrase() {
         'Query GET_MEETING_PHRASE failed',
         response.error,
         {
+          networkError: {
+            name: response?.error?.networkError?.name,
+            //@ts-ignore
+            code: response?.error?.networkError?.result?.error?.code,
+            //@ts-ignore
+            message: response?.error?.networkError?.result?.error?.message,
+          },
           requestId,
           startReqTs,
           endReqTs,

package/template/src/utils/useJoinRoom.ts

@@ -128,6 +128,7 @@ export default function useJoinRoom() {
           context: {
             headers: {
               'X-Request-Id': requestId,
+              'X-Session-Id': logger.getSessionId(),
             },
           },
           query:
@@ -149,8 +150,16 @@ export default function useJoinRoom() {
           `API ${
             isWaitingRoomEnabled ? 'channel_join_request' : 'joinChannel'
           } failed.`,
+          'Join Channel Failed',
           response?.error,
           {
+            networkError: {
+              name: response?.error?.networkError?.name,
+              //@ts-ignore
+              code: response?.error?.networkError?.result?.error?.code,
+              //@ts-ignore
+              message: response?.error?.networkError?.result?.error?.message,
+            },
             startReqTs,
             endReqTs,
             latency,

package/template/src/utils/useMutePSTN.ts

@@ -34,6 +34,7 @@ const useMutePSTN = () => {
           context: {
             headers: {
               'X-Request-Id': requestId,
+              'X-Session-Id': logger.getSessionId(),
             },
           },
           variables: {
@@ -53,7 +54,19 @@ const useMutePSTN = () => {
           'MUTE_PSTN',
           'Mutation MUTE_PSTN success',
           error,
-          {startReqTs, endReqTs, latency: endReqTs - startReqTs, requestId},
+          {
+            networkError: {
+              name: error?.networkError?.name,
+              //@ts-ignore
+              code: error?.networkError?.result?.error?.code,
+              //@ts-ignore
+              message: error?.networkError?.result?.error?.message,
+            },
+            startReqTs,
+            endReqTs,
+            latency: endReqTs - startReqTs,
+            requestId,
+          },
         );
         throw error;
       } else {