agora-appbuilder-core 4.0.7 → 4.0.8

package/template/src/components/whiteboard/WhiteboardView.native.tsx

@@ -1,12 +1,12 @@
 /*
 ********************************************
  Copyright © 2021 Agora Lab, Inc., all rights reserved.
- AppBuilder and all associated components, source code, APIs, services, and documentation 
- (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
- accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
- Use without a license or in violation of any license terms and conditions (including use for 
- any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
- information visit https://appbuilder.agora.io. 
+ AppBuilder and all associated components, source code, APIs, services, and documentation
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.
+ Use without a license or in violation of any license terms and conditions (including use for
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more
+ information visit https://appbuilder.agora.io.
 *********************************************
 */
 
@@ -19,6 +19,7 @@ import {
   RoomCallbackHandler,
 } from '@netless/react-native-whiteboard';
 import WhiteboardWidget from './WhiteboardWidget';
+import {LogSource, logger} from '../../logger/AppBuilderLogger';
 import {
   whiteboardInitializingText,
   whiteboardNativeInfoToastHeading,
@@ -68,14 +69,24 @@ const WhiteboardView: React.FC<WhiteboardViewInterface> = () => {
 
   const roomCallbacks: Partial<RoomCallbackHandler> = {
     onPhaseChanged: e => {
-      console.log('debugging onPhaseChanged changed: ', e);
-      setIsLoading(false);
+      logger.debug(
+        LogSource.Internals,
+        'WHITEBOARD',
+        'onPhaseChanged changed:',
+        e,
+      ),
+        setIsLoading(false);
     },
     // onRoomStateChanged: e =>
     //   console.log('debugging onRoomStateChanged changed: ', e),
     onDisconnectWithError: e => {
-      console.log('debugging onDisconnectWithError: ', e);
-      setIsLoading(false);
+      logger.debug(
+        LogSource.Internals,
+        'WHITEBOARD',
+        'onDisconnectWithError:',
+        e,
+      ),
+        setIsLoading(false);
     },
   };
 
@@ -90,15 +101,28 @@ const WhiteboardView: React.FC<WhiteboardViewInterface> = () => {
     roomRef.current = aRoom;
     sdkRef.current = aSdk;
 
-    console.log('debugging aRoom', aRoom);
+    logger.debug(LogSource.Internals, 'WHITEBOARD', 'debugging aRoom:', {
+      data: aRoom,
+    });
+
     setIsLoading(false);
     if (error) {
-      console.log(error);
+      logger.error(
+        LogSource.Internals,
+        'WHITEBOARD',
+        'joinRoomCallback error:',
+        error,
+      );
     } else {
       try {
         //aRoom.setMemberState({currentApplianceName: 'hand'});
       } catch (error2) {
-        console.log('debugging error on whiteboard setMemberState');
+        logger.error(
+          LogSource.Internals,
+          'WHITEBOARD',
+          'error on whiteboard setMemberState',
+          error,
+        );
       }
     }
   };

package/template/src/language/useLanguage.tsx

@@ -13,6 +13,7 @@ import React, {createContext, useContext, useEffect, useState} from 'react';
 import {createHook, useCustomization} from 'customization-implementation';
 import {DEFAULT_I18_DATA} from './index';
 import StorageContext from '../components/StorageContext';
+import {LogSource, logger} from '../logger/AppBuilderLogger';
 
 export interface LanguageContextInterface {
   languageCode: string;
@@ -30,13 +31,13 @@ const LanguageContext = createContext<LanguageContextInterface>({
 
 const LanguageProvider = (props: LanguagePropsInterface) => {
   const {store, setStore} = useContext(StorageContext);
-  const i18nData = useCustomization((data) => data?.i18n);
+  const i18nData = useCustomization(data => data?.i18n);
 
   //If language code is stored in the localstorage no longer available in fpe data
   //then we will update the localstorage value to default value
   let storedCode =
     i18nData && Array.isArray(i18nData) && i18nData.length
-      ? i18nData?.find((item) => item.locale === store.selectedLanguageCode)
+      ? i18nData?.find(item => item.locale === store.selectedLanguageCode)
         ? store.selectedLanguageCode
         : undefined
       : undefined;
@@ -51,7 +52,7 @@ const LanguageProvider = (props: LanguagePropsInterface) => {
 
   useEffect(() => {
     if (setStore) {
-      setStore((prevState) => {
+      setStore(prevState => {
         return {
           ...prevState,
           selectedLanguageCode: languageCode,
@@ -63,7 +64,7 @@ const LanguageProvider = (props: LanguagePropsInterface) => {
   useEffect(() => {
     let storedCode =
       i18nData && Array.isArray(i18nData) && i18nData.length
-        ? i18nData?.find((item) => item.locale === store.selectedLanguageCode)
+        ? i18nData?.find(item => item.locale === store.selectedLanguageCode)
           ? store.selectedLanguageCode
           : undefined
         : undefined;
@@ -77,6 +78,11 @@ const LanguageProvider = (props: LanguagePropsInterface) => {
   }, [i18nData]);
 
   const setLanguageCode = (langCode: string) => {
+    logger.log(
+      LogSource.Internals,
+      'LANGUAGE',
+      `Language selected ${langCode}`,
+    );
     setLanguageCodeLocal(langCode);
   };
 

package/template/src/logger/AppBuilderLogger.tsx

@@ -0,0 +1,215 @@
+import 'react-native-get-random-values';
+import {nanoid} from 'nanoid';
+import pkg from '../../package.json';
+import {isWeb} from '../utils/common';
+import {
+  ENABLE_AGORA_LOGGER_TRANSPORT,
+  ENABLE_BROWSER_CONSOLE_LOGS,
+  ENABLE_CUSTOMER_LOGGER_TRANSPORT,
+} from './constants';
+import {
+  getTransportLogger,
+  initTransportLayerForAgora,
+} from './transports/agora-transport';
+import configJSON from '../../config.json';
+import {getPlatformId} from '../auth/config';
+import {initTransportLayerForCustomers} from './transports/customer-transport';
+
+const cli_version = 'test';
+
+export declare const StatusTypes: {
+  readonly debug: 'debug';
+  readonly error: 'error';
+  readonly info: 'info';
+  readonly warn: 'warn';
+};
+
+export type StatusType = (typeof StatusTypes)[keyof typeof StatusTypes];
+
+export enum LogSource {
+  AgoraSDK = 'Agora-SDK',
+  /** Logs related to all features */
+  Internals = 'Internals',
+  /** Logs related to REST API calls */
+  NetworkRest = 'Network-REST',
+  /** Logs related to Events */
+  Events = 'Events',
+  /** Logs related to Customization API */
+  CustomizationAPI = 'Customization',
+  /** Logs related to SDK */
+  SDK = 'SDK',
+}
+
+type LogType = {
+  [LogSource.AgoraSDK]: 'Log' | 'API' | 'Event' | 'Service';
+  [LogSource.Internals]:
+    | 'AUTH'
+    | 'CREATE_MEETING'
+    | 'ENTER_MEETING_ROOM'
+    | 'JOIN_MEETING'
+    | 'PRECALL_SCREEN'
+    | 'DEVICE_CONFIGURE'
+    | 'LOCAL_MUTE'
+    | 'VIRTUAL_BACKGROUND'
+    | 'VIDEO_CALL_ROOM'
+    | 'LANGUAGE'
+    | 'CONTROLS'
+    | 'CHAT'
+    | 'NAME'
+    | 'STT'
+    | 'SCREENSHARE'
+    | 'WHITEBOARD'
+    | 'LAYOUT'
+    | 'TRANSCRIPT'
+    | 'NOISE_CANCELLATION'
+    | 'ACTIVE_SPEAKER'
+    | 'WAITING_ROOM'
+    | 'RECORDING'
+    | 'STORE';
+  [LogSource.NetworkRest]:
+    | 'idp_login'
+    | 'token_login'
+    | 'unauth_login'
+    | 'idp_logout'
+    | 'token_logout'
+    | 'user_details'
+    | 'createChannel'
+    | 'joinChannel'
+    | 'channel_join_request'
+    | 'channel_join_approval'
+    | 'stt'
+    | 'whiteboard_image'
+    | 'whiteboard_upload'
+    | 'whiteboard_fileconvert'
+    | 'recording_start'
+    | 'recording_stop'
+    | 'recordings_get';
+  [LogSource.Events]: 'CUSTOM_EVENTS' | 'RTM_EVENTS';
+  [LogSource.CustomizationAPI]: 'Log';
+  [LogSource.SDK]: 'Log' | 'Event';
+};
+
+/** Log levels */
+export type LogLevel = 'log' | 'warn' | 'error' | 'info';
+
+/** Signature of a logging function */
+type LogFn = <T extends LogSource>(
+  source: T,
+  type: LogType[T],
+  logMessage: string,
+  ...data: any[]
+) => void;
+
+// const NO_OP: LogFn = (message?: any, ...optionalParams: any[]) => {};
+
+/** Basic logger interface */
+export interface Logger {
+  log: LogFn;
+  warn: LogFn;
+  error: LogFn;
+  info: LogFn;
+  debug: LogFn;
+}
+/** Logger which outputs to the browser console */
+export default class AppBuilderLogger implements Logger {
+  log: LogFn;
+  info: LogFn;
+  warn: LogFn;
+  debug: LogFn;
+  error: LogFn;
+
+  constructor(_transportLogger?: any) {
+    const session = nanoid();
+    const platform = getPlatformId();
+    const rtmPkg = isWeb()
+      ? pkg.dependencies['agora-rtm-sdk']
+      : pkg.dependencies['agora-react-native-rtm'];
+    const rtcPkg = isWeb()
+      ? pkg.dependencies['agora-rtc-sdk-ng']
+      : pkg.dependencies['react-native-agora'];
+    const logger =
+      (status: StatusType) =>
+      <T extends LogSource>(
+        source: T,
+        type: LogType[T],
+        logMessage: string,
+        ...data: any[]
+      ) => {
+        if (!$config.LOG_ENABLED) {
+          return;
+        }
+
+        const context = {
+          timestamp: Date.now(),
+          source,
+          version: cli_version,
+          type,
+          data,
+          platform,
+          contextInfo: {
+            session_id: session,
+            app_id: $config.APP_ID,
+            project_id: $config.PROJECT_ID,
+            agora_sdk_version: {
+              rtm: rtmPkg,
+              rtc: rtcPkg,
+            },
+          },
+        };
+
+        if (
+          (ENABLE_AGORA_LOGGER_TRANSPORT || ENABLE_CUSTOMER_LOGGER_TRANSPORT) &&
+          _transportLogger
+        ) {
+          try {
+            _transportLogger(logMessage, context, status);
+          } 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';
+
+          console[status](
+            consoleHeader,
+            consoleCSS,
+            logMessage,
+            context,
+            status,
+          );
+        }
+      };
+
+    this.log = logger('info');
+    this.info = logger('info');
+    this.debug = logger('debug');
+    this.warn = logger('warn');
+    this.error = logger('error');
+
+    this.debug(
+      LogSource.Internals,
+      'AUTH',
+      'App intitialized with config.json',
+      {
+        config: configJSON,
+      },
+    );
+  }
+}
+
+let _transportLogger = null;
+
+if (ENABLE_AGORA_LOGGER_TRANSPORT) {
+  initTransportLayerForAgora();
+  _transportLogger = getTransportLogger();
+}
+
+if (ENABLE_CUSTOMER_LOGGER_TRANSPORT) {
+  _transportLogger = initTransportLayerForCustomers();
+}
+
+export const logger = new AppBuilderLogger(_transportLogger);

package/template/src/logger/constants.ts

@@ -0,0 +1,18 @@
+const CONFERENCING_APP_ID = 'b8c2ef0f986541a8992451c07d30fb4b';
+const CONFERENCING_PROJECT_ID = '8d2b1a60e4e0e95ac455';
+const isInternalApp =
+  $config.APP_ID === CONFERENCING_APP_ID &&
+  $config.PROJECT_ID === CONFERENCING_PROJECT_ID;
+// Send logs to configured transport-> Datadog (used for internal app - www.confercning.agora.io)
+// Use the app id strict check to keep this true
+export const ENABLE_AGORA_LOGGER_TRANSPORT =
+  $config.LOG_ENABLED && isInternalApp;
+// $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;
+
+// Print logs to browser console window - true in dev mode
+export const ENABLE_BROWSER_CONSOLE_LOGS = $config.LOG_ENABLED;
+//   && process.env.NODE_ENV === 'development';

package/template/src/logger/transports/agora-transport.native.ts

@@ -0,0 +1,58 @@
+import {StatusType} from '@datadog/browser-logs';
+import {
+  BatchSize,
+  DatadogProvider,
+  DatadogProviderConfiguration,
+  SdkVerbosity,
+  DdLogs,
+  UploadFrequency,
+} from '@datadog/mobile-react-native';
+
+export const initTransportLayerForAgora = () => {
+  console.log(
+    'Initialized the logger in index entry file for native platforms ',
+  );
+};
+
+const getConfig = () => {
+  const loggerConfig = new DatadogProviderConfiguration(
+    'pubdb41371dc4efb3e57a918a4f2096578c',
+    'none',
+    'fc33ae27-6fd6-4c7b-94c6-c2c11b9f565e',
+    true, // track User interactions (e.g.: Tap on buttons. You can use 'accessibilityLabel' element property to give tap action the name, otherwise element type will be reported)
+    true, // track XHR Resources
+    true, // track Errors
+  );
+  // Optional: Select your Datadog website (one of "US1", "EU1", "US3", "US5", "AP1" or "GOV")
+  loggerConfig.site = 'US1';
+  // Optional: Enable JavaScript long task collection
+  loggerConfig.longTaskThresholdMs = 100;
+  // Optional: enable or disable native crash reports
+  loggerConfig.nativeCrashReportEnabled = true;
+  // Optional: sample RUM sessions (here, 100% of session will be sent to Datadog. Default = 100%)
+  loggerConfig.sampleRate = 100;
+  // Optional: The service name for your application
+  loggerConfig.serviceName = 'app-builder-core-frontend-native';
+
+  if (__DEV__) {
+    // Optional: Send data more frequently
+    loggerConfig.uploadFrequency = UploadFrequency.FREQUENT;
+    // Optional: Send smaller batches of data
+    loggerConfig.batchSize = BatchSize.SMALL;
+    // Optional: Enable debug logging
+    loggerConfig.verbosity = SdkVerbosity.DEBUG;
+  }
+  return loggerConfig;
+};
+
+const getTransportLogger = () => {
+  return (text: string, data: any, status: StatusType) => {
+    if (status === 'error') {
+      DdLogs.error(text, data);
+    } else {
+      DdLogs.debug(text, data);
+    }
+  };
+};
+
+export {DatadogProvider, getTransportLogger, getConfig};

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

@@ -0,0 +1,28 @@
+import {StatusType, datadogLogs} from '@datadog/browser-logs';
+import {version as cli_version} from '../../../../package.json';
+
+const DATADOG_CLIENT_TOKEN = 'pubeccdaed5357d217e2c75e85aaef432fe';
+const DATADOG_SITE = 'datadoghq.com';
+
+export const initTransportLayerForAgora = () => {
+  datadogLogs.init({
+    clientToken: DATADOG_CLIENT_TOKEN,
+    site: DATADOG_SITE,
+    forwardErrorsToLogs: false,
+    sessionSampleRate: 100,
+    service: 'app-builder-core-frontend',
+    version: cli_version,
+    env: 'none',
+  });
+};
+
+export const getTransportLogger = () => {
+  return (text: string, data: any, status: StatusType) => {
+    datadogLogs.logger.log(
+      text,
+      data,
+      status,
+      status === 'error' ? data[0] : undefined,
+    );
+  };
+};

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

@@ -0,0 +1,115 @@
+import createRetryFetch from 'fetch-retry';
+import {isWeb} from '../../utils/common';
+
+/* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cyclic_object_value#examples */
+export function getCircularReplacer() {
+  const ancestors = [];
+  return function (key, value) {
+    if (typeof value !== 'object' || value === null) {
+      return value;
+    }
+    // `this` is the object that value is contained in,
+    // i.e., its direct parent.
+    while (ancestors.length > 0 && ancestors[ancestors.length - 1] !== this) {
+      ancestors.pop();
+    }
+    if (ancestors.includes(value)) {
+      return '[Circular]';
+    }
+    ancestors.push(value);
+    return value;
+  };
+}
+const getSafeBody = (p: any[]) => {
+  try {
+    return JSON.stringify(p, getCircularReplacer());
+  } catch (error) {
+    console.error('there was an error converting this object');
+    return '';
+  }
+};
+
+const fetchRetry = createRetryFetch(fetch, {
+  retries: 23,
+  retryDelay: function (attempt) {
+    return Math.pow(2, attempt) * 1000; // 1000, 2000, 4000
+  },
+  retryOn: function (attempt, error, response) {
+    // retry on any network error, or 4xx or 5xx status codes
+    if (error !== null || response.status > 400) {
+      return true;
+    }
+  },
+});
+
+const sendLogs = (p: any[]) => {
+  fetchRetry(
+    'https://axiom-queue.appbuilder.workers.dev?dataset=app-builder-core-frontend-customer',
+    // "&strategy=queue", // to send logs to a specific dataset [default: queue]
+    {
+      method: 'POST',
+      headers: new Headers({
+        'Content-Type': 'application/json',
+      }),
+      body: getSafeBody(p),
+    },
+  ).catch(err => {
+    console.log('error ocuured while replacing circular reference', p, err);
+  });
+};
+
+export const createAxiomLogger = () => {
+  const queue: any[] = [];
+  let batchId = 0;
+  let timeout: number | null = null;
+
+  const sendInterval = 45000; // 45s
+
+  const flush = () => {
+    if (timeout !== null) {
+      clearTimeout(timeout);
+      timeout = null;
+    }
+    if (queue.length === 0) return;
+    sendLogs(queue);
+    queue.length = 0;
+    batchId = batchId + 1;
+  };
+
+  const log = (logContent: {[key: string]: any}) => {
+    logContent.batchId = batchId;
+    queue.push(logContent);
+    if (queue.length >= 1000) {
+      flush();
+    } else {
+      if (timeout === null) {
+        // @ts-ignore
+        timeout = setTimeout(() => {
+          flush();
+        }, sendInterval);
+      }
+    }
+  };
+
+  return [log, flush] as const;
+};
+
+export const initTransportLayerForCustomers = () => {
+  const [log, flush] = createAxiomLogger();
+
+  const printLogs = (...args: any[]) => {
+    log({
+      data: args,
+      _time: Date.now(),
+      projectId: $config.PROJECT_ID,
+      appId: $config.APP_ID,
+      service: 'app-builder-core-frontend-customer',
+    });
+
+    isWeb() &&
+      window.addEventListener('beforeunload', () => {
+        flush();
+      });
+  };
+  return printLogs;
+};

package/template/src/pages/Create.tsx

@@ -58,6 +58,7 @@ import {
   createRoomSuccessToastHeading,
   createRoomSuccessToastSubHeading,
 } from '../language/default-labels/createScreenLabels';
+import {LogSource, logger} from '../logger/AppBuilderLogger';
 
 const Create = () => {
   const {CreateComponent} = useCustomization(data => {
@@ -150,6 +151,7 @@ const Create = () => {
   )();
 
   const isDesktop = !isMobileUA();
+
   useEffect(() => {
     //Generating the random room title for placeholder
     // setRandomRoomTitle(
@@ -157,7 +159,11 @@ const Create = () => {
     //     3,
     //   )}-${randomNameGenerator(3)}`,
     // );
-
+    logger.log(
+      LogSource.Internals,
+      'CREATE_MEETING',
+      'User has landed on create room',
+    );
     if (isWebInternal() && !isSDK) {
       document.title = $config.APP_NAME;
     }
@@ -175,12 +181,18 @@ const Create = () => {
     isSeparateHostLink: boolean,
   ) => {
     if (roomTitle !== '') {
+      logger.log(
+        LogSource.Internals,
+        'CREATE_MEETING',
+        'User wants to create room',
+      );
       setLoading(true);
       try {
         setRoomInfo(RoomInfoDefaultValue);
         //@ts-ignore
         //isSeparateHostLink will be for internal usage since backend integration is not there
         await createRoomFun(roomTitle, enablePSTN, isSeparateHostLink);
+
         setLoading(false);
         Toast.show({
           leadingIconName: 'tick-fill',
@@ -195,6 +207,12 @@ const Create = () => {
         showShareScreen();
       } catch (error) {
         setLoading(false);
+        logger.error(
+          LogSource.Internals,
+          'CREATE_MEETING',
+          'There was error while creating meeting',
+          error,
+        );
         if (
           createRoomErrorToastHeadingText ||
           createRoomErrorToastSubHeadingText
@@ -395,7 +413,14 @@ const Create = () => {
                   <Spacer size={16} />
                   <LinkButton
                     text={joinWithRoomID}
-                    onPress={() => history.push('/join')}
+                    onPress={() => {
+                      logger.log(
+                        LogSource.Internals,
+                        'CREATE_MEETING',
+                        'User is navigated to join-room from create-room with an option to join using meeting id',
+                      );
+                      history.push('/join');
+                    }}
                   />
                 </View>
               </Card>

package/template/src/pages/Endcall.tsx

@@ -10,12 +10,17 @@ import ThemeConfig from '../theme';
 import ReactNativeForegroundService from '@supersami/rn-foreground-service';
 import CircularProgress from '../atoms/CircularProgress';
 import {useIsDesktop} from '../utils/common';
+import {logger, LogSource} from '../logger/AppBuilderLogger';
 
 /* For android only, bg audio */
 const StopForegroundService = () => {
   if (Platform.OS === 'android') {
     ReactNativeForegroundService.stop();
-    console.log('stopping foreground service');
+    logger.debug(
+      LogSource.Internals,
+      'CONTROLS',
+      'End call - stopping foreground service, bg audio for android only',
+    );
   }
 };