agora-appbuilder-core 3.0.13 → 3.0.28-beta-9

package/template/src/language/i18nTypes.ts

@@ -1,6 +1,6 @@
 import {TextDataInterface} from './default-labels/index';
 
-export type I18nBaseType<T = any> = string | ((template: T) => string);
+export type I18nBaseType<T = any> = string | ((...args: T[]) => string);
 export type I18nDynamicType = I18nBaseType<string>;
 export type I18nConditionalType = I18nBaseType<boolean>;
 export interface I18nInterface {

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,313 @@
+import 'react-native-get-random-values';
+import {nanoid} from 'nanoid';
+import pkg from '../../package.json';
+import {isWeb, isWebInternal} 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,
+  sendLogs,
+} from './transports/customer-transport';
+
+const cli_version = $config.CLI_VERSION;
+const core_version = $config.CORE_VERSION;
+
+export type CustomLogger = (
+  message: string,
+  type: StatusType,
+  columns?: Object,
+  contextInfo?: Object,
+  data?: any,
+) => void;
+
+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'
+    | 'SET_MEETING_DETAILS'
+    | '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'
+    | 'GET_MEETING_PHRASE'
+    | 'MUTE_PSTN'
+    | 'FULL_SCREEN';
+  [LogSource.NetworkRest]:
+    | 'idp_login'
+    | 'token_login'
+    | 'unauth_login'
+    | 'idp_logout'
+    | 'token_logout'
+    | 'token_refresh'
+    | 'user_details'
+    | 'createChannel'
+    | 'joinChannel'
+    | 'channel_join_request'
+    | 'channel_join_approval'
+    | 'stt'
+    | 'whiteboard_get_s3_signed_url'
+    | 'whiteboard_get_s3_upload_url'
+    | 'whiteboard_s3_upload'
+    | 'whiteboard_fileconvert'
+    | 'whiteboard_screenshot'
+    | '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;
+  private _customLogger: CustomLogger;
+  private _session;
+  constructor(_transportLogger?: any) {
+    this._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'];
+    let roomInfo = {
+      meeting_title: '',
+      channel_id: '',
+      host_id: '',
+      attendee_id: '',
+      user_id: '',
+    };
+    const logger =
+      (status: StatusType) =>
+      <T extends LogSource>(
+        source: T,
+        type: LogType[T],
+        logMessage: string,
+        ...data: any[]
+      ) => {
+        if (!$config.LOG_ENABLED) {
+          return;
+        }
+        if (type === 'SET_MEETING_DETAILS') {
+          roomInfo = {...data[0]};
+        }
+        let columns = {
+          timestamp: Date.now(),
+          source,
+          type,
+          platform,
+          user_id: roomInfo?.user_id,
+          app_builder_session_id: this._session,
+          channel_id: roomInfo?.channel_id,
+          host_id: roomInfo?.host_id,
+          attendee_id: roomInfo?.attendee_id,
+        };
+
+        const contextInfo = {
+          agora_sdk_version: {
+            rtm: rtmPkg,
+            rtc: rtcPkg,
+          },
+          appbuilder_version: {
+            cli: cli_version,
+            core: core_version,
+          },
+          meeting_title: roomInfo?.meeting_title,
+        };
+
+        if (isWebInternal() && window) {
+          //@ts-ignore
+          window.APP_BUILDER = {
+            //need to store CORE version and CLI version
+            app_id: $config.APP_ID,
+            project_id: $config.PROJECT_ID,
+            user_id: roomInfo?.user_id,
+            session_id: this._session,
+            channel_id: roomInfo?.channel_id,
+            host_id: roomInfo?.host_id,
+            attendee_id: roomInfo?.attendee_id,
+            contextInfo: contextInfo,
+          };
+        }
+
+        try {
+          if (ENABLE_CUSTOMER_LOGGER_TRANSPORT) {
+            if (this._customLogger) {
+              this._customLogger(
+                logMessage,
+                status,
+                columns,
+                contextInfo,
+                data,
+              );
+            } else if (_transportLogger) {
+              if (type === 'recording_stop') {
+                sendLogs([
+                  {
+                    _time: Date.now(),
+                    projectId: $config.PROJECT_ID,
+                    appId: $config.APP_ID,
+                    service: 'app-builder-core-frontend-customer',
+                    logType: status,
+                    logMessage: logMessage,
+                    ...columns,
+                    contextInfo,
+                    logContent: data,
+                  },
+                ]);
+              } else {
+                _transportLogger(
+                  logMessage,
+                  status,
+                  columns,
+                  contextInfo,
+                  data,
+                );
+              }
+            }
+          }
+          if (ENABLE_AGORA_LOGGER_TRANSPORT && _transportLogger) {
+            _transportLogger(logMessage, status, columns, contextInfo, data);
+          }
+        } 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,
+            {...columns, contextInfo, logContent: data},
+            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',
+      configJSON,
+    );
+  }
+
+  getSessionId = () => {
+    return this._session;
+  };
+
+  setCustomLogger = (_customLogger: CustomLogger) => {
+    this._customLogger = _customLogger;
+    _customLogger(
+      'App intitialized with config.json',
+      'debug',
+      {},
+      {},
+      {
+        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 =
+  $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,64 @@
+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(
+    'pub5b520008af91c772f322121cb2adc81c',
+    'none',
+    'fc33ae27-6fd6-4c7b-94c6-c2c11b9f565e', // application ID
+    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-nativev2';
+
+  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 (
+    logMessage: string,
+    logType: StatusType,
+    columns: Object,
+    contextInfo: Object,
+    logContent: Object,
+  ) => {
+    if (logType === 'error') {
+      DdLogs.error(logMessage, {...columns, contextInfo, logContent});
+    } else {
+      DdLogs.debug(logMessage, {...columns, contextInfo, logContent});
+    }
+  };
+};
+
+export {DatadogProvider, getTransportLogger, getConfig};

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

@@ -0,0 +1,36 @@
+import {StatusType, datadogLogs} from '@datadog/browser-logs';
+
+const DATADOG_CLIENT_TOKEN = 'pubad10d7feb87f0b039c267e69b46ee84e';
+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-frontendv2',
+    env: 'none',
+  });
+};
+
+export const getTransportLogger = () => {
+  return (
+    logMessage: string,
+    logType: StatusType,
+    columns: Object,
+    contextInfo: Object,
+    logContent: any[],
+  ) => {
+    datadogLogs.logger.log(
+      logMessage,
+      {...columns, logMessage, logType, contextInfo, logContent},
+      logType,
+      logType === 'error'
+        ? logContent?.length
+          ? logContent[0]
+          : undefined
+        : undefined,
+    );
+  };
+};

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

@@ -0,0 +1,162 @@
+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 seen = new WeakSet();
+  return (key, value) => {
+    if (typeof value === 'object' && value !== null) {
+      if (seen.has(value)) {
+        return;
+      }
+      seen.add(value);
+    }
+    return value;
+  };
+  // 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;
+  // };
+}
+
+function getTopLevels(obj, level = 1, maxLevel = 4) {
+  if (level > maxLevel || typeof obj !== 'object' || obj === null) {
+    return ['MaxLevelExceeds'];
+  }
+  const result = {};
+  for (const key in obj) {
+    if (obj.hasOwnProperty(key)) {
+      if (typeof obj[key] === 'object' && obj[key] !== null) {
+        if (key === 'logContent') {
+          result[key] = [obj[key]];
+        } else {
+          result[key] = getTopLevels(obj[key], level + 1, maxLevel);
+        }
+      } else {
+        result[key] = obj[key];
+      }
+    }
+  }
+  return result;
+}
+
+const getSafeBody = (p: any[]) => {
+  try {
+    const logResult = [];
+    for (let index = 0; index < p.length; index++) {
+      const element = p[index];
+      logResult.push(getTopLevels(element));
+    }
+    return JSON.stringify(logResult);
+  } catch (error) {
+    console.error('there was an error converting this object', error, p);
+    return ['object convertion error'];
+  }
+};
+
+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;
+    }
+  },
+});
+
+export const sendLogs = (p: any[]) => {
+  if (p && p?.length) {
+    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);
+    });
+  } else {
+    console.log('queue is empty, no logs available to send');
+  }
+};
+
+export const createAxiomLogger = () => {
+  const queue: any[] = [];
+  let batchId = 0;
+  let timeout: number | null = null;
+
+  const sendInterval = 30000; // 30s
+
+  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 >= 500) {
+      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 = (logMessage, logType, columns, contextInfo, logContent) => {
+    log({
+      _time: Date.now(),
+      projectId: $config.PROJECT_ID,
+      appId: $config.APP_ID,
+      service: 'app-builder-core-frontend-customer',
+      logType,
+      logMessage,
+      logContent: getTopLevels(logContent),
+      contextInfo,
+      ...columns,
+    });
+
+    isWeb() &&
+      window.addEventListener('beforeunload', () => {
+        flush();
+      });
+  };
+  return printLogs;
+};