@multiplayer-app/session-recorder-react-native 0.0.1-alpha.1

package/examples/sample-expo-app/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "sample-expo-app",
+  "main": "expo-router/entry",
+  "version": "1.0.0",
+  "scripts": {
+    "start": "expo start",
+    "reset-project": "node ./scripts/reset-project.js",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "lint": "expo lint",
+    "postinstall": "expo-yarn-workspaces check workspaces"
+  },
+  "dependencies": {
+    "@expo/vector-icons": "^14.1.0",
+    "@multiplayer-app/session-recorder-react-native": "file:../..",
+    "@react-native-async-storage/async-storage": "2.1.2",
+    "@react-native-community/netinfo": "^11.1.0",
+    "@react-navigation/bottom-tabs": "^7.3.10",
+    "@react-navigation/elements": "^2.3.8",
+    "@react-navigation/native": "^7.1.6",
+    "axios": "^1.6.0",
+    "expo": "~53.0.22",
+    "expo-blur": "~14.1.5",
+    "expo-constants": "~17.1.7",
+    "expo-font": "~13.3.2",
+    "expo-haptics": "~14.1.4",
+    "expo-image": "~2.4.0",
+    "expo-linking": "~7.1.7",
+    "expo-router": "~5.1.5",
+    "expo-splash-screen": "~0.30.10",
+    "expo-status-bar": "~2.2.3",
+    "expo-symbols": "~0.4.5",
+    "expo-system-ui": "~5.0.11",
+    "expo-web-browser": "~14.2.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "react-native": "^0.79.5",
+    "react-native-gesture-handler": "~2.24.0",
+    "react-native-mmkv": "^2.11.0",
+    "react-native-reanimated": "~3.17.4",
+    "react-native-safe-area-context": "5.4.0",
+    "react-native-screens": "~4.11.1",
+    "react-native-screenshot": "^1.0.0",
+    "react-native-view-shot": "^4.0.3",
+    "react-native-web": "~0.20.0",
+    "react-native-webview": "13.13.5"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@react-native/metro-config": "^0.81.1",
+    "@types/react": "~19.0.10",
+    "eslint": "^9.25.0",
+    "eslint-config-expo": "~9.2.0",
+    "expo-yarn-workspaces": "^2.3.2",
+    "typescript": "~5.8.3"
+  },
+  "private": true
+}

package/examples/sample-expo-app/scripts/reset-project.js

@@ -0,0 +1,112 @@
+#!/usr/bin/env node
+
+/**
+ * This script is used to reset the project to a blank state.
+ * It deletes or moves the /app, /components, /hooks, /scripts, and /constants directories to /app-example based on user input and creates a new /app directory with an index.tsx and _layout.tsx file.
+ * You can remove the `reset-project` script from package.json and safely delete this file after running it.
+ */
+
+const fs = require("fs");
+const path = require("path");
+const readline = require("readline");
+
+const root = process.cwd();
+const oldDirs = ["app", "components", "hooks", "constants", "scripts"];
+const exampleDir = "app-example";
+const newAppDir = "app";
+const exampleDirPath = path.join(root, exampleDir);
+
+const indexContent = `import { Text, View } from "react-native";
+
+export default function Index() {
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <Text>Edit app/index.tsx to edit this screen.</Text>
+    </View>
+  );
+}
+`;
+
+const layoutContent = `import { Stack } from "expo-router";
+
+export default function RootLayout() {
+  return <Stack />;
+}
+`;
+
+const rl = readline.createInterface({
+  input: process.stdin,
+  output: process.stdout,
+});
+
+const moveDirectories = async (userInput) => {
+  try {
+    if (userInput === "y") {
+      // Create the app-example directory
+      await fs.promises.mkdir(exampleDirPath, { recursive: true });
+      console.log(`📁 /${exampleDir} directory created.`);
+    }
+
+    // Move old directories to new app-example directory or delete them
+    for (const dir of oldDirs) {
+      const oldDirPath = path.join(root, dir);
+      if (fs.existsSync(oldDirPath)) {
+        if (userInput === "y") {
+          const newDirPath = path.join(root, exampleDir, dir);
+          await fs.promises.rename(oldDirPath, newDirPath);
+          console.log(`➡️ /${dir} moved to /${exampleDir}/${dir}.`);
+        } else {
+          await fs.promises.rm(oldDirPath, { recursive: true, force: true });
+          console.log(`❌ /${dir} deleted.`);
+        }
+      } else {
+        console.log(`➡️ /${dir} does not exist, skipping.`);
+      }
+    }
+
+    // Create new /app directory
+    const newAppDirPath = path.join(root, newAppDir);
+    await fs.promises.mkdir(newAppDirPath, { recursive: true });
+    console.log("\n📁 New /app directory created.");
+
+    // Create index.tsx
+    const indexPath = path.join(newAppDirPath, "index.tsx");
+    await fs.promises.writeFile(indexPath, indexContent);
+    console.log("📄 app/index.tsx created.");
+
+    // Create _layout.tsx
+    const layoutPath = path.join(newAppDirPath, "_layout.tsx");
+    await fs.promises.writeFile(layoutPath, layoutContent);
+    console.log("📄 app/_layout.tsx created.");
+
+    console.log("\n✅ Project reset complete. Next steps:");
+    console.log(
+      `1. Run \`npx expo start\` to start a development server.\n2. Edit app/index.tsx to edit the main screen.${
+        userInput === "y"
+          ? `\n3. Delete the /${exampleDir} directory when you're done referencing it.`
+          : ""
+      }`
+    );
+  } catch (error) {
+    console.error(`❌ Error during script execution: ${error.message}`);
+  }
+};
+
+rl.question(
+  "Do you want to move existing files to /app-example instead of deleting them? (Y/n): ",
+  (answer) => {
+    const userInput = answer.trim().toLowerCase() || "y";
+    if (userInput === "y" || userInput === "n") {
+      moveDirectories(userInput).finally(() => rl.close());
+    } else {
+      console.log("❌ Invalid input. Please enter 'Y' or 'N'.");
+      rl.close();
+    }
+  }
+);

package/examples/sample-expo-app/services/api.ts

@@ -0,0 +1,98 @@
+import axios from 'axios';
+
+const API_BASE_URL = 'https://jsonplaceholder.typicode.com';
+
+export interface Post {
+  id: number;
+  title: string;
+  body: string;
+  userId: number;
+}
+
+export interface User {
+  id: number;
+  name: string;
+  username: string;
+  email: string;
+  phone: string;
+  website: string;
+  company: {
+    name: string;
+    catchPhrase: string;
+    bs: string;
+  };
+  address: {
+    street: string;
+    suite: string;
+    city: string;
+    zipcode: string;
+    geo: {
+      lat: string;
+      lng: string;
+    };
+  };
+}
+
+export interface Comment {
+  id: number;
+  postId: number;
+  name: string;
+  email: string;
+  body: string;
+}
+
+class ApiService {
+  private api = axios.create({
+    baseURL: API_BASE_URL,
+    timeout: 10000,
+  });
+
+  // Posts
+  async getPosts(): Promise<Post[]> {
+    const response = await this.api.get('/posts');
+    return response.data;
+  }
+
+  async getPost(id: number): Promise<Post> {
+    const response = await this.api.get(`/posts/${id}`);
+    return response.data;
+  }
+
+  async getPostComments(postId: number): Promise<Comment[]> {
+    const response = await this.api.get(`/posts/${postId}/comments`);
+    return response.data;
+  }
+
+  // Users
+  async getUsers(): Promise<User[]> {
+    const response = await this.api.get('/users');
+    return response.data;
+  }
+
+  async getUser(id: number): Promise<User> {
+    const response = await this.api.get(`/users/${id}`);
+    return response.data;
+  }
+
+  async getUserPosts(userId: number): Promise<Post[]> {
+    const response = await this.api.get(`/users/${userId}/posts`);
+    return response.data;
+  }
+
+  // Create/Update/Delete operations (for demo purposes)
+  async createPost(post: Omit<Post, 'id'>): Promise<Post> {
+    const response = await this.api.post('/posts', post);
+    return response.data;
+  }
+
+  async updatePost(id: number, post: Partial<Post>): Promise<Post> {
+    const response = await this.api.put(`/posts/${id}`, post);
+    return response.data;
+  }
+
+  async deletePost(id: number): Promise<void> {
+    await this.api.delete(`/posts/${id}`);
+  }
+}
+
+export const apiService = new ApiService();

package/examples/sample-expo-app/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    }
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    ".expo/types/**/*.ts",
+    "expo-env.d.ts"
+  ]
+}

package/examples/sample-expo-app/utils/navigation.ts

@@ -0,0 +1,19 @@
+// Navigation utility to avoid router import issues
+export const navigateTo = {
+  post: (id: number) => {
+    // This will be handled by the router in the component
+    return `/post/${id}`
+  },
+  user: (id: number) => {
+    return `/user/${id}`
+  },
+  posts: () => {
+    return '/(tabs)/posts'
+  },
+  users: () => {
+    return '/(tabs)/users'
+  },
+  home: () => {
+    return '/(tabs)/'
+  },
+}

package/package.json

@@ -0,0 +1,98 @@
+{
+  "name": "@multiplayer-app/session-recorder-react-native",
+  "version": "0.0.1-alpha.1",
+  "description": "Multiplayer Fullstack Session Recorder for React Native",
+  "author": {
+    "name": "Multiplayer Software, Inc.",
+    "url": "https://www.multiplayer.app"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/multiplayer-app/multiplayer-session-recorder-javascript/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/multiplayer-app/multiplayer-session-recorder-javascript.git"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    },
+    "./expo": {
+      "import": "./dist/expo.js",
+      "require": "./dist/expo.js"
+    }
+  },
+  "engines": {
+    "node": ">=18",
+    "npm": ">=8"
+  },
+  "keywords": [
+    "multiplayer",
+    "debugger",
+    "platform",
+    "platform debugger",
+    "session recorder",
+    "otlp",
+    "fullstack session recorder",
+    "react-native",
+    "expo"
+  ],
+  "scripts": {
+    "clean": "rimraf dist",
+    "lint": "eslint src/**/*.ts",
+    "lint:fix": "eslint src/**/*.ts --fix",
+    "prepublishOnly": "npm run lint && npm run build",
+    "prebuild": "node -p \"'export const version = ' + JSON.stringify(require('./package.json').version)\" > src/version.ts",
+    "build": "tsc && babel ./dist --out-dir dist --extensions '.js'"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.19.3",
+    "@babel/plugin-transform-class-properties": "^7.24.1",
+    "@babel/plugin-transform-private-methods": "^7.24.1",
+    "@babel/plugin-transform-private-property-in-object": "^7.27.1",
+    "@babel/preset-env": "^7.24.1",
+    "@babel/preset-react": "^7.24.1",
+    "@babel/preset-typescript": "^7.24.1",
+    "@react-native/babel-preset": "^0.80.1",
+    "@types/react": "^18.2.0",
+    "@types/react-native": "^0.72.0",
+    "eslint": "8.48.0",
+    "rimraf": "^5.0.5",
+    "typescript": "5.7.3"
+  },
+  "dependencies": {
+    "@multiplayer-app/session-recorder-common": "1.2.6",
+    "@opentelemetry/core": "2.0.1",
+    "@opentelemetry/exporter-trace-otlp-http": "0.203.0",
+    "@opentelemetry/instrumentation": "0.203.0",
+    "@opentelemetry/instrumentation-fetch": "0.203.0",
+    "@opentelemetry/instrumentation-xml-http-request": "0.203.0",
+    "@opentelemetry/otlp-exporter-base": "0.203.0",
+    "@opentelemetry/otlp-transformer": "0.203.0",
+    "@opentelemetry/resources": "2.0.1",
+    "@opentelemetry/sdk-trace-base": "2.0.1",
+    "@opentelemetry/semantic-conventions": "1.36.0",
+    "@react-native-async-storage/async-storage": "^1.21.0",
+    "@react-native-community/netinfo": "^11.1.0",
+    "lib0": "0.2.82",
+    "react-native-gesture-handler": "^2.14.0",
+    "react-native-mmkv": "^2.11.0",
+    "react-native-reanimated": "^3.6.0",
+    "react-native-screenshot": "^1.0.0",
+    "react-native-view-shot": "^4.0.3",
+    "socket.io-client": "4.7.5"
+  },
+  "peerDependencies": {
+    "@opentelemetry/api": "1.9.0",
+    "expo": "^49.0.0 || ^52.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-native": "^0.72.0 || ^0.81.0"
+  },
+  "optionalDependencies": {
+    "expo-constants": "^15.0.0"
+  }
+}

package/src/config/masking.ts

@@ -0,0 +1,78 @@
+import { SessionRecorderSdk } from '@multiplayer-app/session-recorder-common'
+
+const { mask, sensitiveFields, sensitiveHeaders } = SessionRecorderSdk
+
+/**
+ * HTTP Masking Configuration Interface
+ * Focused only on HTTP request/response masking for OpenTelemetry traces
+ */
+export interface HttpMaskingConfig {
+  /** If true, enables masking for debug span payload in traces */
+  isContentMaskingEnabled?: boolean
+  /** Custom function for masking body in traces */
+  maskBody?: (payload: any, span: any) => 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[]
+}
+
+/**
+ * Default HTTP masking configuration
+ */
+export const DEFAULT_HTTP_MASKING_CONFIG: HttpMaskingConfig = {
+  isContentMaskingEnabled: true,
+  maskBody: mask(sensitiveFields),
+  maskHeaders: mask(sensitiveHeaders),
+  maskBodyFieldsList: sensitiveFields,
+  maskHeadersList: sensitiveHeaders,
+  headersToInclude: [],
+  headersToExclude: [],
+}
+
+/**
+ * Validation helper functions
+ */
+const isValidArray = (value: any[] | undefined, defaultValue: any[]): any[] => {
+  return Array.isArray(value) ? value : defaultValue
+}
+
+const isValidBoolean = (value: boolean | undefined, defaultValue: boolean): boolean => {
+  return typeof value === 'boolean' ? value : defaultValue
+}
+
+const isValidFunction = (value: any, defaultValue: any): any => {
+  return typeof value === 'function' ? value : defaultValue
+}
+
+/**
+ * Get HTTP masking configuration
+ * @param masking Optional masking configuration
+ * @returns Processed HTTP masking configuration
+ */
+export const getHttpMaskingConfig = (masking?: HttpMaskingConfig): HttpMaskingConfig => {
+  const baseMasking = DEFAULT_HTTP_MASKING_CONFIG
+
+  if (typeof masking !== 'object') {
+    return baseMasking
+  }
+
+  const maskHeadersList = isValidArray(masking.maskHeadersList, sensitiveHeaders)
+  const maskBodyFieldsList = isValidArray(masking.maskBodyFieldsList, sensitiveFields)
+
+  return {
+    isContentMaskingEnabled: isValidBoolean(masking.isContentMaskingEnabled, baseMasking.isContentMaskingEnabled ?? true),
+    maskBody: isValidFunction(masking.maskBody, mask(maskBodyFieldsList)),
+    maskHeaders: isValidFunction(masking.maskHeaders, mask(maskHeadersList)),
+    maskBodyFieldsList,
+    maskHeadersList,
+    headersToInclude: isValidArray(masking.headersToInclude, baseMasking.headersToInclude ?? []),
+    headersToExclude: isValidArray(masking.headersToExclude, baseMasking.headersToExclude ?? []),
+  }
+}

package/src/expo.ts

@@ -0,0 +1,41 @@
+import { SessionRecorder } from './sessionRecorder'
+import { isExpoEnvironment } from './utils/platform'
+
+// Create a specialized instance for Expo
+const SessionRecorderExpoInstance = new SessionRecorder()
+
+// Add Expo-specific initialization
+const originalInit = SessionRecorderExpoInstance.init.bind(SessionRecorderExpoInstance)
+
+SessionRecorderExpoInstance.init = async function(options: any) {
+  // Add Expo-specific configuration
+  const expoOptions = {
+    ...options,
+    // Add Expo-specific defaults
+    platform: 'expo',
+  }
+  
+  // Log Expo environment detection
+  if (isExpoEnvironment()) {
+    console.log('Multiplayer Session Recorder: Running in Expo environment')
+  }
+  
+  return originalInit(expoOptions)
+}
+
+// Export the Expo instance as default
+export default SessionRecorderExpoInstance
+
+// Export types and classes
+export * from './types'
+export { SessionRecorder } from './sessionRecorder'
+export { TracerReactNativeSDK } from './otel'
+export { RecorderReactNativeSDK } from './recorder'
+export { ApiService } from './services/api.service'
+export { StorageService } from './services/storage.service'
+
+// Export common types
+export * from '@multiplayer-app/session-recorder-common'
+
+// Export Expo-specific utilities
+export { isExpoEnvironment, getPlatformAttributes } from './utils/platform'

package/src/index.ts

@@ -0,0 +1,20 @@
+import { SessionRecorder } from './sessionRecorder'
+
+const SessionRecorderInstance = new SessionRecorder()
+
+// Export the instance as default
+export default SessionRecorderInstance
+
+// Export types and classes
+export * from './types'
+export { SessionRecorder } from './sessionRecorder'
+export { TracerReactNativeSDK } from './otel'
+export { RecorderReactNativeSDK } from './recorder'
+export { ApiService } from './services/api.service'
+export { StorageService } from './services/storage.service'
+
+// Export common types
+export * from '@multiplayer-app/session-recorder-common'
+
+// Export platform utilities
+export { isExpoEnvironment, getPlatformAttributes, detectPlatform } from './utils/platform'

package/src/otel/helpers.ts

@@ -0,0 +1,21 @@
+
+export function getExporterEndpoint(endpoint?: string): string {
+  return endpoint || 'http://localhost:4318/v1/traces'
+}
+
+export function processHttpPayload(payload: string, maxSize: number = 1000000): string {
+  if (payload.length <= maxSize) {
+    return payload
+  }
+
+  // Truncate payload if it's too large
+  return payload.substring(0, maxSize) + '... [truncated]'
+}
+
+export function headersToObject(headers: Headers): Record<string, string> {
+  const result: Record<string, string> = {}
+  headers.forEach((value: string, key: string) => {
+    result[key] = value
+  })
+  return result
+}