@truewatchtech/react-native-mobile 0.4.2 → 0.4.3

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/FTRumViewTracking.ts

@@ -0,0 +1,179 @@
+import { AppState } from 'react-native';
+import type { AppStateStatus } from 'react-native';
+import { FTReactNativeRUM } from '../ft_rum';
+import { bridgeContextManager } from '../ft_mobile_agent';
+import type { Spec as NativeRUMSpec } from '../specs/NativeFTReactNativeRUM';
+
+type Route = { key: string; name: string };
+type Loading = { monotonicMs: number; epochMs: number };
+const MAX_PENDING_LOAD_MS = 15 * 60 * 1000;
+
+/** Shared lifecycle coordinator for navigation adapters. Use one per navigator. */
+export class FTRumViewTracking {
+  private current?: Route;
+  private active?: { key: string; generation: number };
+  private generation = 0;
+  private lifecycle = 0;
+  private state: AppStateStatus | null = null;
+  private subscription?: { remove(): void };
+  private loading = new Map<string, Loading>();
+
+  constructor(private readonly onBackground?: () => void) {}
+
+  start(): void {
+    if (this.subscription) return;
+    this.state = AppState.currentState;
+    const lifecycle = ++this.lifecycle;
+    const listener = (state: AppStateStatus): void => {
+      if (lifecycle === this.lifecycle) this.onAppState(state);
+    };
+    const subscription = AppState.addEventListener('change', listener);
+    // RN < 0.65 uses removeEventListener instead of returning a subscription.
+    const legacyAppState = AppState as typeof AppState & {
+      removeEventListener?: (type: string, callback: typeof listener) => void;
+    };
+    this.subscription = subscription || {
+      remove: () => legacyAppState.removeEventListener?.('change', listener),
+    };
+  }
+
+  /** Capture both clocks at the loading boundary, before any async work. */
+  beginLoad(key: string): void {
+    this.start();
+    this.pruneLoading();
+    if (this.state === 'background' || this.loading.has(key)) return;
+    if (
+      typeof performance === 'undefined' ||
+      typeof performance.now !== 'function'
+    )
+      return;
+    // Only the latest transition can supply loading for this navigator.
+    this.loading.clear();
+    this.loading.set(key, {
+      monotonicMs: performance.now(),
+      epochMs: Date.now(),
+    });
+  }
+
+  /** Remember a transitioning route so foreground recovery uses the current page. */
+  setCurrent(route: Route): void {
+    this.start();
+    this.current = { key: route.key, name: route.name };
+  }
+
+  show(route: Route, loadingKey: string = route.key): number | undefined {
+    this.setCurrent(route);
+    this.pruneLoading();
+    const loading = this.loading.get(loadingKey);
+    this.loading.clear();
+    if (this.state !== 'active') return undefined;
+    if (this.active?.key === route.key) return this.active.generation;
+    this.active = { key: route.key, generation: ++this.generation };
+    if (loading) {
+      const durationNs = Math.floor(
+        (performance.now() - loading.monotonicMs) * 1000000
+      );
+      if (Number.isFinite(durationNs) && durationNs > 0) {
+        this.report(
+          this.nativeRUM.onCreateViewWithLoadStart(
+            route.name,
+            durationNs,
+            Number.isFinite(loading.epochMs) ? loading.epochMs : 0
+          )
+        );
+      }
+    }
+    // Enqueue these calls together. Waiting for a Promise here could start a stale
+    // page after background/route changes; native consumes loading before start.
+    this.report(
+      this.nativeRUM.startViewWithTrackingType(
+        route.name,
+        bridgeContextManager.mergeWithLocalPropertiesSync(),
+        1 // Automatic is an internal framework bridge detail.
+      )
+    );
+    return this.active.generation;
+  }
+
+  /** Apply a completed interval only to the appearance that started it. */
+  updateLoadingTime(
+    key: string,
+    generation: number | undefined,
+    durationNs: number
+  ): void {
+    if (
+      this.state !== 'active' ||
+      !this.active ||
+      this.active.key !== key ||
+      this.active.generation !== generation ||
+      !Number.isSafeInteger(durationNs) ||
+      durationNs <= 0
+    )
+      return;
+    // Enqueue immediately; never let a Promise continuation update another View.
+    this.report(FTReactNativeRUM.updateViewLoadingTime(durationNs));
+  }
+
+  /** Only the appearance that owns the active generation may close it. */
+  hide(key: string, generation: number | undefined): void {
+    if (this.state !== 'active') return;
+    if (
+      !this.active ||
+      this.active.key !== key ||
+      this.active.generation !== generation
+    )
+      return;
+    this.active = undefined;
+    this.current = undefined;
+    this.report(FTReactNativeRUM.stopView());
+  }
+
+  stop(): void {
+    ++this.lifecycle;
+    this.subscription?.remove();
+    this.subscription = undefined;
+    if (this.active && this.state === 'active')
+      this.report(FTReactNativeRUM.stopView());
+    this.active = undefined;
+    this.current = undefined;
+    this.loading.clear();
+    // Never reuse generation values: callbacks from a previous subscription can arrive late.
+  }
+
+  private onAppState = (state: AppStateStatus): void => {
+    if (state === this.state) return;
+    this.state = state;
+    if (state === 'background') {
+      // Native closes Automatic Views at its own history boundary. No JS stop.
+      this.active = undefined;
+      this.loading.clear();
+      this.onBackground?.();
+    } else if (state === 'active' && this.current) {
+      this.show(this.current);
+    }
+  };
+
+  private pruneLoading(): void {
+    const now =
+      typeof performance !== 'undefined' &&
+      typeof performance.now === 'function'
+        ? performance.now()
+        : NaN;
+    for (const [key, load] of this.loading) {
+      const age = now - load.monotonicMs;
+      if (!Number.isFinite(age) || age < 0 || age >= MAX_PENDING_LOAD_MS)
+        this.loading.delete(key);
+    }
+  }
+
+  private get nativeRUM(): NativeRUMSpec {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    return require('../specs/NativeFTReactNativeRUM').default;
+  }
+
+  private report(result: Promise<void>): void {
+    result.catch((error) =>
+      console.warn('[TrueWatch] Automatic View tracking failed', error)
+    );
+  }
+}

package/src/rum/FTRumWebSocketNative.ts

@@ -0,0 +1,107 @@
+import NativeWebSocket from '../specs/NativeFTReactNativeWebSocket';
+import { bridgeContextManager } from '../ft_mobile_agent';
+import type { WebSocketTimingMetrics } from './FTRumWebSocketTiming';
+
+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: Partial<WebSocketTimingMetrics>
+  ): 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;
+  }
+}