agora-appbuilder-core 4.0.7 → 4.0.8

package/template/bridge/rtc/webNg/RtcSurfaceView.tsx

@@ -14,6 +14,7 @@ import {ILocalVideoTrack, IRemoteVideoTrack} from 'agora-rtc-sdk-ng';
 import React, {useEffect} from 'react';
 import {StyleProp, StyleSheet, ViewProps, ViewStyle} from 'react-native';
 import {RenderModeType} from './Types';
+import {LogSource, logger} from '../../../src/logger/AppBuilderLogger';
 
 export interface RtcSurfaceViewProps extends ViewProps {
   canvas: {
@@ -29,7 +30,7 @@ export interface StyleProps {
 interface SurfaceViewInterface extends RtcSurfaceViewProps, StyleProps {}
 
 const RtcSurfaceView = (props: SurfaceViewInterface) => {
-  console.log('Rtc Surface View props', props);
+  logger.debug(LogSource.Internals, 'LAYOUT', 'Rtc Surface View props', props);
   const {uid, renderMode} = props.canvas;
   const stream: ILocalVideoTrack | IRemoteVideoTrack =
     uid === 0

package/template/bridge/rtm/web/index.ts

@@ -19,6 +19,7 @@ import {
 import {RtmClientEvents} from 'agora-react-native-rtm/lib/typescript/src/RtmEngine';
 import AgoraRTM, {VERSION} from 'agora-rtm-sdk';
 import RtmClient from 'agora-react-native-rtm';
+import {LogSource, logger} from '../../../src/logger/AppBuilderLogger';
 // export {RtmAttribute}
 //
 interface RtmAttributePlaceholder {}
@@ -59,7 +60,7 @@ export default class RtmEngine {
   ]);
   constructor() {
     this.appId = '';
-    console.log('Using RTM Bridge');
+    logger.debug(LogSource.AgoraSDK, 'Log', 'Using RTM Bridge');
   }
 
   on(event: any, listener: any) {

package/template/customization-api/customize.ts

@@ -9,6 +9,7 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
+import {LogSource, logger} from '../src/logger/AppBuilderLogger';
 import {CustomizationApiInterface} from './typeDefinition';
 import ReactIs from 'react-is';
 /**
@@ -58,15 +59,21 @@ function validateComponents(components: any) {
             validateComponents(comp);
           }
         } else {
-          console.error(
-            `Customize:Error ${key} should be a react component or object`,
+          logger.error(
+            LogSource.CustomizationAPI,
+            'Log',
+            `Error ${key} should be a react component or object`,
           );
         }
       }
     } else {
       let comp = components[key];
       if (comp && !isFunction(comp)) {
-        console.error(`Customize:Error ${key} should be an function`);
+        logger.error(
+          LogSource.CustomizationAPI,
+          'Log',
+          `Error ${key} should be an function`,
+        );
       }
     }
   }
@@ -76,8 +83,10 @@ function validateLifecycle(data: any) {
   for (const key in data) {
     const callback = data[key];
     if (callback && !isFunction(callback)) {
-      console.error(
-        `Customize:Error ${key} should be a function that return async function`,
+      logger.error(
+        LogSource.CustomizationAPI,
+        'Log',
+        `Error ${key} should be a function that return async function`,
       );
     }
   }
@@ -85,23 +94,33 @@ function validateLifecycle(data: any) {
 
 function validateCustomRoutes(routes: any) {
   if (routes && !Array.isArray(routes)) {
-    console.error(`Customize:Error customRoutes should be an array`);
+    logger.error(
+      LogSource.CustomizationAPI,
+      'Log',
+      'Error customRoutes should be an array',
+    );
   }
 }
 
 function validatei18n(data: any) {
   if (data) {
     if (!Array.isArray(data)) {
-      console.error(`Customize:Error i18n should be an array`);
+      logger.error(
+        LogSource.CustomizationAPI,
+        'Log',
+        'Error i18n should be an array',
+      );
     } else {
-      data.map((item) => {
+      data.map(item => {
         const langData = item.data;
         for (const key in langData) {
           const value = langData[key];
           if (value) {
             if (!(isString(value) || isFunction(value))) {
-              console.error(
-                `Customize:Error ${item.locale} ${key} should be a string or function`,
+              logger.error(
+                LogSource.CustomizationAPI,
+                'Log',
+                `Error ${item.locale} ${key} should be a string or function`,
               );
             }
           }

package/template/index.js

@@ -17,5 +17,21 @@ import {AppRegistry} from 'react-native';
 import 'react-native-url-polyfill/auto';
 import App from './src/App';
 import {name as appName} from './app.json';
+import React from 'react';
+import {
+  DatadogProvider,
+  getConfig,
+} from './src/logger/transports/agora-transport';
+import {ENABLE_AGORA_LOGGER_TRANSPORT} from './src/logger/constants';
 
-AppRegistry.registerComponent(appName, () => App);
+if (ENABLE_AGORA_LOGGER_TRANSPORT) {
+  const config = getConfig();
+  const AppWithLogs = () => (
+    <DatadogProvider configuration={config}>
+      <App />
+    </DatadogProvider>
+  );
+  AppRegistry.registerComponent(appName, () => AppWithLogs);
+} else {
+  AppRegistry.registerComponent(appName, () => App);
+}

package/template/index.web.js

@@ -9,9 +9,9 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import { AppRegistry } from 'react-native';
+import {AppRegistry} from 'react-native';
 import Video from './src/App';
-import './src/assets/font-styles.css'
+import './src/assets/font-styles.css';
 
 AppRegistry.registerComponent('App', () => Video);
 

package/template/package.json

@@ -49,6 +49,8 @@
   },
   "dependencies": {
     "@apollo/client": "3.8.1",
+    "@datadog/browser-logs": "^5.15.0",
+    "@datadog/mobile-react-native": "^2.3.2",
     "@gorhom/bottom-sheet": "4.4.7",
     "@netless/react-native-whiteboard": "^0.0.14",
     "@openspacelabs/react-native-zoomable-view": "^2.1.1",
@@ -86,6 +88,7 @@
     "react-native-exit-app": "1.1.0",
     "react-native-fs": "^2.20.0",
     "react-native-gesture-handler": "2.8.0",
+    "react-native-get-random-values": "^1.11.0",
     "react-native-hyperlink": "0.0.19",
     "react-native-inappbrowser-reborn": "3.5.1",
     "react-native-keep-awake": "4.0.0",

package/template/src/SDKAppWrapper.tsx

@@ -12,6 +12,7 @@ import App from './App';
 import SdkApiContextProvider from './components/SdkApiContext';
 import {Unsubscribe} from 'nanoevents';
 import {deviceId} from './components/DeviceConfigure';
+import {LogSource, logger} from './logger/AppBuilderLogger';
 
 type meetingData = Partial<RoomInfoContextInterface['data']>;
 
@@ -54,16 +55,23 @@ export interface AppBuilderSdkApiInterface {
 
 export const AppBuilderSdkApi: AppBuilderSdkApiInterface = {
   login: async (token: string) => {
+    logger.log(LogSource.SDK, 'Event', 'emiting event - login');
     return await SDKMethodEventsManager.emit('login', token);
   },
   logout: async () => {
+    logger.log(LogSource.SDK, 'Event', 'emiting event - logout');
     return await SDKMethodEventsManager.emit('logout');
   },
   customize: async customization => {
+    logger.log(LogSource.SDK, 'Event', 'emiting event - customize');
     return await SDKMethodEventsManager.emit('customize', customization);
   },
   customEvents: customEvents,
   joinRoom: async (roomDetails, userName) => {
+    logger.log(LogSource.SDK, 'Event', 'emiting event for joinRoom - join', {
+      room: roomDetails,
+      userName: userName,
+    });
     return await SDKMethodEventsManager.emit(
       'join',
       roomDetails,
@@ -72,8 +80,18 @@ export const AppBuilderSdkApi: AppBuilderSdkApiInterface = {
     );
   },
   joinPrecall: async (roomDetails, userName, skipPrecall) => {
-    if (!$config.PRECALL)
+    logger.log(LogSource.SDK, 'Event', 'emiting event for joinPrecall - join', {
+      room: roomDetails,
+      userName: userName,
+    });
+    if (!$config.PRECALL) {
+      logger.error(
+        LogSource.SDK,
+        'Log',
+        'Precall disabled in config, cant join precall',
+      );
       throw new Error('Precall disabled in config, cant join precall');
+    }
     const t = await SDKMethodEventsManager.emit(
       'join',
       roomDetails,
@@ -86,23 +104,47 @@ export const AppBuilderSdkApi: AppBuilderSdkApiInterface = {
     ];
   },
   setMicrophone: async deviceId => {
+    logger.log(
+      LogSource.SDK,
+      'Event',
+      'emiting event - microphoneDevice',
+      deviceId,
+    );
     return await SDKMethodEventsManager.emit('microphoneDevice', deviceId);
   },
   setSpeaker: async deviceId => {
+    logger.log(
+      LogSource.SDK,
+      'Event',
+      'emiting event - speakerDevice',
+      deviceId,
+    );
     return await SDKMethodEventsManager.emit('speakerDevice', deviceId);
   },
   setCamera: async deviceId => {
+    logger.log(
+      LogSource.SDK,
+      'Event',
+      'emiting event - cameraDevice',
+      deviceId,
+    );
     return await SDKMethodEventsManager.emit('cameraDevice', deviceId);
   },
   muteAudio: async state => {
+    logger.log(LogSource.SDK, 'Event', 'emiting event - muteAudio', state);
     return await SDKMethodEventsManager.emit('muteAudio', state);
   },
   muteVideo: async state => {
+    logger.log(LogSource.SDK, 'Event', 'emiting event - muteVideo', state);
     return await SDKMethodEventsManager.emit('muteVideo', state);
   },
   createCustomization: customize,
   on: (userEventName, cb) => {
-    console.log('SDKEvents: Event Registered', userEventName);
+    logger.debug(
+      LogSource.SDK,
+      'Event',
+      `Event Registered for SDK event- ${userEventName}`,
+    );
     return SDKEvents.on(userEventName, cb);
   },
 };

package/template/src/app-state/useNoiseSupression.native.tsx

@@ -1,6 +1,7 @@
 import React, {createContext, useState, useEffect} from 'react';
 import {ToggleState} from '../../agora-rn-uikit';
 import {createHook} from 'customization-implementation';
+import {LogSource, logger} from '../logger/AppBuilderLogger';
 
 export interface NoiseSupressionContextInterface {
   isNoiseSupressionEnabled: ToggleState;
@@ -35,6 +36,11 @@ export function NoiseSupressionProvider(props) {
         isNoiseSupressionEnabled === ToggleState.disabling ||
         isNoiseSupressionEnabled === ToggleState.enabling
       ) {
+        logger.error(
+          LogSource.Internals,
+          'NOISE_CANCELLATION',
+          'Cant change noise supression, already in transition',
+        );
         throw new Error('Cant change noise supression, already in transition');
       }
       let stateToBeSet =

package/template/src/app-state/useNoiseSupression.tsx

@@ -8,6 +8,7 @@ import wasm1 from './../../node_modules/agora-extension-ai-denoiser/external/den
 //@ts-ignore
 import wasm2 from './../../node_modules/agora-extension-ai-denoiser/external/denoiser-wasm-simd.wasm';
 import {createHook} from 'customization-implementation';
+import {LogSource, logger} from '../logger/AppBuilderLogger';
 // Necessary To bypass treeshaking, dont remove
 console.log('wasm files loaded are', wasm1, wasm2);
 
@@ -59,13 +60,24 @@ export function NoiseSupressionProvider(props) {
       localAudioTrack
         ?.pipe(processor.current)
         .pipe(localAudioTrack?.processorDestination);
+
       await processor?.current?.enable();
+      logger.log(
+        LogSource.Internals,
+        'NOISE_CANCELLATION',
+        'noise suppression enabled',
+      );
     }
   };
 
   const disableNoiseSuppression = async () => {
     if (processor?.current) {
       await processor?.current?.disable();
+      logger.log(
+        LogSource.Internals,
+        'NOISE_CANCELLATION',
+        'noise suppression disabled',
+      );
     }
   };
 
@@ -75,6 +87,11 @@ export function NoiseSupressionProvider(props) {
         isNoiseSupressionEnabled === ToggleState.disabling ||
         isNoiseSupressionEnabled === ToggleState.enabling
       ) {
+        logger.error(
+          LogSource.Internals,
+          'NOISE_CANCELLATION',
+          'Cant change noise supression, already in transition',
+        );
         throw new Error('Cant change noise supression, already in transition');
       }
       let stateToBeSet =

package/template/src/auth/AuthProvider.tsx

@@ -37,6 +37,7 @@ import {
   authSessionTimeoutToastHeading,
   loadingText,
 } from '../language/default-labels/commonLabels';
+import {LogSource, logger} from '../logger/AppBuilderLogger';
 
 export const GET_USER = gql`
   query getUser {
@@ -169,20 +170,37 @@ const AuthProvider = (props: AuthProviderProps) => {
                 })
                 .catch(() => {
                   setIsAuthenticated(false);
-                  console.log('debugging error on IDP token setting');
+                  logger.error(
+                    LogSource.Internals,
+                    'AUTH',
+                    'error on IDP token setting',
+                  );
                 });
             } else {
-              console.log('debugging deep-linking token is empty');
+              logger.error(
+                LogSource.Internals,
+                'AUTH',
+                'deep-linking token is empty',
+              );
               history.push('/');
             }
           } else if (url?.indexOf('authorize') === -1) {
-            console.log('debugging deep-linking setting return to');
+            logger.error(
+              LogSource.Internals,
+              'AUTH',
+              `deep-linking setting return to - ${url}`,
+            );
             setReturnTo(url);
           } else {
             history.push(url);
           }
         } catch (error) {
-          console.log('debugging deep-linking error catch');
+          logger.error(
+            LogSource.Internals,
+            'AUTH',
+            'deep-linking error catch',
+            error,
+          );
           history.push('/');
         }
       } else {
@@ -285,12 +303,18 @@ const AuthProvider = (props: AuthProviderProps) => {
   useEffect(() => {
     // Ignore if on sdk since IDP flow is not supported
     // For unauthenticated flow authLogin should be called to get the token
+    logger.log(LogSource.Internals, 'AUTH', 'App loaded');
     if (isSDK() && ENABLE_AUTH) {
       setIsAuthenticated(true);
       setLoading(false);
       return () => {};
     }
     //if application in authorization state then don't call authlogin
+    logger.log(
+      LogSource.Internals,
+      'AUTH',
+      'check if application is in authorized state ?',
+    );
     if (
       //to check authoriztion
       location?.pathname?.indexOf('authorize') === -1 &&
@@ -299,12 +323,22 @@ const AuthProvider = (props: AuthProviderProps) => {
       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);
@@ -312,7 +346,13 @@ const AuthProvider = (props: AuthProviderProps) => {
             setIsAuthenticated(true);
           }
         })
-        .catch(() => {
+        .catch(error => {
+          logger.error(
+            LogSource.NetworkRest,
+            'user_details',
+            'API user details query failed. User is un-authenticated',
+            error,
+          );
           setIsAuthenticated(false);
           authLogin();
         });
@@ -338,11 +378,18 @@ const AuthProvider = (props: AuthProviderProps) => {
 
   const authLogin = () => {
     // Authenticated login flow
+    logger.log(LogSource.Internals, 'AUTH', 'Trying to authenticate the user');
     if (ENABLE_AUTH) {
       //AUTH -> IDP -> NATIVE and WEB and DESKTOP
       if ($config.ENABLE_IDP_AUTH && !isSDK()) {
         //it will open external web link and post authentication it will redirect to application
         //@ts-ignore
+        logger.log(LogSource.Internals, 'AUTH', 'IDP auth enabled');
+        logger.log(
+          LogSource.NetworkRest,
+          'idp_login',
+          'API idp_login Trying to authenticate user',
+        );
         enableIDPAuth(
           isWeb()
             ? location.pathname
@@ -353,6 +400,12 @@ const AuthProvider = (props: AuthProviderProps) => {
             : '',
           timeoutHeading,
         )?.then((response: any) => {
+          logger.log(
+            LogSource.NetworkRest,
+            'idp_login',
+            'API idp_login authentication successful',
+            response,
+          );
           if (isAndroid() || isIOS()) {
             if (response && response?.showNativePopup) {
               setShowNativePopup(true);
@@ -364,8 +417,20 @@ const AuthProvider = (props: AuthProviderProps) => {
       }
       //AUTH -> IDP -> SDK ONLY
       else if ($config.ENABLE_TOKEN_AUTH && isSDK()) {
+        logger.log(LogSource.Internals, 'AUTH', 'Token auth enabled');
+        logger.log(
+          LogSource.NetworkRest,
+          'token_login',
+          'API token_login Trying to authenticate user',
+        );
         enableTokenAuth()
           .then(res => {
+            logger.log(
+              LogSource.NetworkRest,
+              'token_login',
+              'API token_login User Authenticated successfully',
+              res,
+            );
             setIsAuthenticated(true);
             history.push('/create');
           })
@@ -373,6 +438,12 @@ const AuthProvider = (props: AuthProviderProps) => {
             //don't show token expire/not found toast in the sdk
             //we have event emitter to inform the customer application
             //they have to listen for those events
+            logger.error(
+              LogSource.NetworkRest,
+              'token_login',
+              'API token_login failed. There was an error',
+              error,
+            );
             if (!isSDK()) {
               if (error instanceof Error) {
                 setAuthError(error.message);
@@ -388,6 +459,16 @@ const AuthProvider = (props: AuthProviderProps) => {
     }
     // Unauthenticated login flow
     else {
+      logger.log(
+        LogSource.Internals,
+        'AUTH',
+        'Project has No auth(token or idp) enabled',
+      );
+      logger.log(
+        LogSource.NetworkRest,
+        'unauth_login',
+        'API unauth_login Trying to authenticate user',
+      );
       fetch(GET_UNAUTH_FLOW_API_ENDPOINT(), {
         credentials: 'include',
       })
@@ -395,7 +476,21 @@ const AuthProvider = (props: AuthProviderProps) => {
         .then(response => {
           // 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,
+          );
           if (!response.token) {
+            logger.error(
+              LogSource.NetworkRest,
+              'unauth_login',
+              'API unauth_login failed. There was an error',
+              {
+                data: 'Token not received',
+              },
+            );
             throw new Error('Token not received');
           } else {
             enableTokenAuth(response.token)
@@ -418,6 +513,12 @@ const AuthProvider = (props: AuthProviderProps) => {
           }
         })
         .catch(error => {
+          logger.error(
+            LogSource.NetworkRest,
+            'unauth_login',
+            'API unauth_login failed. There was an error',
+            error,
+          );
           if (error instanceof Error) {
             setAuthError(error.message);
           } else {
@@ -430,12 +531,30 @@ const AuthProvider = (props: AuthProviderProps) => {
 
   const authLogout = () => {
     if (ENABLE_AUTH && $config.ENABLE_IDP_AUTH && !isSDK()) {
+      logger.log(LogSource.Internals, 'AUTH', 'Request to log out');
+      logger.log(
+        LogSource.NetworkRest,
+        'idp_logout',
+        'API idp_logout Trying to log out IDP authenticated user',
+      );
       idpLogout(isAndroid() || isIOS() ? setShowNativePopup : {})
         .then(res => {
+          logger.log(
+            LogSource.NetworkRest,
+            'idp_logout',
+            'API idp_logout User logged out successfully',
+            res,
+          );
           setIsAuthenticated(false);
         })
-        .catch(() => {
+        .catch(error => {
           setIsAuthenticated(false);
+          logger.error(
+            LogSource.NetworkRest,
+            'idp_logout',
+            'API idp_logout failed. There was an error',
+            error,
+          );
           console.error('user logout failed');
           setAuthError('Error occured on Logout, please try again.');
           setTimeout(() => {
@@ -449,10 +568,28 @@ const AuthProvider = (props: AuthProviderProps) => {
         //sdk with auth flow will use sdk api for logout
         history.push('/create');
       } else {
+        logger.log(LogSource.Internals, 'AUTH', 'Request to log out');
+        logger.log(
+          LogSource.NetworkRest,
+          'token_logout',
+          'API token_logout Trying to log out token authenticated user',
+        );
         tokenLogout()
-          .then(res => {})
-          .catch(() => {
+          .then(res => {
+            logger.log(
+              LogSource.NetworkRest,
+              'token_logout',
+              'API token_logout. Logged out user successfully',
+            );
+          })
+          .catch(error => {
             console.error('user logout failed');
+            logger.error(
+              LogSource.NetworkRest,
+              'token_logout',
+              'API token_logout failed. There was an error',
+              error,
+            );
             setAuthError('Error occured on Logout, please try again.');
           })
           .finally(() => {

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

@@ -5,6 +5,7 @@ import Loading from '../subComponents/Loading';
 import useTokenAuth from './useTokenAuth';
 import {useString} from '../utils/useString';
 import {authAuthorizingApplicationText} from '../language/default-labels/commonLabels';
+import {LogSource, logger} from '../logger/AppBuilderLogger';
 
 export const IDPAuth = () => {
   const {setIsAuthenticated} = useAuth();
@@ -22,7 +23,7 @@ export const IDPAuth = () => {
         })
         .catch(() => {
           setIsAuthenticated(false);
-          console.log('debugging electron login failed');
+          logger.error(LogSource.Internals, 'AUTH', 'electron login failed');
         });
     }
   }, []);

package/template/src/auth/IDPAuth.tsx

@@ -11,6 +11,7 @@ import {
   authAuthorizingApplicationText,
   authErrorOnLoginToastHeading,
 } from '../language/default-labels/commonLabels';
+import {LogSource, logger} from '../logger/AppBuilderLogger';
 
 export const IDPAuth = () => {
   const toastheading = useString(authErrorOnLoginToastHeading)();
@@ -45,9 +46,14 @@ export const IDPAuth = () => {
             history.push('/');
           }
         })
-        .catch(() => {
+        .catch(error => {
           setIsAuthenticated(false);
-          console.log('debugging error on IDP token setting');
+          logger.error(
+            LogSource.Internals,
+            'AUTH',
+            'error on IDP token setting',
+            error,
+          );
         });
     } else {
       setIsAuthenticated(false);