@multiplayer-app/session-recorder-react-native 1.0.0 → 1.0.1-beta.10

package/src/types/configs.ts

@@ -0,0 +1,118 @@
+import { type PropagateTraceHeaderCorsUrls } from '@opentelemetry/instrumentation-xml-http-request/build/src/types';
+import {
+  type MaskingOptions,
+  type SessionRecorderOptions,
+} from './session-recorder';
+
+/**
+ * Utility type that makes all properties required recursively
+ * Removes optional modifiers and undefined types from nested objects
+ */
+export type DeepRequired<T> = T extends Function
+  ? T
+  : T extends ReadonlyArray<infer U>
+    ? Array<DeepRequired<NonNullable<U>>>
+    : T extends Array<infer U>
+      ? Array<DeepRequired<NonNullable<U>>>
+      : T extends object
+        ? { -readonly [K in keyof T]-?: DeepRequired<NonNullable<T[K]>> }
+        : NonNullable<T>;
+
+/**
+ * Fully resolved configuration interface
+ * All optional properties from SessionRecorderOptions are now required
+ */
+export interface SessionRecorderConfigs
+  extends DeepRequired<SessionRecorderOptions> {}
+
+/**
+ * Base configuration interface with common properties
+ * Shared by all service configuration interfaces
+ */
+export interface BaseConfig {
+  /** API key for authentication */
+  apiKey: string;
+  /** Base URL for the API calls */
+  apiBaseUrl: string;
+  /** OTLP collector endpoint for traces */
+  exporterEndpoint: string;
+}
+
+/**
+ * Type for masking configuration used by the Tracer
+ * Contains only trace-related masking options
+ */
+export type TracerReactNativeMasking = Pick<
+  MaskingOptions,
+  | 'isContentMaskingEnabled'
+  | 'maskBody'
+  | 'maskHeaders'
+  | 'maskBodyFieldsList'
+  | 'maskHeadersList'
+  | 'headersToInclude'
+  | 'headersToExclude'
+>;
+
+/**
+ * Configuration interface for the Tracer class
+ * Contains all settings needed for OpenTelemetry tracing
+ */
+export interface TracerReactNativeConfig extends BaseConfig {
+  /** Application name */
+  application: string;
+  /** Application version */
+  version: string;
+  /** Environment (e.g., 'production', 'staging') */
+  environment: string;
+  /** URLs to ignore during tracing */
+  ignoreUrls: Array<string | RegExp>;
+  /** Trace ID ratio for sampling */
+  sampleTraceRatio: number;
+  /** URLs for CORS trace header propagation */
+  propagateTraceHeaderCorsUrls: PropagateTraceHeaderCorsUrls;
+  /** Whether to schematize document span payload */
+  schemifyDocSpanPayload: boolean;
+  /** Maximum size for capturing HTTP payload */
+  maxCapturingHttpPayloadSize: number;
+  /** If true, captures body in traces */
+  captureBody: boolean;
+  /** If true, captures headers in traces */
+  captureHeaders: boolean;
+  /** Configuration for masking sensitive data in session recordings */
+  masking: TracerReactNativeMasking;
+}
+
+/**
+ * Type for masking configuration used by the Recorder
+ * Contains only screen recording masking options
+ */
+export type RecorderMaskingConfig = Pick<
+  MaskingOptions,
+  | 'maskTextInputs'
+  | 'maskImages'
+  | 'maskButtons'
+  | 'maskLabels'
+  | 'maskWebViews'
+  | 'maskSandboxedViews'
+>;
+
+/**
+ * Configuration interface for the Recorder class
+ * Contains settings for screen recording and gesture capture
+ */
+export interface RecorderConfig extends BaseConfig {
+  /** Whether to record gestures */
+  recordGestures?: boolean;
+  /** Whether to record navigation */
+  recordNavigation?: boolean;
+  /** Whether to record screen */
+  recordScreen?: boolean;
+  /** Configuration for masking sensitive data in screen recordings */
+  masking?: RecorderMaskingConfig;
+}
+
+/**
+ * Configuration interface for the ApiService class
+ * Contains settings for API communication
+ */
+export interface ApiServiceConfig extends BaseConfig {}

package/src/types/expo-constants.d.ts

@@ -0,0 +1,7 @@
+// Ambient module to prevent TypeScript errors when expo-constants is not installed.
+// In non-Expo projects, this module is never required at runtime because we import
+// through an optional shim that resolves to undefined.
+declare module 'expo-constants' {
+  const Constants: any;
+  export default Constants;
+}

package/src/types/index.ts

@@ -0,0 +1,27 @@
+export * from './session-recorder';
+export * from './session';
+export * from './configs';
+
+// Import types for use in this file
+import type { eventWithTime } from '@rrweb/types';
+
+export interface ReactNativeScreenData {
+  width: number;
+  height: number;
+  base64Image: string;
+  timestamp: number;
+  screenName?: string;
+}
+
+export interface ReactNativeTouchData {
+  pageX: number;
+  pageY: number;
+  target?: string;
+  pressure?: number;
+  timestamp: number;
+}
+
+// Event recording interface
+export interface EventRecorder {
+  recordEvent(event: eventWithTime): void;
+}

package/src/types/session-recorder.ts

@@ -0,0 +1,381 @@
+import { type Span } from '@opentelemetry/api';
+import { SessionType } from '@multiplayer-app/session-recorder-common';
+import { type PropagateTraceHeaderCorsUrls } from '@opentelemetry/sdk-trace-web';
+import type { ISession } from './session';
+
+// WidgetButtonPlacement moved to configs.ts
+
+export enum SessionState {
+  started = '2',
+  paused = '1',
+  stopped = '0',
+}
+
+/**
+ * Enumeration for widget button placement positions
+ */
+export enum WidgetButtonPlacement {
+  topLeft = 'top-left',
+  topRight = 'top-right',
+  bottomLeft = 'bottom-left',
+  bottomRight = 'bottom-right',
+}
+
+/**
+ * Enumeration for log levels
+ */
+export enum LogLevel {
+  DEBUG = 0,
+  INFO = 1,
+  WARN = 2,
+  ERROR = 3,
+}
+
+/**
+ * Main configuration interface for the Session Recorder
+ * Contains all configurable options for session recording, tracing, and UI
+ */
+export interface SessionRecorderOptions {
+  /**
+   * The API key used to authenticate with the session debugger service.
+   */
+  apiKey: string;
+
+  /**
+   * The version of the application using the session debugger.
+   */
+  version: string;
+
+  /**
+   * The name of the application being debugged.
+   */
+  application: string;
+
+  /**
+   * The environment where the application is running (e.g., 'production', 'staging').
+   */
+  environment: string;
+
+  /**
+   * (Optional) OTLP collector endpoint.
+   */
+  exporterEndpoint?: string;
+
+  /**
+   * (Optional) Base URL for the API calls.
+   * This allows customization of the API endpoint for sending session data.
+   */
+  apiBaseUrl?: string;
+
+  /**
+   * (Optional) An array of URLs or regular expressions that should be ignored by the session debugger.
+   * Any URL that partially matches any regex in this array will not be traced.
+   * Additionally, URLs that exactly match any string in the array will also be ignored.
+   */
+  ignoreUrls?: Array<string | RegExp>;
+
+  /**
+   * (Optional) Enables the continuous recording feature and UI.
+   * If false, the UI toggle is hidden and attempts to start a continuous
+   * session are ignored.
+   * @default true
+   */
+  showContinuousRecording?: boolean;
+
+  /**
+   * Optional widget configuration
+   */
+  widget?: {
+    /** Enables/disables the widget entirely
+     * @default true
+     */
+    enabled?: boolean;
+    /** Floating button config
+     * @default visible: true, placement: 'bottom-right'
+     */
+    button?: {
+      visible?: boolean;
+      placement?: WidgetButtonPlacement;
+    };
+
+    /**
+     * (Optional) Configuration for customizable UI text and labels
+     * @default See PopoverTextConfig defaults
+     */
+    textOverrides?: TextOverridesOptions;
+  };
+
+  /**
+   * (Optional) Trace ID Ratio for sampling
+   * @default 0.15
+   */
+  sampleTraceRatio?: number;
+
+  /**
+   * (Optional) URLs or regex patterns for CORS trace header propagation
+   */
+  propagateTraceHeaderCorsUrls?: PropagateTraceHeaderCorsUrls;
+
+  /**
+   * (Optional) If true, schematizes document span payload
+   * @default true
+   */
+  schemifyDocSpanPayload?: boolean;
+
+  /**
+   * (Optional) Maximum size for capturing HTTP payload
+   * @default 100000
+   */
+  maxCapturingHttpPayloadSize?: number;
+
+  /** If true, captures body in traces
+   *  @default true
+   */
+  captureBody?: boolean;
+  /** If true, captures headers in traces
+   *  @default true
+   */
+  captureHeaders?: boolean;
+  /**
+   * (Optional) Configuration for masking sensitive data in session recordings
+   * @default { maskAllInputs: true, isContentMaskingEnabled: true }
+   */
+  masking?: MaskingOptions;
+  /** Whether to record gestures */
+  recordGestures?: boolean;
+  /** Whether to record navigation */
+  recordNavigation?: boolean;
+  /** Whether to record screen */
+  recordScreen?: boolean;
+  /**
+   * (Optional) Logger configuration overrides
+   * Allows setting log level, console enabling, and prefix customizations
+   */
+  logger?: {
+    level?: number;
+    enabled?: boolean;
+  };
+}
+
+/**
+ * Interface for customizable widget text configuration
+ * Allows overriding default text labels and messages in the UI
+ */
+export interface TextOverridesOptions {
+  /** Title for the initial popover when continuous recording is enabled */
+  initialTitleWithContinuous?: string;
+  /** Title for the initial popover when continuous recording is disabled */
+  initialTitleWithoutContinuous?: string;
+  /** Description for the initial popover when continuous recording is enabled */
+  initialDescriptionWithContinuous?: string;
+  /** Description for the initial popover when continuous recording is disabled */
+  initialDescriptionWithoutContinuous?: string;
+  /** Label for the continuous recording toggle */
+  continuousRecordingLabel?: string;
+  /** Text for the start recording button */
+  startRecordingButtonText?: string;
+  /** Title for the final popover */
+  finalTitle?: string;
+  /** Description for the final popover */
+  finalDescription?: string;
+  /** Placeholder text for the comment textarea */
+  commentPlaceholder?: string;
+  /** Text for the save button in final popover */
+  saveButtonText?: string;
+  /** Text for the cancel button in final popover */
+  cancelButtonText?: string;
+  /** Title for the continuous recording overlay */
+  continuousOverlayTitle?: string;
+  /** Description for the continuous recording overlay */
+  continuousOverlayDescription?: string;
+  /** Text for the save last snapshot button */
+  saveLastSnapshotButtonText?: string;
+  /** Title for the submit session dialog */
+  submitDialogTitle?: string;
+  /** Subtitle for the submit session dialog */
+  submitDialogSubtitle?: string;
+  /** Label for the comment field in submit dialog */
+  submitDialogCommentLabel?: string;
+  /** Placeholder for the comment field in submit dialog */
+  submitDialogCommentPlaceholder?: string;
+  /** Text for the submit button in dialog */
+  submitDialogSubmitText?: string;
+  /** Text for the cancel button in dialog */
+  submitDialogCancelText?: string;
+}
+
+/**
+ * Interface for masking configuration options
+ * Controls what data is masked in both traces and screen recordings
+ */
+export interface MaskingOptions {
+  // Span masking
+  /** If true, enables masking for debug span payload in traces */
+  isContentMaskingEnabled?: boolean;
+  /** Custom function for masking body in traces */
+  maskBody?: (payload: any, span: Span) => any;
+  /** Custom function for masking headers in traces */
+  maskHeaders?: (headers: any, span: any) => any;
+
+  /** List of body fields to mask in traces */
+  maskBodyFieldsList?: string[];
+  /** List of headers to mask in traces */
+  maskHeadersList?: string[];
+
+  /** List of headers to include in traces (if specified, only these headers will be captured) */
+  headersToInclude?: string[];
+  /** List of headers to exclude from traces */
+  headersToExclude?: string[];
+
+  // Screen masking options
+  /** Whether to mask text inputs (UITextField, UITextView, React Native text components) */
+  maskTextInputs?: boolean;
+  /** Whether to mask images (UIImageView, React Native Image components) */
+  maskImages?: boolean;
+  /** Whether to mask buttons (UIButton) */
+  maskButtons?: boolean;
+  /** Whether to mask labels (UILabel) */
+  maskLabels?: boolean;
+  /** Whether to mask web views (WKWebView) */
+  maskWebViews?: boolean;
+  /** Whether to mask sandboxed views (system views that don't belong to current process) */
+  maskSandboxedViews?: boolean;
+}
+/**
+ * Main interface for the Session Recorder
+ * Defines the public API for session recording functionality
+ */
+export interface ISessionRecorder {
+  /**
+   * The current session ID
+   */
+  readonly sessionId: string | null;
+
+  /**
+   * Whether continuous recording is enabled
+   */
+  readonly continuousRecording: boolean;
+
+  /**
+   * The current debug session object
+   */
+  readonly session: ISession | null;
+
+  /**
+   * The type of session (plain or continuous)
+   */
+  readonly sessionType: SessionType;
+
+  /**
+   * The current state of the session
+   */
+  readonly sessionState: SessionState | null;
+
+  /**
+   * Session attributes for additional context
+   */
+  readonly sessionAttributes: Record<string, any>;
+
+  /**
+   * Current error message
+   */
+  error: string;
+
+  /**
+   * The HTML button element for the session widget's recorder button
+   */
+  readonly sessionWidgetButtonElement: HTMLButtonElement;
+
+  /**
+   * Initialize the session debugger with custom configurations
+   * @param configs - custom configurations for session debugger
+   */
+  init(configs: SessionRecorderOptions): void;
+
+  /**
+   * Save the continuous recording session
+   * @returns Promise that resolves to the save response
+   */
+  save(): Promise<any>;
+
+  /**
+   * Start a new session
+   * @param type - the type of session to start
+   * @param session - optional existing session to start
+   */
+  start(type?: SessionType, session?: ISession): void;
+
+  /**
+   * Stop the current session with an optional comment
+   * @param comment - user-provided comment to include in session feedback metadata
+   */
+  stop(comment?: string): Promise<void>;
+
+  /**
+   * Cancel the current session
+   */
+  cancel(): Promise<void>;
+
+  /**
+   * Pause the current session
+   */
+  pause(): Promise<void>;
+
+  /**
+   * Resume the current session
+   */
+  resume(): Promise<void>;
+
+  /**
+   * Set the session metadata
+   * @param attributes - the attributes to set
+   */
+  setSessionAttributes(attributes: Record<string, any>): void;
+}
+
+/**
+ * Interface representing screen capture events
+ * Contains metadata about screen recordings
+ */
+export interface ScreenEvent {
+  screenName: string;
+  timestamp: number;
+  params?: Record<string, any>;
+  type?: string;
+  metadata?: Record<string, any>;
+  dataUrl?: string;
+}
+
+/**
+ * Interface representing gesture/touch events
+ * Contains information about user interactions with the screen
+ */
+export interface GestureEvent {
+  type: string;
+  timestamp: number;
+  x?: number;
+  y?: number;
+  direction?: string;
+  target?: string;
+  coordinates?: { x: number; y: number };
+  targetInfo?: {
+    identifier: string;
+    label?: string;
+    role?: string;
+    testId?: string;
+    text?: string;
+  };
+  metadata?: Record<string, any>;
+}
+
+/**
+ * Interface representing navigation events
+ * Contains information about screen/route changes
+ */
+export interface NavigationEvent {
+  type: string;
+  timestamp: number;
+  routeName?: string;
+  params?: Record<string, any>;
+  metadata?: Record<string, any>;
+}

package/src/types/session.ts

@@ -0,0 +1,65 @@
+import { SessionType } from '@multiplayer-app/session-recorder-common';
+
+export interface IResourceAttributes {
+  browserInfo?: string;
+  cookiesEnabled?: string;
+  deviceInfo?: string;
+  hardwareConcurrency?: number;
+  osInfo?: string;
+  pixelRatio?: number;
+  screenSize?: string;
+  packageVersion?: string;
+  [key: string]: any;
+}
+
+export interface ISessionAttributes {
+  userEmail?: string;
+  userId?: string;
+  userName?: string;
+  accountId?: string;
+  accountName?: string;
+  [key: string]: any;
+}
+
+export interface ISessionView {
+  _id: string;
+  name: string;
+  components?: string[];
+}
+
+export interface ISession {
+  _id: string;
+  shortId: string;
+  workspace: string;
+  project: string;
+  continuousDebugSession?: string;
+  creationType: SessionType;
+  name: string;
+  startedAt: string | Date;
+  stoppedAt: string | Date;
+  durationInSeconds?: number;
+  createdAt: string | Date;
+  updatedAt: string | Date;
+  tags: any[];
+
+  resourceAttributes?: IResourceAttributes;
+  sessionAttributes?: ISessionAttributes;
+  views: ISessionView[];
+  starred: boolean;
+  starredItems: string[];
+  s3Files: {
+    _id?: string;
+    bucket: string;
+    key: string;
+    dataType: DebugSessionDataType;
+    url?: string;
+  }[];
+  finishedS3Transfer?: boolean;
+  tempApiKey?: string;
+}
+
+export enum DebugSessionDataType {
+  OTLP_TRACES = 'OTLP_TRACES',
+  OTLP_LOGS = 'OTLP_LOGS',
+  RRWEB_EVENTS = 'RRWEB_EVENTS',
+}

package/src/utils/app-metadata.ts

@@ -0,0 +1,31 @@
+/**
+ * Auto-generated app metadata
+ * This file is generated at build time to provide app metadata without developer intervention
+ */
+
+// This file is automatically generated by the build process
+// It extracts metadata from app.json, app.config.js, or package.json
+
+export interface AppMetadata {
+  name?: string;
+  version?: string;
+  bundleId?: string;
+  buildNumber?: string;
+  displayName?: string;
+}
+
+// Auto-detected values from project configuration files
+export const APP_METADATA: AppMetadata = {
+  name: '@multiplayer-app/session-recorder-react-native',
+  version: '0.0.1',
+  bundleId: undefined,
+  buildNumber: undefined,
+  displayName: undefined,
+};
+
+/**
+ * Get auto-detected app metadata
+ */
+export function getAutoDetectedAppMetadata(): AppMetadata {
+  return { ...APP_METADATA };
+}

package/src/utils/constants.optional.expo.ts

@@ -0,0 +1,5 @@
+// Expo variant: re-export expo-constants default to be consumed via the optional shim path
+import Constants from 'expo-constants';
+import type { OptionalExpoConstants } from './constants.optional';
+
+export default Constants as OptionalExpoConstants;

package/src/utils/constants.optional.ts

@@ -0,0 +1,18 @@
+// Non-Expo fallback: export undefined to avoid bundling expo-constants in non-Expo apps
+// Define a lightweight type that includes only the members we read.
+export type OptionalExpoConstants =
+  | {
+      expoVersion?: string;
+      platform?: { ios?: unknown; android?: unknown };
+      expoConfig?: {
+        name?: string;
+        version?: string;
+        ios?: { buildNumber?: string | number; bundleIdentifier?: string };
+        android?: { versionCode?: string | number; package?: string };
+      };
+    }
+  | undefined;
+
+const OptionalConstants: OptionalExpoConstants = undefined;
+
+export default OptionalConstants;

package/src/utils/createStore.ts

@@ -0,0 +1,32 @@
+type Listener<T> = (state: T, prevState: T) => void;
+
+export type Store<T> = {
+  getState: () => T;
+  setState: (partial: Partial<T> | ((prev: T) => T), action?: string) => void;
+  subscribe: (listener: Listener<T>) => () => void;
+};
+
+export function createStore<T extends object>(initialState: T): Store<T> {
+  let state: T = initialState;
+  const listeners = new Set<Listener<T>>();
+
+  const getState = () => state;
+
+  const setState: Store<T>['setState'] = (partial) => {
+    const prevState = state;
+    const nextState =
+      typeof partial === 'function'
+        ? (partial as (prev: T) => T)(prevState)
+        : ({ ...prevState, ...partial } as T);
+    if (Object.is(nextState, prevState)) return;
+    state = nextState;
+    listeners.forEach((l) => l(state, prevState));
+  };
+
+  const subscribe: Store<T>['subscribe'] = (listener) => {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+  };
+
+  return { getState, setState, subscribe };
+}

package/{dist/utils/index.d.ts → src/utils/index.ts}

@@ -1,3 +1,4 @@
+// Export all utility functions
 export * from './platform';
 export * from './session';
 export * from './time';