@truewatchtech/react-native-mobile 0.4.1 → 0.4.3-alpha.2

package/src/ft_tracing.tsx

@@ -1,6 +1,8 @@
 // import { NativeModules } from 'react-native';
 //FTReactNativeTrace
 
+import { FTRumWebSocketTracking } from './rum/FTRumWebSocketTracking';
+
 /**
  * Trace types for use.
  */
@@ -68,13 +70,25 @@ type FTReactNativeTraceType = {
 };
 
 class FTReactNativeTraceWrapper implements FTReactNativeTraceType {
+  private webSocketConfigVersion = 0;
   /* eslint-disable @typescript-eslint/no-var-requires */
   private trace: FTReactNativeTraceType =
     require('./specs/NativeFTReactNativeTrace').default;
   /* eslint-enable @typescript-eslint/no-var-requires */
 
   setConfig(config: FTTraceConfig): Promise<void> {
-    return this.trace.setConfig(config);
+    const webSocketLifecycle = FTRumWebSocketTracking.getLifecycleVersion();
+    const webSocketConfigVersion = ++this.webSocketConfigVersion;
+    const traceWebSocket = config.enableNativeAutoTrace === true;
+    return this.trace.setConfig(config).then(() => {
+      if (
+        webSocketLifecycle !== FTRumWebSocketTracking.getLifecycleVersion() ||
+        webSocketConfigVersion !== this.webSocketConfigVersion
+      ) {
+        return;
+      }
+      FTRumWebSocketTracking.setNativeAutoTraceEnabled(traceWebSocket);
+    });
   }
   /**
    * Get trace HTTP request header data.

package/src/index.tsx

@@ -28,6 +28,8 @@ import {
 import { FTTraceConfig, FTReactNativeTrace, TraceType } from './ft_tracing';
 import { FTRumActionTracking } from './rum/FTRumActionTracking';
 import { FTRumErrorTracking } from './rum/FTRumErrorTracking';
+import { FTBabelInteractionTracking } from './rum/FTBabelInteractionTracking';
+import { __ftExtractText } from './rum/FTBabelUtils';
 
 export {
   FTMobileReactNative,
@@ -56,4 +58,6 @@ export {
   TraceType,
   FTRumActionTracking,
   FTRumErrorTracking,
+  FTBabelInteractionTracking,
+  __ftExtractText,
 };

package/src/rum/FTBabelInteractionTracking.ts

@@ -0,0 +1,124 @@
+import { resolveActionTrackingContext } from './FTRumActionTrackingContext';
+
+declare global {
+  // eslint-disable-next-line no-var
+  var __FT_RN_BABEL_PLUGIN_ENABLED__: boolean | undefined;
+}
+
+export type FTBabelActionTarget = {
+  'options': {
+    useContent: boolean;
+    useNamePrefix: boolean;
+  };
+  'handlerArgs'?: unknown[];
+  'componentName': string;
+  'getContent'?: () => string[];
+  'ft-action-name'?: string[];
+  'customActionName'?: string[];
+  'accessibilityLabel'?: string[];
+};
+
+type ActionReporter = (
+  actionName: string,
+  actionType: string,
+  property?: object
+) => Promise<void>;
+
+type BabelTrackingConfig = {
+  trackInteractions: boolean;
+  actionReporter?: ActionReporter;
+};
+
+const DEFAULT_ACTION_TYPE = 'click';
+
+const normalize = (value: string): string => value.replace(/\s+/g, ' ').trim();
+
+const normalizeActionType = (value: unknown): string =>
+  typeof value === 'string' && value.trim()
+    ? value.trim()
+    : DEFAULT_ACTION_TYPE;
+
+const nonEmpty = (values: string[] | undefined): string[] | null => {
+  if (!values) {
+    return null;
+  }
+  const normalized = values.map(normalize).filter(Boolean);
+  return normalized.length > 0 ? normalized : null;
+};
+
+class BabelInteractionTracking {
+  private trackInteractions = false;
+  private actionReporter: ActionReporter | undefined;
+
+  getInstance(): BabelInteractionTracking {
+    return this;
+  }
+
+  configure(config: BabelTrackingConfig): void {
+    this.trackInteractions = config.trackInteractions;
+    this.actionReporter = config.actionReporter;
+  }
+
+  getTargetName(target: FTBabelActionTarget): string {
+    let selectedContent = nonEmpty(target['ft-action-name']);
+    selectedContent ||= nonEmpty(target.customActionName);
+    selectedContent ||= nonEmpty(target.accessibilityLabel);
+    if (!selectedContent && target.options.useContent) {
+      selectedContent = nonEmpty(target.getContent?.());
+    }
+
+    if (!selectedContent) {
+      return target.componentName;
+    }
+
+    const handlerArgs = target.handlerArgs || [];
+    const numericArgument = handlerArgs.find(
+      (value) => typeof value === 'number'
+    ) as number | undefined;
+    const index =
+      numericArgument !== undefined &&
+      Number.isInteger(numericArgument) &&
+      numericArgument >= 0 &&
+      numericArgument < selectedContent.length
+        ? numericArgument
+        : 0;
+    const output = selectedContent[index] || selectedContent[0];
+
+    return target.options.useNamePrefix
+      ? `${target.componentName} ("${output}")`
+      : output;
+  }
+
+  wrapRumAction(
+    handler: ((...args: any[]) => any) | null | undefined,
+    actionType: string,
+    target: FTBabelActionTarget
+  ): (...args: any[]) => any {
+    const normalizedActionType = normalizeActionType(actionType);
+    return (...args: any[]) => {
+      try {
+        if (this.trackInteractions && this.actionReporter) {
+          const context = resolveActionTrackingContext(args);
+          if (context.enabled) {
+            const actionName = this.getTargetName({
+              ...target,
+              handlerArgs: args,
+            });
+            Promise.resolve(
+              this.actionReporter(
+                actionName,
+                normalizedActionType,
+                context.property
+              )
+            ).catch(() => undefined);
+          }
+        }
+      } catch (_error) {
+        // Tracking must never block the application's original handler.
+      }
+      return handler?.(...args);
+    };
+  }
+}
+
+export const FTBabelInteractionTracking = new BabelInteractionTracking();

package/src/rum/FTBabelUtils.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+
+const LABEL_PROPS = ['label', 'title', 'text'] as const;
+
+const normalize = (value: string): string => value.replace(/\s+/g, ' ').trim();
+
+function flattenText(values: unknown[]): string[] {
+  const output: string[] = [];
+  for (const value of values) {
+    for (const text of __ftExtractText(value)) {
+      output.push(text);
+    }
+  }
+  return output;
+}
+
+export function __ftExtractText(node: any, prefer?: any[]): string[] {
+  if (Array.isArray(prefer)) {
+    const preferred = flattenText(prefer);
+    if (preferred.length > 0) {
+      return preferred;
+    }
+  }
+
+  if (node == null || typeof node === 'boolean') {
+    return [];
+  }
+  if (typeof node === 'string' || typeof node === 'number') {
+    const value = normalize(String(node));
+    return value ? [value] : [];
+  }
+  if (Array.isArray(node)) {
+    return flattenText(node);
+  }
+  if (
+    typeof node === 'object' &&
+    typeof Symbol !== 'undefined' &&
+    Symbol.iterator in node
+  ) {
+    return flattenText(Array.from(node as Iterable<unknown>));
+  }
+  if (typeof node === 'function' && node.length === 0) {
+    try {
+      return __ftExtractText(node());
+    } catch (_error) {
+      return [];
+    }
+  }
+  if (!React.isValidElement(node)) {
+    return [];
+  }
+
+  const props = (node.props || {}) as Record<string, unknown>;
+  for (const propertyName of LABEL_PROPS) {
+    if (props[propertyName] != null) {
+      const label = __ftExtractText(props[propertyName]);
+      if (label.length > 0) {
+        return label;
+      }
+    }
+  }
+
+  const rawChildren = Array.isArray(props.children)
+    ? props.children
+    : [props.children];
+  const children = rawChildren.filter(
+    (child) => child != null && child !== false
+  );
+  if (children.length === 0) {
+    return [];
+  }
+
+  const perChild = children.map((child) => __ftExtractText(child));
+  let labeledChildCount = 0;
+  children.forEach((child, index) => {
+    const childProps = React.isValidElement(child)
+      ? ((child.props || {}) as Record<string, unknown>)
+      : null;
+    const hasLabelProperty =
+      childProps !== null &&
+      LABEL_PROPS.some((propertyName) => childProps[propertyName] != null);
+    if (hasLabelProperty || perChild[index].length > 0) {
+      labeledChildCount += 1;
+    }
+  });
+
+  // Each child has already been extracted and normalized. Only merge its text.
+  const flattened: string[] = [];
+  for (const values of perChild) {
+    for (const value of values) {
+      flattened.push(value);
+    }
+  }
+  if (labeledChildCount > 1) {
+    return Array.from(new Set(flattened));
+  }
+  const joined = flattened.join(' ');
+  return joined ? [joined] : [];
+}

package/src/rum/FTRumActionTracking.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { FTReactNativeRUM } from '../ft_rum';
-const FT_ENABLE_TRACK = 'ft-enable-track';
-const FT_EXTRA_PROPERTY = 'ft-extra-property';
+import { resolveActionTrackingContextFromTarget } from './FTRumActionTrackingContext';
 export class FTRumActionTracking {
   private static isTracking = false;
   private static preActionTimestamp = Number.MIN_VALUE;
@@ -34,6 +33,7 @@ export class FTRumActionTracking {
       return;
     }
     const original = React.createElement;
+    this.originalCreateElement = original;
     React.createElement = (
       ...args: Parameters<typeof React.createElement>
     ): any => {
@@ -53,6 +53,7 @@ export class FTRumActionTracking {
     }
 
     const originalMemo = React.memo;
+    this.originalMemo = originalMemo;
     React.memo = (
       component: any,
       propsAreEqual?: (prevProps: any, newProps: any) => boolean
@@ -86,6 +87,9 @@ export class FTRumActionTracking {
     FTRumActionTracking.isTracking = true;
   }
   static stopTracking() {
+    if (!FTRumActionTracking.isTracking) {
+      return;
+    }
     React.createElement = this.originalCreateElement;
     React.memo = this.originalMemo;
     FTRumActionTracking.isTracking = false;
@@ -112,26 +116,17 @@ export class FTRumActionTracking {
 
   private static handleTargetEvent(targetNode: any | null) {
     if (targetNode) {
-      const enable = FTRumActionTracking.findActionEnableTrack(targetNode);
-      if (enable) {
-        const extraProperty =
-          FTRumActionTracking.findActionProperty(targetNode);
+      const context = resolveActionTrackingContextFromTarget(targetNode);
+      if (context.enabled) {
         const elementTypeName =
           FTRumActionTracking.resolveActionName(targetNode);
         if (elementTypeName) {
-          let jsonObject = null;
-          if (extraProperty) {
-            try {
-              jsonObject = JSON.parse(extraProperty);
-            } catch (error) {
-              console.warn(
-                `Error parsing JSON string ${extraProperty}:`,
-                error
-              );
-            }
-          }
-          if (jsonObject) {
-            FTReactNativeRUM.startAction(elementTypeName, 'click', jsonObject);
+          if (context.property) {
+            FTReactNativeRUM.startAction(
+              elementTypeName,
+              'click',
+              context.property
+            );
           } else {
             FTReactNativeRUM.startAction(elementTypeName, 'click');
           }
@@ -178,30 +173,6 @@ export class FTRumActionTracking {
     }
     return null;
   }
-  private static findActionProperty(targetNode: any): string | null {
-    let currentNode = targetNode;
-    while (currentNode) {
-      const props = currentNode.memoizedProps;
-      if (props && props[FT_EXTRA_PROPERTY]) {
-        return props[FT_EXTRA_PROPERTY];
-      }
-      currentNode = currentNode.return;
-    }
-    return null;
-  }
-  private static findActionEnableTrack(targetNode: any): boolean {
-    let currentNode = targetNode;
-    let enable = true;
-    while (currentNode) {
-      const props = currentNode.memoizedProps;
-      if (props && props[FT_ENABLE_TRACK]) {
-        enable = props[FT_ENABLE_TRACK] === 'true';
-        break;
-      }
-      currentNode = currentNode.return;
-    }
-    return enable;
-  }
 }
 
 const areObjectShallowEqual = (

package/src/rum/FTRumActionTrackingContext.ts

@@ -0,0 +1,68 @@
+const FT_ENABLE_TRACK = 'ft-enable-track';
+const FT_EXTRA_PROPERTY = 'ft-extra-property';
+
+export type FTRumActionTrackingContext = {
+  enabled: boolean;
+  property?: object;
+};
+
+type FiberNode = {
+  memoizedProps?: Record<string, unknown>;
+  return?: FiberNode | null;
+};
+
+function findFiberTarget(handlerArgs: unknown[]): FiberNode | null {
+  for (const handlerArg of handlerArgs) {
+    if (
+      handlerArg &&
+      typeof handlerArg === 'object' &&
+      '_targetInst' in handlerArg
+    ) {
+      return (handlerArg as { _targetInst?: FiberNode })._targetInst || null;
+    }
+  }
+  return null;
+}
+
+function findFiberProperty(
+  targetNode: FiberNode | null,
+  propertyName: string
+): unknown {
+  let currentNode = targetNode;
+  while (currentNode) {
+    const props = currentNode.memoizedProps;
+    if (props && props[propertyName]) {
+      return props[propertyName];
+    }
+    currentNode = currentNode.return || null;
+  }
+  return undefined;
+}
+
+export function resolveActionTrackingContextFromTarget(
+  targetNode: FiberNode | null
+): FTRumActionTrackingContext {
+  const enableTrack = findFiberProperty(targetNode, FT_ENABLE_TRACK);
+  const extraProperty = findFiberProperty(targetNode, FT_EXTRA_PROPERTY);
+  const context: FTRumActionTrackingContext = {
+    enabled: enableTrack === undefined || enableTrack === 'true',
+  };
+
+  if (extraProperty !== undefined) {
+    try {
+      const parsedProperty = JSON.parse(String(extraProperty));
+      if (parsedProperty && typeof parsedProperty === 'object') {
+        context.property = parsedProperty as object;
+      }
+    } catch (error) {
+      console.warn(`Error parsing JSON string ${extraProperty}:`, error);
+    }
+  }
+  return context;
+}
+
+export function resolveActionTrackingContext(
+  handlerArgs: unknown[]
+): FTRumActionTrackingContext {
+  return resolveActionTrackingContextFromTarget(findFiberTarget(handlerArgs));
+}

package/src/rum/FTRumWebSocketNative.ts

@@ -0,0 +1,106 @@
+import NativeWebSocket from '../specs/NativeFTReactNativeWebSocket';
+import { bridgeContextManager } from '../ft_mobile_agent';
+
+export interface NativeWebSocketResource {
+  url: string;
+  httpMethod: string;
+  requestHeader: Record<string, unknown>;
+  webSocketEvent: string;
+  errorMessage?: string;
+}
+
+function ignoreBridgeFailure(call: () => unknown): void {
+  try {
+    void Promise.resolve(call()).catch(() => {});
+  } catch {
+    /* Setup/cleanup replies must not interrupt JS capture. */
+  }
+}
+
+export class NativeWebSocketSession {
+  private stopped = false;
+  private sequence = 0;
+
+  constructor(private readonly session: string) {
+    // Enqueue setup before start/stop/add on the same native module queue.
+    // Its reply never gates JS capture or selects a different reporting route.
+    ignoreBridgeFailure(() => NativeWebSocket!.startCapture(session));
+  }
+
+  startResource(
+    key: string,
+    socketID: number | undefined,
+    url: string
+  ): Promise<void> {
+    const property = bridgeContextManager.mergeWithLocalPropertiesSync();
+    return NativeWebSocket!.startResource(
+      key,
+      socketID ?? -1,
+      url,
+      this.session,
+      ++this.sequence,
+      property
+    );
+  }
+
+  stopResource(key: string, event: string): Promise<void> {
+    const property = bridgeContextManager.mergeWithLocalPropertiesSync();
+    return NativeWebSocket!.stopResource(key, event, this.session, property);
+  }
+
+  addResource(
+    key: string,
+    content: NativeWebSocketResource,
+    metrics: { duration?: number }
+  ): Promise<void> {
+    return NativeWebSocket!.addResource(key, content, metrics, this.session);
+  }
+
+  release(key: string): void {
+    ignoreBridgeFailure(() =>
+      NativeWebSocket?.releaseResource(key, this.session)
+    );
+  }
+
+  stop(): void {
+    if (this.stopped) return;
+    this.stopped = true;
+    // Existing handshakes still finish through their originally selected route.
+    ignoreBridgeFailure(() => NativeWebSocket?.stopCapture(this.session));
+  }
+}
+
+export function startNativeWebSocketSession(
+  createKey: () => string
+): NativeWebSocketSession | undefined {
+  try {
+    if (
+      typeof NativeWebSocket?.startCapture === 'function' &&
+      typeof NativeWebSocket.stopCapture === 'function' &&
+      typeof NativeWebSocket.clear === 'function' &&
+      typeof NativeWebSocket.startResource === 'function' &&
+      typeof NativeWebSocket.stopResource === 'function' &&
+      typeof NativeWebSocket.addResource === 'function' &&
+      typeof NativeWebSocket.releaseResource === 'function'
+    )
+      return new NativeWebSocketSession(createKey());
+  } catch {
+    /* Old native binaries keep the JS fallback. */
+  }
+  return undefined;
+}
+
+export function clearNativeWebSocketSessions(): void {
+  ignoreBridgeFailure(() => NativeWebSocket?.clear());
+}
+
+export function webSocketNativeID(socket: unknown): number | undefined {
+  try {
+    const id = (socket as { _socketId?: unknown })?._socketId;
+    return typeof id === 'number' && Number.isSafeInteger(id) && id >= 0
+      ? id
+      : undefined;
+  } catch {
+    return undefined;
+  }
+}

package/src/rum/FTRumWebSocketTiming.ts

@@ -0,0 +1,50 @@
+/** Measures only the JS-observed opening handshake; bridge delays are excluded. */
+export function startWebSocketTiming(): () => number | undefined {
+  const wallStart = readWallTime();
+  let monotonicNow: (() => number) | undefined;
+  let monotonicStart: number | undefined;
+  try {
+    const clock = globalThis.performance;
+    if (typeof clock?.now === 'function') {
+      monotonicNow = () => clock.now();
+      monotonicStart = monotonicNow();
+    }
+  } catch {
+    // Older runtimes and other instrumentation may not provide this clock.
+  }
+
+  return () => {
+    let durationMs: number | undefined;
+    try {
+      if (monotonicNow && Number.isFinite(monotonicStart)) {
+        const elapsed = monotonicNow() - (monotonicStart as number);
+        if (Number.isFinite(elapsed) && elapsed >= 0) {
+          durationMs = elapsed;
+        }
+      }
+    } catch {
+      // Fall back to wall time if the monotonic clock becomes unavailable.
+    }
+    if (durationMs === undefined && wallStart !== undefined) {
+      const wallEnd = readWallTime();
+      if (wallEnd !== undefined && wallEnd >= wallStart) {
+        durationMs = wallEnd - wallStart;
+      }
+    }
+    if (durationMs === undefined) {
+      return undefined;
+    }
+    // Resource metrics use nanoseconds. Do not send an invalid bridge number.
+    const durationNs = Math.round(durationMs * 1e6);
+    return Number.isSafeInteger(durationNs) ? durationNs : undefined;
+  };
+}
+
+function readWallTime(): number | undefined {
+  try {
+    const time = Date.now();
+    return Number.isFinite(time) ? time : undefined;
+  } catch {
+    return undefined;
+  }
+}