@luciq/react-native 18.0.0

package/src/modules/NetworkLogger.ts

@@ -0,0 +1,270 @@
+import type { RequestHandler } from '@apollo/client';
+
+import LuciqConstants from '../utils/LuciqConstants';
+import xhr, { NetworkData, ProgressCallback } from '../utils/XhrNetworkInterceptor';
+import { LuciqRNConfig } from '../utils/config';
+import { Logger } from '../utils/logger';
+import { NativeLuciq } from '../native/NativeLuciq';
+import {
+  isContentTypeNotAllowed,
+  registerFilteringAndObfuscationListener,
+  registerFilteringListener,
+  registerObfuscationListener,
+  reportNetworkLog,
+} from '../utils/LuciqUtils';
+import {
+  NativeNetworkLogger,
+  NativeNetworkLoggerEvent,
+  NetworkListenerType,
+  NetworkLoggerEmitter,
+} from '../native/NativeNetworkLogger';
+import { Platform } from 'react-native';
+
+export type { NetworkData };
+
+export type NetworkDataObfuscationHandler = (data: NetworkData) => Promise<NetworkData>;
+let _networkDataObfuscationHandler: NetworkDataObfuscationHandler | null | undefined;
+let _requestFilterExpression = 'false';
+let _isNativeInterceptionEnabled = false;
+let _networkListener: NetworkListenerType | null = null;
+let hasFilterExpression = false;
+
+function getPortFromUrl(url: string) {
+  const portMatch = url.match(/:(\d+)(?=\/|$)/);
+  return portMatch ? portMatch[1] : null;
+}
+
+/**
+ * Sets whether network logs should be sent with bug reports.
+ * It is enabled by default.
+ * @param isEnabled
+ */
+export const setEnabled = (isEnabled: boolean) => {
+  if (isEnabled) {
+    xhr.enableInterception();
+    xhr.setOnDoneCallback(async (network) => {
+      // eslint-disable-next-line no-new-func
+      const predicate = Function('network', 'return ' + _requestFilterExpression);
+
+      if (!predicate(network)) {
+        const MAX_NETWORK_BODY_SIZE_IN_BYTES = await NativeLuciq.getNetworkBodyMaxSize();
+        try {
+          if (_networkDataObfuscationHandler) {
+            network = await _networkDataObfuscationHandler(network);
+          }
+
+          if (__DEV__) {
+            const urlPort = getPortFromUrl(network.url);
+            if (urlPort === LuciqRNConfig.metroDevServerPort) {
+              return;
+            }
+          }
+          if (network.requestBodySize > MAX_NETWORK_BODY_SIZE_IN_BYTES) {
+            network.requestBody = `${LuciqConstants.MAX_REQUEST_BODY_SIZE_EXCEEDED_MESSAGE}${
+              MAX_NETWORK_BODY_SIZE_IN_BYTES / 1024
+            } Kb`;
+            Logger.warn(
+              'LCQ-RN:',
+              `${LuciqConstants.MAX_REQUEST_BODY_SIZE_EXCEEDED_MESSAGE}${
+                MAX_NETWORK_BODY_SIZE_IN_BYTES / 1024
+              } Kb`,
+            );
+          }
+
+          if (network.responseBodySize > MAX_NETWORK_BODY_SIZE_IN_BYTES) {
+            network.responseBody = `${LuciqConstants.MAX_RESPONSE_BODY_SIZE_EXCEEDED_MESSAGE}${
+              MAX_NETWORK_BODY_SIZE_IN_BYTES / 1024
+            } Kb`;
+            Logger.warn(
+              'LCQ-RN:',
+              `${LuciqConstants.MAX_RESPONSE_BODY_SIZE_EXCEEDED_MESSAGE}${
+                MAX_NETWORK_BODY_SIZE_IN_BYTES / 1024
+              } Kb`,
+            );
+          }
+
+          if (network.requestBody && isContentTypeNotAllowed(network.requestContentType)) {
+            network.requestBody = `Body is omitted because content type ${network.requestContentType} isn't supported`;
+            Logger.warn(
+              `LCQ-RN: The request body for the network request with URL ${network.url} has been omitted because the content type ${network.requestContentType} isn't supported.`,
+            );
+          }
+
+          if (network.responseBody && isContentTypeNotAllowed(network.contentType)) {
+            network.responseBody = `Body is omitted because content type ${network.contentType} isn't supported`;
+            Logger.warn(
+              `LCQ-RN: The response body for the network request with URL ${network.url} has been omitted because the content type ${network.contentType} isn't supported.`,
+            );
+          }
+
+          reportNetworkLog(network);
+        } catch (e) {
+          Logger.error(e);
+        }
+      }
+    });
+  } else {
+    xhr.disableInterception();
+  }
+};
+
+/**
+ * @internal
+ * Sets whether enabling or disabling native network interception.
+ * It is disabled by default.
+ * @param isEnabled
+ */
+export const setNativeInterceptionEnabled = (isEnabled: boolean) => {
+  _isNativeInterceptionEnabled = isEnabled;
+};
+
+export const getNetworkDataObfuscationHandler = () => _networkDataObfuscationHandler;
+
+export const getRequestFilterExpression = () => _requestFilterExpression;
+
+export const hasRequestFilterExpression = () => hasFilterExpression;
+
+/**
+ * Obfuscates any response data.
+ * @param handler
+ */
+export const setNetworkDataObfuscationHandler = (
+  handler?: NetworkDataObfuscationHandler | null | undefined,
+) => {
+  _networkDataObfuscationHandler = handler;
+  if (_isNativeInterceptionEnabled && Platform.OS === 'ios') {
+    if (hasFilterExpression) {
+      registerFilteringAndObfuscationListener(_requestFilterExpression);
+    } else {
+      registerObfuscationListener();
+    }
+  }
+};
+
+/**
+ * Omit requests from being logged based on either their request or response details
+ * @param expression
+ */
+export const setRequestFilterExpression = (expression: string) => {
+  _requestFilterExpression = expression;
+  hasFilterExpression = true;
+
+  if (_isNativeInterceptionEnabled && Platform.OS === 'ios') {
+    if (_networkDataObfuscationHandler) {
+      registerFilteringAndObfuscationListener(_requestFilterExpression);
+    } else {
+      registerFilteringListener(_requestFilterExpression);
+    }
+  }
+};
+
+/**
+ * Returns progress in terms of totalBytesSent and totalBytesExpectedToSend a network request.
+ * @param handler
+ */
+export const setProgressHandlerForRequest = (handler: ProgressCallback) => {
+  xhr.setOnProgressCallback(handler);
+};
+
+export const apolloLinkRequestHandler: RequestHandler = (operation, forward) => {
+  try {
+    operation.setContext((context: Record<string, any>) => {
+      const newHeaders: Record<string, any> = context.headers ?? {};
+      newHeaders[LuciqConstants.GRAPHQL_HEADER] = operation.operationName;
+      return { headers: newHeaders };
+    });
+  } catch (e) {
+    Logger.error(e);
+  }
+
+  return forward(operation);
+};
+
+/**
+ * Sets whether network body logs will be captured or not.
+ * @param isEnabled
+ */
+export const setNetworkLogBodyEnabled = (isEnabled: boolean) => {
+  NativeLuciq.setNetworkLogBodyEnabled(isEnabled);
+};
+
+/**
+ * @internal
+ * Exported for internal/testing purposes only.
+ */
+export const resetNetworkListener = () => {
+  if (process.env.NODE_ENV === 'test') {
+    _networkListener = null;
+    NativeNetworkLogger.resetNetworkLogsListener();
+  } else {
+    Logger.error(
+      `${LuciqConstants.LCQ_APM_TAG}: The \`resetNetworkListener()\` method is intended solely for testing purposes.`,
+    );
+  }
+};
+
+/**
+ * @internal
+ * Exported for internal/testing purposes only.
+ */
+export const registerNetworkLogsListener = (
+  type: NetworkListenerType,
+  handler?: (networkSnapshot: NetworkData) => void,
+) => {
+  if (Platform.OS === 'ios') {
+    // remove old listeners
+    if (NetworkLoggerEmitter.listenerCount(NativeNetworkLoggerEvent.NETWORK_LOGGER_HANDLER) > 0) {
+      NetworkLoggerEmitter.removeAllListeners(NativeNetworkLoggerEvent.NETWORK_LOGGER_HANDLER);
+    }
+
+    if (_networkListener == null) {
+      // set new listener.
+      _networkListener = type;
+    } else {
+      // attach a new listener to the existing one.
+      _networkListener = NetworkListenerType.both;
+    }
+  }
+
+  NetworkLoggerEmitter.addListener(
+    NativeNetworkLoggerEvent.NETWORK_LOGGER_HANDLER,
+    (networkSnapshot) => {
+      // Mapping the data [Native -> React-Native].
+      const { id, url, requestHeader, requestBody, responseHeader, response, responseCode } =
+        networkSnapshot;
+
+      const networkSnapshotObj: NetworkData = {
+        id: id,
+        url: url,
+        requestBody: requestBody,
+        requestHeaders: requestHeader,
+        method: '',
+        responseBody: response,
+        responseCode: responseCode,
+        responseHeaders: responseHeader,
+        contentType: '',
+        duration: 0,
+        requestBodySize: 0,
+        responseBodySize: 0,
+        errorDomain: '',
+        errorCode: 0,
+        startTime: 0,
+        serverErrorMessage: '',
+        requestContentType: '',
+        isW3cHeaderFound: true,
+        networkStartTimeInSeconds: 0,
+        partialId: 0,
+        w3cCaughtHeader: '',
+        w3cGeneratedHeader: '',
+      };
+      if (handler) {
+        handler(networkSnapshotObj);
+      }
+    },
+  );
+  if (Platform.OS === 'ios') {
+    NativeNetworkLogger.registerNetworkLogsListener(_networkListener ?? NetworkListenerType.both);
+  } else {
+    NativeNetworkLogger.registerNetworkLogsListener();
+  }
+};

package/src/modules/Replies.ts

@@ -0,0 +1,137 @@
+import { Platform } from 'react-native';
+
+import { NativeEvents, NativeReplies, emitter } from '../native/NativeReplies';
+
+/**
+ * Enables and disables everything related to receiving replies.
+ * @param isEnabled
+ */
+export const setEnabled = (isEnabled: boolean) => {
+  NativeReplies.setEnabled(isEnabled);
+};
+
+/**
+ * Tells whether the user has chats already or not.
+ */
+export const hasChats = async (): Promise<boolean> => {
+  const result = await NativeReplies.hasChats();
+
+  return result;
+};
+
+/**
+ * Manual invocation for replies.
+ */
+export const show = () => {
+  NativeReplies.show();
+};
+
+/**
+ * Sets a block of code that gets executed when a new message is received.
+ * @param handler A callback that gets executed when a new message is received.
+ */
+export const setOnNewReplyReceivedHandler = (handler: () => void) => {
+  emitter.addListener(NativeEvents.ON_REPLY_RECEIVED_HANDLER, handler);
+  NativeReplies.setOnNewReplyReceivedHandler(handler);
+};
+
+/**
+ * Returns the number of unread messages the user currently has.
+ * Use this method to get the number of unread messages the user
+ * has, then possibly notify them about it with your own UI.
+ * Notifications count, or -1 in case the SDK has not been initialized.
+ */
+export const getUnreadRepliesCount = async (): Promise<number> => {
+  const count = await NativeReplies.getUnreadRepliesCount();
+
+  return count;
+};
+
+/**
+ * Enables/disables showing in-app notifications when the user receives a
+ * new message.
+ * @param isEnabled A boolean to set whether
+ * notifications are enabled or disabled.
+ */
+export const setInAppNotificationsEnabled = (isEnabled: boolean) => {
+  NativeReplies.setInAppNotificationEnabled(isEnabled);
+};
+
+/**
+ * Set whether new in app notification received will play a small sound notification
+ * or not (Default is {@code false})
+ * @android
+ *
+ * @param isEnabled desired state of conversation sounds
+ */
+export const setInAppNotificationSound = (isEnabled: boolean) => {
+  if (Platform.OS === 'android') {
+    NativeReplies.setInAppNotificationSound(isEnabled);
+  }
+};
+
+/**
+ * Enables/disables the use of push notifications in the SDK.
+ * Defaults to YES.
+ * @param isEnabled A boolean to indicate whether push notifications are enabled or disabled.
+ */
+export const setPushNotificationsEnabled = (isEnabled: boolean) => {
+  NativeReplies.setPushNotificationsEnabled(isEnabled);
+};
+
+/**
+ * Set the GCM registration token to Luciq
+ *
+ * @param token the GCM registration token
+ */
+export const setPushNotificationRegistrationTokenAndroid = (token: string) => {
+  if (Platform.OS === 'android') {
+    NativeReplies.setPushNotificationRegistrationToken(token);
+  }
+};
+
+/**
+ * Show in-app Messaging's notifications
+ *
+ * @param data the data bundle related to Luciq
+ */
+export const showNotificationAndroid = (data: Record<string, string>) => {
+  if (Platform.OS === 'android') {
+    NativeReplies.showNotification(data);
+  }
+};
+
+/**
+ * Set the push notification's icon that will be shown with Luciq notifications
+ *
+ * @param resourceId the notification icon resource ID
+ */
+export const setNotificationIconAndroid = (resourceId: number) => {
+  if (Platform.OS === 'android') {
+    NativeReplies.setNotificationIcon(resourceId);
+  }
+};
+
+/**
+ * Set a notification channel id to a notification channel that notifications
+ * can be posted to.
+ *
+ * @param id an id to a notification channel that notifications
+ */
+export const setPushNotificationChannelIdAndroid = (id: string) => {
+  if (Platform.OS === 'android') {
+    NativeReplies.setPushNotificationChannelId(id);
+  }
+};
+
+/**
+ * Set whether new system notification received will play the default sound from
+ * RingtoneManager or not (Default is {@code false})
+ *
+ * @param isEnabled desired state of conversation sounds
+ */
+export const setSystemReplyNotificationSoundEnabledAndroid = (isEnabled: boolean) => {
+  if (Platform.OS === 'android') {
+    NativeReplies.setSystemReplyNotificationSoundEnabled(isEnabled);
+  }
+};

package/src/modules/SessionReplay.ts

@@ -0,0 +1,111 @@
+import { NativeSessionReplay, NativeEvents, emitter } from '../native/NativeSessionReplay';
+import type { SessionMetadata } from '../models/SessionMetadata';
+/**
+ * Enables or disables Session Replay for your Luciq integration.
+ *
+ * By default, Session Replay is enabled if it is available in your current plan
+ *
+ * @param isEnabled
+ *
+ * @example
+ * ```ts
+ * SessionReplay.setEnabled(true);
+ * ```
+ */
+export const setEnabled = (isEnabled: boolean) => {
+  NativeSessionReplay.setEnabled(isEnabled);
+};
+
+/**
+ * Enables or disables network logs for Session Replay.
+ *
+ * By default, network logs are enabled.
+ *
+ * @param isEnabled
+ *
+ * @example
+ * ```ts
+ * SessionReplay.setNetworkLogsEnabled(true);
+ * ```
+ */
+export const setNetworkLogsEnabled = (isEnabled: boolean) => {
+  NativeSessionReplay.setNetworkLogsEnabled(isEnabled);
+};
+
+/**
+ * Enables or disables Luciq logs for Session Replay.
+ *
+ * By default, Luciq logs are enabled.
+ *
+ * @param isEnabled
+ *
+ * @example
+ * ```ts
+ * SessionReplay.setLuciqLogsEnabled(true);
+ * ```
+ */
+export const setLuciqLogsEnabled = (isEnabled: boolean) => {
+  NativeSessionReplay.setLuciqLogsEnabled(isEnabled);
+};
+
+/**
+ * Enables or disables capturing of user steps  for Session Replay.
+ *
+ * By default, user steps are enabled.
+ *
+ * @param isEnabled
+ *
+ * @example
+ * ```ts
+ * SessionReplay.setUserStepsEnabled(true);
+ * ```
+ */
+export const setUserStepsEnabled = (isEnabled: boolean) => {
+  NativeSessionReplay.setUserStepsEnabled(isEnabled);
+};
+
+/**
+ * Retrieves current session's replay link.
+ *
+ * @example
+ * ```ts
+ * SessionReplay.getSessionReplayLink();
+ * ```
+ */
+export const getSessionReplayLink = async (): Promise<string> => {
+  return NativeSessionReplay.getSessionReplayLink();
+};
+
+/**
+ * Set a callback for whether this session should sync
+ *
+ * @param handler
+
+ * @example
+ * ```ts
+ * SessionReplay.setSyncCallback((metadata) => {
+ *    return metadata.device == "Xiaomi M2007J3SY" &&
+ *         metadata.os == "OS Level 33" &&
+ *         metadata.appVersion == "3.1.4 (4)" ||
+ *         metadata.sessionDurationInSeconds > 20;
+ * });
+ * ```
+ */
+export const setSyncCallback = async (
+  handler: (payload: SessionMetadata) => boolean,
+): Promise<void> => {
+  emitter.addListener(NativeEvents.SESSION_REPLAY_ON_SYNC_CALLBACK_INVOCATION, (payload) => {
+    const result = handler(payload);
+    const shouldSync = Boolean(result);
+
+    if (typeof result !== 'boolean') {
+      console.warn(
+        `LCQ-RN: The callback passed to SessionReplay.setSyncCallback was expected to return a boolean but returned "${result}". The value has been cast to boolean, proceeding with ${shouldSync}.`,
+      );
+    }
+
+    NativeSessionReplay.evaluateSync(shouldSync);
+  });
+
+  return NativeSessionReplay.setSyncCallback();
+};

package/src/modules/Surveys.ts

@@ -0,0 +1,118 @@
+import { Platform } from 'react-native';
+
+import { NativeEvents, NativeSurveys, emitter } from '../native/NativeSurveys';
+import type { Survey } from '../native/NativeSurveys';
+
+export type { Survey };
+
+/**
+ * Sets whether surveys are enabled or not.
+ * If you disable surveys on the SDK but still have active surveys on your Luciq dashboard,
+ * those surveys are still going to be sent to the device, but are not going to be
+ * shown automatically.
+ * To manually display any available surveys, call `Luciq.showSurveyIfAvailable()`.
+ * Defaults to `true`.
+ * @param isEnabled A boolean to set whether Luciq Surveys is enabled or disabled.
+ */
+export const setEnabled = (isEnabled: boolean) => {
+  NativeSurveys.setEnabled(isEnabled);
+};
+
+/**
+ * Shows one of the surveys that were not shown before, that also have conditions
+ * that match the current device/user.
+ * Does nothing if there are no available surveys or if a survey has already been shown
+ * in the current session.
+ */
+export const showSurveyIfAvailable = () => {
+  NativeSurveys.showSurveysIfAvailable();
+};
+
+/**
+ * Returns an array containing the available surveys.
+ */
+export const getAvailableSurveys = async (): Promise<Survey[] | null> => {
+  const surveys = await NativeSurveys.getAvailableSurveys();
+
+  return surveys;
+};
+
+/**
+ * Sets whether auto surveys showing are enabled or not.
+ * @param autoShowingSurveysEnabled A boolean to indicate whether the
+ *                                surveys auto showing are enabled or not.
+ */
+export const setAutoShowingEnabled = (autoShowingSurveysEnabled: boolean) => {
+  NativeSurveys.setAutoShowingEnabled(autoShowingSurveysEnabled);
+};
+
+/**
+ * Sets a block of code to be executed just before the survey's UI is presented.
+ * This block is executed on the UI thread. Could be used for performing any UI changes before
+ * the survey's UI is shown.
+ * @param onShowHandler - A block of code that gets executed before
+ * presenting the survey's UI.
+ */
+export const setOnShowHandler = (onShowHandler: () => void) => {
+  emitter.addListener(NativeEvents.WILL_SHOW_SURVEY_HANDLER, onShowHandler);
+  NativeSurveys.setOnShowHandler(onShowHandler);
+};
+
+/**
+ * Sets a block of code to be executed right after the survey's UI is dismissed.
+ * This block is executed on the UI thread. Could be used for performing any UI
+ * changes after the survey's UI is dismissed.
+ * @param onDismissHandler - A block of code that gets executed after
+ * the survey's UI is dismissed.
+ */
+export const setOnDismissHandler = (onDismissHandler: () => void) => {
+  emitter.addListener(NativeEvents.DID_DISMISS_SURVEY_HANDLER, onDismissHandler);
+  NativeSurveys.setOnDismissHandler(onDismissHandler);
+};
+
+/**
+ * Shows survey with a specific token.
+ * Does nothing if there are no available surveys with that specific token.
+ * Answered and cancelled surveys won't show up again.
+ * @param surveyToken - A String with a survey token.
+ *
+ */
+export const showSurvey = (surveyToken: string) => {
+  NativeSurveys.showSurvey(surveyToken);
+};
+
+/**
+ * Returns true if the survey with a specific token was answered before.
+ * Will return false if the token does not exist or if the survey was not answered before.
+ * @param surveyToken - A String with a survey token.
+ * the survey has been responded to or not.
+ *
+ */
+export const hasRespondedToSurvey = async (surveyToken: string): Promise<boolean | null> => {
+  const hasResponded = await NativeSurveys.hasRespondedToSurvey(surveyToken);
+
+  return hasResponded;
+};
+
+/**
+ * Setting an option for all the surveys to show a welcome screen before
+ * the user starts taking the survey.
+ * @param shouldShowWelcomeScreen A boolean for setting whether the
+ *                                welcome screen should show.
+ */
+export const setShouldShowWelcomeScreen = (shouldShowWelcomeScreen: boolean) => {
+  NativeSurveys.setShouldShowWelcomeScreen(shouldShowWelcomeScreen);
+};
+
+/**
+ * iOS Only
+ * Sets url for the published iOS app on AppStore, You can redirect
+ * NPS Surveys or AppRating Surveys to AppStore to let users rate your app on AppStore itself.
+ * @param appStoreURL A String url for the published iOS app on AppStore
+ */
+
+export const setAppStoreURL = (appStoreURL: string) => {
+  if (Platform.OS === 'ios') {
+    NativeSurveys.setAppStoreURL(appStoreURL);
+  }
+};

package/src/native/NativeAPM.ts

@@ -0,0 +1,51 @@
+import type { NativeModule } from 'react-native';
+import { NativeEventEmitter } from 'react-native';
+
+import type { W3cExternalTraceAttributes } from '../models/W3cExternalTraceAttributes';
+import { NativeModules } from './NativePackage';
+
+export interface ApmNativeModule extends NativeModule {
+  // Essential APIs //
+  setEnabled(isEnabled: boolean): void;
+
+  // Network APIs //
+  networkLogAndroid(
+    requestStartTime: number,
+    requestDuration: number,
+    requestHeaders: string,
+    requestBody: string,
+    requestBodySize: number,
+    requestMethod: string,
+    requestUrl: string,
+    requestContentType: string,
+    responseHeaders: string,
+    responseBody: string | null,
+    responseBodySize: number,
+    statusCode: number,
+    responseContentType: string,
+    errorDomain: string,
+    w3cExternalTraceAttributes: W3cExternalTraceAttributes,
+    gqlQueryName?: string,
+    serverErrorMessage?: string,
+  ): void;
+
+  // App Launches APIs //
+  setAppLaunchEnabled(isEnabled: boolean): void;
+  endAppLaunch(): void;
+
+  // Execution Traces APIs //
+  // App Flows APIs //
+  startFlow(name: string): void;
+  endFlow(name: string): void;
+  setFlowAttribute(name: string, key: string, value?: string | null): void;
+
+  // UI Traces APIs //
+  setAutoUITraceEnabled(isEnabled: boolean): void;
+  startUITrace(name: string): void;
+  endUITrace(): void;
+  lcqSleep(): void;
+}
+
+export const NativeAPM = NativeModules.LCQAPM;
+
+export const emitter = new NativeEventEmitter(NativeAPM);