agora-appbuilder-core 4.0.22-beta-4 → 4.0.22-beta-5

package/package.json

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

package/template/bridge/rtc/webNg/RtcEngine.ts

@@ -382,10 +382,6 @@ export default class RtcEngine {
         LogSource.AgoraSDK,
         'API',
         'RTC [createMicrophoneAndCameraTracks] audio and video tracks created successfully',
-        {
-          audio: localAudio,
-          video: localVideo,
-        },
       );
       this.localStream.audio = localAudio;
       this.localStream.video = localVideo;
@@ -422,7 +418,6 @@ export default class RtcEngine {
             LogSource.AgoraSDK,
             'API',
             'RTC [createMicrophoneAudioTrack] audio track created',
-            localAudio,
           );
         } catch (eAudio) {
           logger.log(
@@ -442,7 +437,6 @@ export default class RtcEngine {
             LogSource.AgoraSDK,
             'API',
             'RTC [createMicrophoneAudioTrack] audio track created successfully',
-            localAudio,
           );
         }
         this.localStream.audio = localAudio;
@@ -474,7 +468,6 @@ export default class RtcEngine {
             LogSource.AgoraSDK,
             'API',
             'RTC [createCameraVideoTrack] video track created successfully',
-            localVideo,
           );
         } catch (eVideo) {
           logger.debug(
@@ -491,12 +484,7 @@ export default class RtcEngine {
           videoConfig.cameraId = '';
           try {
             localVideo = await AgoraRTC.createCameraVideoTrack(videoConfig);
-            logger.log(
-              LogSource.AgoraSDK,
-              'API',
-              'RTC video track created',
-              localVideo,
-            );
+            logger.log(LogSource.AgoraSDK, 'API', 'RTC video track created');
           } catch (error) {
             logger.debug(
               LogSource.AgoraSDK,
@@ -595,7 +583,6 @@ export default class RtcEngine {
             LogSource.AgoraSDK,
             'API',
             'RTC [publish] trying to publish tracks',
-            tracks,
           );
           await this.client.publish(tracks);
           logger.log(
@@ -627,7 +614,6 @@ export default class RtcEngine {
           'RTC [publish] Error publish tracks failed',
           {
             error: e,
-            stream: this.localStream,
           },
         );
         console.error(e, this.localStream);
@@ -1139,10 +1125,6 @@ export default class RtcEngine {
         LogSource.AgoraSDK,
         'API',
         `RTC [createClient] user and screen client with profile ${profile} created successfully`,
-        {
-          client: this.client,
-          screenClient: this.screenClient,
-        },
       );
     } catch (e) {
       logger.error(
@@ -1407,7 +1389,6 @@ export default class RtcEngine {
         'RTC [setEncryptionConfig] trying to set encryption config on user and screen client',
         {
           mode,
-          key: config.encryptionKey,
         },
       );
       await Promise.all([
@@ -1539,7 +1520,7 @@ export default class RtcEngine {
         logger.debug(
           LogSource.AgoraSDK,
           'Log',
-          'RTC start screenshare, creating stream',
+          'RTC start screenshare, creating screen stream',
         );
         if (encryption && encryption.screenKey && encryption.mode) {
           let mode: EncryptionMode;
@@ -1577,7 +1558,6 @@ export default class RtcEngine {
           'RTC [createScreenVideoTrack] Trying to create screenshare tracks',
           {
             config,
-            audio,
           },
         );
         const screenTracks = await AgoraRTC.createScreenVideoTrack(
@@ -1634,8 +1614,7 @@ export default class RtcEngine {
       logger.log(
         LogSource.AgoraSDK,
         'API',
-        'RTC [publish] trying to publish tracks',
-        this.screenStream,
+        'RTC [publish] trying to publish screen tracks',
       );
       await this.screenClient.publish(
         this.screenStream.audio
@@ -1646,7 +1625,6 @@ export default class RtcEngine {
         LogSource.AgoraSDK,
         'API',
         'RTC [publish] screenshare tracks published successfully',
-        this.screenStream,
       );
       this.screenStream.video.on('track-ended', () => {
         (this.eventsMap.get('onUserOffline') as callbackType)(

package/template/customization-api/typeDefinition.ts

@@ -64,6 +64,12 @@ export interface VBPanelProps {
 }
 
 export type ToolbarType = React.ComponentType | Array<ToolbarCustomItem>;
+export type CustomLogger = (
+  message: string,
+  data: any,
+  type: 'debug' | 'error' | 'info' | 'warn',
+) => void;
+
 export interface VideoCallInterface extends BeforeAndAfterInterface {
   // commented for v1 release
   topToolBar?: ToolbarType;
@@ -137,6 +143,10 @@ export interface CustomizationApiInterface {
    * Internationlization
    */
   i18n?: I18nInterface[];
+  /**
+   * Custom logger
+   */
+  logger?: CustomLogger;
   /**
    * Life cycle events
    */

package/template/src/logger/AppBuilderLogger.tsx

@@ -17,6 +17,12 @@ import {initTransportLayerForCustomers} from './transports/customer-transport';
 
 const cli_version = 'test';
 
+export type CustomLogger = (
+  message: string,
+  data: any,
+  type: StatusType,
+) => void;
+
 export declare const StatusTypes: {
   readonly debug: 'debug';
   readonly error: 'error';
@@ -45,6 +51,7 @@ type LogType = {
   [LogSource.Internals]:
     | 'AUTH'
     | 'CREATE_MEETING'
+    | 'SET_MEETING_DETAILS'
     | 'ENTER_MEETING_ROOM'
     | 'JOIN_MEETING'
     | 'PRECALL_SCREEN'
@@ -117,6 +124,7 @@ export default class AppBuilderLogger implements Logger {
   warn: LogFn;
   debug: LogFn;
   error: LogFn;
+  private _customLogger: CustomLogger;
 
   constructor(_transportLogger?: any) {
     const session = nanoid();
@@ -127,6 +135,11 @@ export default class AppBuilderLogger implements Logger {
     const rtcPkg = isWeb()
       ? pkg.dependencies['agora-rtc-sdk-ng']
       : pkg.dependencies['react-native-agora'];
+    let roomInfo = {
+      meetingTitle: null,
+      phrase: null,
+      roomId: null,
+    };
     const logger =
       (status: StatusType) =>
       <T extends LogSource>(
@@ -139,6 +152,9 @@ export default class AppBuilderLogger implements Logger {
           return;
         }
 
+        if (type === 'SET_MEETING_DETAILS') {
+          roomInfo = {...data[0]};
+        }
         const context = {
           timestamp: Date.now(),
           source,
@@ -154,22 +170,28 @@ export default class AppBuilderLogger implements Logger {
               rtm: rtmPkg,
               rtc: rtcPkg,
             },
+            ...roomInfo,
           },
         };
 
-        if (
-          (ENABLE_AGORA_LOGGER_TRANSPORT || ENABLE_CUSTOMER_LOGGER_TRANSPORT) &&
-          _transportLogger
-        ) {
-          try {
+        try {
+          if (ENABLE_CUSTOMER_LOGGER_TRANSPORT) {
+            if (this._customLogger) {
+              this._customLogger(logMessage, context, status);
+            } else if (_transportLogger) {
+              _transportLogger(logMessage, context, status);
+            }
+          }
+          if (ENABLE_AGORA_LOGGER_TRANSPORT && _transportLogger) {
             _transportLogger(logMessage, context, status);
-          } catch (error) {
-            console.log(
-              `error occured whhile trasnporting log for project : ${$config.PROJECT_ID}`,
-              error,
-            );
           }
+        } catch (error) {
+          console.log(
+            `error occured whhile trasnporting log for project : ${$config.PROJECT_ID}`,
+            error,
+          );
         }
+
         if (ENABLE_BROWSER_CONSOLE_LOGS || status === 'debug') {
           const consoleHeader = `%cApp-Builder: ${source}:[${type}] `;
           const consoleCSS = 'color: violet; font-weight: bold';
@@ -199,6 +221,17 @@ export default class AppBuilderLogger implements Logger {
       },
     );
   }
+
+  setCustomLogger = (_customLogger: CustomLogger) => {
+    this._customLogger = _customLogger;
+    _customLogger(
+      'App intitialized with config.json',
+      {
+        config: configJSON,
+      },
+      'debug',
+    );
+  };
 }
 
 let _transportLogger = null;

package/template/src/logger/constants.ts

@@ -10,9 +10,9 @@ export const ENABLE_AGORA_LOGGER_TRANSPORT =
 // $config.LOG_ENABLED && $config.APP_ID === CONFERENCING_APP_ID && true;
 
 // Send logs to configured transport-> axiom (used for customer deployed apps)
-export const ENABLE_CUSTOMER_LOGGER_TRANSPORT = false;
-// $config.LOG_ENABLED && !isInternalApp;
+export const ENABLE_CUSTOMER_LOGGER_TRANSPORT =
+  $config.LOG_ENABLED && !isInternalApp;
 
 // Print logs to browser console window - true in dev mode
-export const ENABLE_BROWSER_CONSOLE_LOGS = $config.LOG_ENABLED;
-//   && process.env.NODE_ENV === 'development';
+export const ENABLE_BROWSER_CONSOLE_LOGS =
+  $config.LOG_ENABLED && process.env.NODE_ENV === 'development';

package/template/src/logger/transports/customer-transport.ts

@@ -63,14 +63,16 @@ export const createAxiomLogger = () => {
   let batchId = 0;
   let timeout: number | null = null;
 
-  const sendInterval = 45000; // 45s
+  const sendInterval = 30000; // 30s
 
   const flush = () => {
     if (timeout !== null) {
       clearTimeout(timeout);
       timeout = null;
     }
-    if (queue.length === 0) return;
+    if (queue.length === 0) {
+      return;
+    }
     sendLogs(queue);
     queue.length = 0;
     batchId = batchId + 1;
@@ -79,7 +81,7 @@ export const createAxiomLogger = () => {
   const log = (logContent: {[key: string]: any}) => {
     logContent.batchId = batchId;
     queue.push(logContent);
-    if (queue.length >= 1000) {
+    if (queue.length >= 500) {
       flush();
     } else {
       if (timeout === null) {

package/template/src/pages/VideoCall.tsx

@@ -215,6 +215,17 @@ const VideoCall: React.FC = () => {
   const {isJoinDataFetched, data, isInWaitingRoom, waitingRoomStatus} =
     useRoomInfo();
 
+  useEffect(() => {
+    if (!isJoinDataFetched) {
+      return;
+    }
+    logger.log(LogSource.Internals, 'SET_MEETING_DETAILS', 'Room details', {
+      meetingTitle: data?.meetingTitle || '',
+      phrase: phrase,
+      roomId: data?.roomId,
+    });
+  }, [isJoinDataFetched, data, phrase]);
+
   React.useEffect(() => {
     return () => {
       logger.debug(
@@ -365,7 +376,7 @@ const VideoCall: React.FC = () => {
     },
     UserOffline: (uid: UidType) => {
       console.log('UIKIT Callback: UserOffline', uid);
-      SDKEvents.emit('rtc-user-joined', uid);
+      SDKEvents.emit('rtc-user-left', uid);
     },
     RemoteAudioStateChanged: (uid: UidType, status: 0 | 2) => {
       console.log('UIKIT Callback: RemoteAudioStateChanged', uid, status);