[Don't merge in Testing] Release/4.0.28-1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "4.0.28",
+  "version": "4.0.28-2",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [
@@ -9,7 +9,7 @@
   ],
   "scripts": {
     "vercel-build": "npm run dev-setup && cd template && npm run web:build && cd .. && npm run copy-vercel",
-    "uikit": "rm -rf template/agora-rn-uikit && git clone https://github.com/AgoraIO-Community/ReactNative-UIKit.git template/agora-rn-uikit && cd template/agora-rn-uikit && git checkout appbuilder-uikit-3.0.28",
+    "uikit": "rm -rf template/agora-rn-uikit && git clone https://github.com/AgoraIO-Community/ReactNative-UIKit.git template/agora-rn-uikit && cd template/agora-rn-uikit && git checkout appbuilder-uikit-3.0.28-fixes",
     "deps": "cd template && npm i --force",
     "dev-setup": "npm run uikit && npm run deps && node devSetup.js",
     "web-build": "cd template && npm run web:build && cd .. && npm run copy-vercel",

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';

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,
@@ -515,6 +521,7 @@ const AuthProvider = (props: AuthProviderProps) => {
         credentials: 'include',
         headers: {
           'X-Request-Id': requestId,
+          'X-Session-Id': logger.getSessionId(),
         },
       })
         .then(response => response.json())

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())

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())

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())

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(),
                 },
               },
         )

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,

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]);

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,

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 => {

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',

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 ||

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({

template/src/pages/VideoCall.tsx

@@ -249,6 +249,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 +302,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 = '';

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 || '',

template/src/subComponents/recording/useRecording.tsx

@@ -273,6 +273,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,
@@ -355,7 +356,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);
@@ -404,6 +417,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,
@@ -547,6 +561,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,