agora-appbuilder-core 4.0.25-beta-1 → 4.0.25-beta-5

package/package.json

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

package/template/customization-api/typeDefinition.ts

@@ -21,6 +21,7 @@ import {I18nInterface} from '../src/language/i18nTypes';
 import {IconsInterface} from '../src/atoms/CustomIcon';
 import {ToolbarCustomItem} from './sub-components';
 import {TextDataInterface} from '../src/language/default-labels';
+import {VBPanelProps} from '../src/components/virtual-background/VBPanel';
 
 export const CUSTOM_ROUTES_PREFIX = '/r/';
 
@@ -59,10 +60,6 @@ export interface LayoutItem {
   component: LayoutComponent;
 }
 
-export interface VBPanelProps {
-  isOnPrecall?: boolean;
-}
-
 export type ToolbarType = React.ComponentType | Array<ToolbarCustomItem>;
 export type CustomLogger = (
   message: string,

package/template/customization-api/utils.ts

@@ -35,3 +35,4 @@ export {default as useLocalAudio} from '../src/utils/useLocalAudio';
 export {default as useLocalVideo} from '../src/utils/useLocalVideo';
 export type {LanguageType} from '../src/subComponents/caption/utils';
 export {default as useSpeechToText} from '../src/utils/useSpeechToText';
+export {getSessionId} from '../src/utils/common';

package/template/defaultConfig.js

@@ -75,6 +75,8 @@ const DefaultConfig = {
   CHAT_ORG_NAME: '',
   CHAT_APP_NAME: '',
   CHAT_URL: '',
+  CLI_VERSION: '',
+  CORE_VERSION: '',
 };
 
 module.exports = DefaultConfig;

package/template/global.d.ts

@@ -118,6 +118,8 @@ interface ConfigInterface {
   CHAT_APP_NAME: string;
   CHAT_URL: string;
   ENABLE_NOISE_CANCELLATION_BY_DEFAULT: boolean;
+  CLI_VERSION: string;
+  CORE_VERSION: string;
 }
 declare var $config: ConfigInterface;
 declare module 'customization' {

package/template/src/AppRoutes.tsx

@@ -9,7 +9,7 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React from 'react';
+import React, {useEffect} from 'react';
 import Join from './pages/Join';
 import VideoCall from './pages/VideoCall';
 import Create from './pages/Create';
@@ -27,12 +27,6 @@ import {isValidReactComponent} from './utils/common';
 
 function VideoCallWrapper(props) {
   const {isRecordingBotRoute} = useIsRecordingBot();
-  logger.debug(
-    LogSource.Internals,
-    'RECORDING',
-    'Check if this is a recording bot route',
-    isRecordingBotRoute,
-  );
   return isRecordingBotRoute ? (
     <RecordingBotRoute history={props.history}>
       <VideoCall />

package/template/src/auth/AuthProvider.tsx

@@ -289,17 +289,55 @@ const AuthProvider = (props: AuthProviderProps) => {
   }, [authenticated, authError]);
 
   async function getUserDetails() {
+    const requestId = getUniqueID();
+    const startReqTs = Date.now();
     try {
-      await apolloClient.query({
+      //fetch user details
+      logger.log(
+        LogSource.NetworkRest,
+        'user_details',
+        'API fetching user_details, to check if user is authenticated',
+        {
+          requestId,
+          startReqTs,
+        },
+      );
+      const res = await apolloClient.query({
         query: GET_USER,
         fetchPolicy: 'network-only',
         context: {
           headers: {
-            'X-Request-Id': getUniqueID(),
+            'X-Request-Id': requestId,
           },
         },
       });
+      const endRequestTs = Date.now();
+      logger.log(
+        LogSource.NetworkRest,
+        'user_details',
+        'API user_details query succesful. User is authenticated',
+        {
+          responseData: res,
+          startReqTs,
+          endRequestTs,
+          latency: endRequestTs - startReqTs,
+          requestId,
+        },
+      );
     } catch (error) {
+      const endRequestTs = Date.now();
+      logger.log(
+        LogSource.NetworkRest,
+        'user_details',
+        'API user details query failed. User is un-authenticated. Will Login in the user',
+        {
+          error,
+          startReqTs,
+          endRequestTs,
+          latency: endRequestTs - startReqTs,
+          requestId,
+        },
+      );
       throw new Error(error);
     } finally {
       setLoading(false);
@@ -328,23 +366,12 @@ const AuthProvider = (props: AuthProviderProps) => {
       //login link expiry fix
       location?.search?.indexOf('msg') === -1
     ) {
-      //fetch user details
-      logger.log(
-        LogSource.NetworkRest,
-        'user_details',
-        'API fetching user_details, to check if user is authenticated',
-      );
       getUserDetails()
         .then(_ => {
           //Each time user refresh the page we have to redirect the user to IDP login.then only we can able to refresh the token
           //because we can't read the cookie so we don't know expirytime.
           //so each time page refresh will get new token
           //then only
-          logger.log(
-            LogSource.NetworkRest,
-            'user_details',
-            'API user_details query succesful. User is authenticated',
-          );
           if (isWeb() && $config.ENABLE_IDP_AUTH) {
             //authLogin();this is for cookie based authentication
             setIsAuthenticated(true);
@@ -352,13 +379,7 @@ const AuthProvider = (props: AuthProviderProps) => {
             setIsAuthenticated(true);
           }
         })
-        .catch(error => {
-          logger.log(
-            LogSource.NetworkRest,
-            'user_details',
-            'API user details query failed. User is un-authenticated. Will Login in the user',
-            error,
-          );
+        .catch(() => {
           setIsAuthenticated(false);
           authLogin();
         });
@@ -470,26 +491,39 @@ const AuthProvider = (props: AuthProviderProps) => {
         'AUTH',
         'Project has No auth(token or idp) enabled',
       );
+      const requestId = getUniqueID();
+      const startReqTs = Date.now();
       logger.log(
         LogSource.NetworkRest,
         'unauth_login',
         'API unauth_login Trying to authenticate user',
+        {requestId: requestId, startReqTs},
       );
+
       fetch(GET_UNAUTH_FLOW_API_ENDPOINT(), {
         credentials: 'include',
         headers: {
-          'X-Request-Id': getUniqueID(),
+          'X-Request-Id': requestId,
         },
       })
         .then(response => response.json())
         .then(response => {
+          const endReqTs = Date.now();
+          const latency = endReqTs - startReqTs;
           // unauthenticated flow all platform we will have to handle the token manually
           // we need to store token manually
           logger.log(
             LogSource.NetworkRest,
             'unauth_login',
             'API unauth_login authentication successful. User is logged in.',
-            response.token,
+            {
+              responseData: response,
+              token: response.token,
+              startReqTs,
+              endReqTs,
+              latency,
+              requestId,
+            },
           );
           if (!response.token) {
             logger.error(
@@ -497,7 +531,11 @@ const AuthProvider = (props: AuthProviderProps) => {
               'unauth_login',
               'API unauth_login failed. There was an error',
               {
-                data: 'Token not received',
+                error: 'Token not received',
+                requestId,
+                startReqTs,
+                endReqTs,
+                latency,
               },
             );
             throw new Error('Token not received');
@@ -522,11 +560,19 @@ const AuthProvider = (props: AuthProviderProps) => {
           }
         })
         .catch(error => {
+          const endReqTs = Date.now();
+          const latency = endReqTs - startReqTs;
           logger.error(
             LogSource.NetworkRest,
             'unauth_login',
             'API unauth_login failed. There was an error',
-            error,
+            {
+              error,
+              requestId,
+              startReqTs,
+              endReqTs,
+              latency,
+            },
           );
           if (error instanceof Error) {
             setAuthError(error.message);

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

@@ -10,6 +10,7 @@ import {useHistory} from '../components/Router';
 import {useString} from '../utils/useString';
 import {authSessionTimeoutToastHeading} from '../language/default-labels/commonLabels';
 import getUniqueID from '../utils/getUniqueID';
+import {LogSource, logger} from '../logger/AppBuilderLogger';
 
 export const useIDPAuth = () => {
   const {store, setStore} = useContext(StorageContext);
@@ -18,17 +19,42 @@ export const useIDPAuth = () => {
   const history = useHistory();
   const idpLogout = () => {
     return new Promise((resolve, reject) => {
+      const requestId = getUniqueID();
+      const startReqTs = Date.now();
       try {
+        logger.log(
+          LogSource.NetworkRest,
+          'idp_logout',
+          'API idp_logout Trying to get logout url',
+          {
+            requestId,
+            startReqTs,
+          },
+        );
         //v1/idp/logout -> will generate and return URL for IDP logout(frontend need to call this)
         fetch(`${$config.BACKEND_ENDPOINT}/v1/idp/logout`, {
           headers: {
             authorization: store?.token ? `Bearer ${store?.token}` : '',
-            'X-Request-Id': getUniqueID(),
+            'X-Request-Id': requestId,
           },
         })
           .then(response => response.json())
           .then((res: any) => {
             if (res && res?.url) {
+              const endReqTs = Date.now();
+              const latency = endReqTs - startReqTs;
+              logger.log(
+                LogSource.NetworkRest,
+                'idp_logout',
+                'API idp_logout Got logout url',
+                {
+                  requestId,
+                  responseData: res,
+                  startReqTs,
+                  endReqTs,
+                  latency,
+                },
+              );
               //Storing the URL in the local variable
               const IDPAuthLogoutURL =
                 res?.url +
@@ -48,18 +74,49 @@ export const useIDPAuth = () => {
                   reject(false);
                 });
             } else {
+              const endReqTs = Date.now();
+              logError(
+                {errorMessage: 'API idp_logout logurl is empty'},
+                requestId,
+                startReqTs,
+                endReqTs,
+              );
               reject(false);
             }
           })
-          .catch(_ => {
+          .catch(error => {
+            const endReqTs = Date.now();
+            logError(error, requestId, startReqTs, endReqTs);
             reject(false);
           });
       } catch (error) {
+        const endReqTs = Date.now();
+        logError(error, requestId, startReqTs, endReqTs);
         reject(false);
       }
     });
   };
 
+  const logError = (
+    error: any,
+    requestId: string,
+    startReqTs: number,
+    endReqTs: number,
+  ) => {
+    const latency = endReqTs - startReqTs;
+    logger.error(
+      LogSource.NetworkRest,
+      'idp_logout',
+      'Error on calling API idp_logout',
+      {
+        error,
+        requestId,
+        startReqTs,
+        endReqTs,
+        latency,
+      },
+    );
+  };
   return {
     enableIDPAuth,
     idpLogout,

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

@@ -9,23 +9,49 @@ import {
 import StorageContext from '../components/StorageContext';
 import useTokenAuth from './useTokenAuth';
 import getUniqueID from '../utils/getUniqueID';
+import {LogSource, logger} from '../logger/AppBuilderLogger';
 
 export const useIDPAuth = () => {
   const {store, setStore} = useContext(StorageContext);
   const {tokenLogout} = useTokenAuth();
   const idpLogout = (setShowNativePopup: (val: boolean) => void) => {
     return new Promise((resolve, reject) => {
+      const requestId = getUniqueID();
+      const startReqTs = Date.now();
       try {
+        logger.log(
+          LogSource.NetworkRest,
+          'idp_logout',
+          'API idp_logout Trying to get logout url',
+          {
+            requestId,
+            startReqTs,
+          },
+        );
         //v1/idp/logout -> will generate and return URL for IDP logout(frontend need to call this)
         fetch(`${$config.BACKEND_ENDPOINT}/v1/idp/logout`, {
           headers: {
             authorization: store?.token ? `Bearer ${store?.token}` : '',
-            'X-Request-Id': getUniqueID(),
+            'X-Request-Id': requestId,
           },
         })
           .then(response => response.json())
           .then((res: any) => {
             if (res && res?.url) {
+              const endReqTs = Date.now();
+              const latency = endReqTs - startReqTs;
+              logger.log(
+                LogSource.NetworkRest,
+                'idp_logout',
+                'API idp_logout Got logout url',
+                {
+                  requestId: requestId,
+                  responseData: res,
+                  startReqTs,
+                  endReqTs,
+                  latency,
+                },
+              );
               //Storing the URL in the local variable
               const IDPAuthLogoutURL =
                 res?.url +
@@ -53,18 +79,49 @@ export const useIDPAuth = () => {
                   reject(false);
                 });
             } else {
+              const endReqTs = Date.now();
+              logError(
+                {errorMessage: 'API idp_logout logurl is empty'},
+                requestId,
+                startReqTs,
+                endReqTs,
+              );
               reject(false);
             }
           })
-          .catch(_ => {
+          .catch(error => {
+            const endReqTs = Date.now();
+            logError(error, requestId, startReqTs, endReqTs);
             reject(false);
           });
       } catch (error) {
+        const endReqTs = Date.now();
+        logError(error, requestId, startReqTs, endReqTs);
         reject(false);
       }
     });
   };
 
+  const logError = (
+    error: any,
+    requestId: string,
+    startReqTs: number,
+    endReqTs: number,
+  ) => {
+    const latency = endReqTs - startReqTs;
+    logger.error(
+      LogSource.NetworkRest,
+      'idp_logout',
+      'Error on calling API idp_logout',
+      {
+        error,
+        requestId,
+        startReqTs,
+        endReqTs,
+        latency,
+      },
+    );
+  };
   return {
     enableIDPAuth,
     idpLogout,

package/template/src/auth/useIDPAuth.tsx

@@ -5,6 +5,7 @@ import useTokenAuth from './useTokenAuth';
 import StorageContext from '../components/StorageContext';
 import {useContext} from 'react';
 import getUniqueID from '../utils/getUniqueID';
+import {LogSource, logger} from '../logger/AppBuilderLogger';
 
 export const useIDPAuth = () => {
   const location = useLocation();
@@ -12,18 +13,43 @@ export const useIDPAuth = () => {
   const {tokenLogout} = useTokenAuth();
   const idpLogout = (dummy: any) => {
     return new Promise((resolve, reject) => {
+      const requestId = getUniqueID();
+      const startReqTs = Date.now();
       try {
+        logger.log(
+          LogSource.NetworkRest,
+          'idp_logout',
+          'API idp_logout Trying to get logout url',
+          {
+            requestId,
+            startReqTs,
+          },
+        );
         //v1/idp/logout -> will generate and return URL for IDP logout(frontend need to call this)
         fetch(`${$config.BACKEND_ENDPOINT}/v1/idp/logout`, {
           credentials: 'include',
           headers: {
             authorization: store?.token ? `Bearer ${store?.token}` : '',
-            'X-Request-Id': getUniqueID(),
+            'X-Request-Id': requestId,
           },
         })
           .then(response => response.json())
           .then((res: any) => {
             if (res && res?.url) {
+              const endReqTs = Date.now();
+              const latency = endReqTs - startReqTs;
+              logger.log(
+                LogSource.NetworkRest,
+                'idp_logout',
+                'API idp_logout Got logout url',
+                {
+                  requestId: requestId,
+                  responseData: res,
+                  startReqTs,
+                  endReqTs,
+                  latency,
+                },
+              );
               //Storing the URL in the local variable
               // const IDPAuthLogoutURL =
               //   res?.url + `&returnTo=${window.location.origin}`;
@@ -46,18 +72,50 @@ export const useIDPAuth = () => {
                   reject(false);
                 });
             } else {
+              const endReqTs = Date.now();
+              logError(
+                {errorMessage: 'API idp_logout logurl is empty'},
+                requestId,
+                startReqTs,
+                endReqTs,
+              );
               reject(false);
             }
           })
-          .catch(_ => {
+          .catch(error => {
+            const endReqTs = Date.now();
+            logError(error, requestId, startReqTs, endReqTs);
             reject(false);
           });
       } catch (error) {
+        const endReqTs = Date.now();
+        logError(error, requestId, startReqTs, endReqTs);
         reject(false);
       }
     });
   };
 
+  const logError = (
+    error: any,
+    requestId: string,
+    startReqTs: number,
+    endReqTs: number,
+  ) => {
+    const latency = endReqTs - startReqTs;
+    logger.error(
+      LogSource.NetworkRest,
+      'idp_logout',
+      'Error on calling API idp_logout',
+      {
+        error,
+        requestId,
+        startReqTs,
+        endReqTs,
+        latency,
+      },
+    );
+  };
+
   return {
     enableIDPAuth,
     idpLogout,

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