@multiplayer-app/session-recorder-react-native 1.3.15 → 1.3.21

package/src/services/crashBuffer.service.ts

@@ -0,0 +1,327 @@
+import { Platform } from 'react-native';
+import type {
+  CrashBufferEventMap,
+  CrashBufferEventName,
+  CrashBufferErrorSpanAppendedEvent,
+  CrashBuffer,
+} from '@multiplayer-app/session-recorder-common';
+import { SpanStatusCode } from '@opentelemetry/api';
+
+// Safe import for AsyncStorage with web fallback
+let AsyncStorage: any = null;
+const isWeb = Platform.OS === 'web';
+
+if (!isWeb) {
+  try {
+    AsyncStorage = require('@react-native-async-storage/async-storage').default;
+  } catch (_error) {
+    AsyncStorage = null;
+  }
+} else {
+  AsyncStorage = {
+    getItem: (_key: string) => Promise.resolve(null),
+    setItem: (_key: string, _value: string) => Promise.resolve(undefined),
+    removeItem: (_key: string) => Promise.resolve(undefined),
+    multiRemove: (_keys: string[]) => Promise.resolve(undefined),
+    multiGet: (_keys: string[]) => Promise.resolve([]),
+    multiSet: (_pairs: Array<[string, string]>) => Promise.resolve(undefined),
+  };
+}
+
+type RecordKind = 'rrweb' | 'span';
+
+type IndexEntry = {
+  id: string;
+  ts: number;
+  kind: RecordKind;
+};
+
+const INDEX_KEY = 'mp_crash_buffer_index_v1';
+const ATTRS_KEY = 'mp_crash_buffer_attrs_v1';
+const RECORD_PREFIX = 'mp_crash_buffer_rec_v1:';
+
+const randomId = (): string =>
+  `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+
+export type CrashBufferSnapshot = {
+  rrwebEvents: Array<{ ts: number; event: any }>;
+  otelSpans: Array<{ ts: number; span: any }>;
+  attrs: any | null;
+  windowMs: number;
+  fromTs: number;
+  toTs: number;
+};
+
+export class CrashBufferService implements CrashBuffer {
+  private static instance: CrashBufferService | null = null;
+
+  private index: IndexEntry[] = [];
+  private indexLoaded = false;
+  private lastPruneAt = 0;
+  private opChain: Promise<any> = Promise.resolve();
+  private defaultWindowMs: number = 1 * 60 * 1000;
+  private listeners = new Map<
+    CrashBufferEventName,
+    Set<(payload: CrashBufferEventMap[CrashBufferEventName]) => void>
+  >();
+
+  static getInstance(): CrashBufferService {
+    if (!CrashBufferService.instance) {
+      CrashBufferService.instance = new CrashBufferService();
+    }
+    return CrashBufferService.instance;
+  }
+
+  private enqueue<T>(fn: () => Promise<T>): Promise<T> {
+    const next = this.opChain.then(fn, fn);
+    // Preserve chain, but don't leak rejections.
+    this.opChain = next.then(
+      () => undefined,
+      () => undefined
+    );
+    return next;
+  }
+
+  private async ensureIndexLoaded(): Promise<void> {
+    if (this.indexLoaded) return;
+    if (!AsyncStorage) {
+      this.indexLoaded = true;
+      this.index = [];
+      return;
+    }
+    try {
+      const raw = await AsyncStorage.getItem(INDEX_KEY);
+      this.index = raw ? JSON.parse(raw) : [];
+    } catch (_e) {
+      this.index = [];
+    } finally {
+      this.indexLoaded = true;
+    }
+  }
+
+  async setAttrs(attrs: any): Promise<void> {
+    return this.enqueue(async () => {
+      if (!AsyncStorage) return;
+      try {
+        await AsyncStorage.setItem(ATTRS_KEY, JSON.stringify(attrs || null));
+      } catch (_e) {
+        // best-effort
+      }
+    });
+  }
+
+  async appendEvent(
+    payload: { ts: number; event: any },
+    windowMs?: number
+  ): Promise<void> {
+    return this.appendRecord(
+      'rrweb',
+      payload.ts,
+      payload,
+      windowMs ?? this.defaultWindowMs
+    );
+  }
+
+  async appendSpans(
+    payload: Array<{ ts: number; span: any }>,
+    windowMs?: number
+  ): Promise<void> {
+    if (!payload.length) return;
+    const effectiveWindowMs = windowMs ?? this.defaultWindowMs;
+    return this.enqueue(async () => {
+      if (!AsyncStorage) return;
+      await this.ensureIndexLoaded();
+
+      const pairs: Array<[string, string]> = [];
+      let errorEvent: CrashBufferErrorSpanAppendedEvent | null = null;
+      for (const p of payload) {
+        const id = randomId();
+        const key = `${RECORD_PREFIX}${id}`;
+        const entry: IndexEntry = { id, ts: p.ts, kind: 'span' };
+        this.index.push(entry);
+        pairs.push([key, JSON.stringify(p)]);
+        if (!errorEvent && p?.span?.status?.code === SpanStatusCode.ERROR) {
+          errorEvent = { ts: p.ts, span: p.span };
+        }
+      }
+
+      try {
+        await AsyncStorage.multiSet(pairs);
+        await AsyncStorage.setItem(INDEX_KEY, JSON.stringify(this.index));
+      } catch (_e) {
+        // best-effort
+      }
+
+      this.pruneSoon(effectiveWindowMs);
+
+      if (errorEvent) {
+        this._emit('error-span-appended', errorEvent);
+      }
+    });
+  }
+
+  setDefaultWindowMs(windowMs: number): void {
+    this.defaultWindowMs = Math.max(10_000, windowMs || 1 * 60 * 1000);
+  }
+
+  on<E extends CrashBufferEventName>(
+    event: E,
+    listener: (payload: CrashBufferEventMap[E]) => void
+  ): () => void {
+    const set = this.listeners.get(event) || new Set();
+    set.add(listener as any);
+    this.listeners.set(event, set as any);
+    return () => this.off(event, listener as any);
+  }
+
+  off<E extends CrashBufferEventName>(
+    event: E,
+    listener: (payload: CrashBufferEventMap[E]) => void
+  ): void {
+    const set = this.listeners.get(event);
+    if (!set) return;
+    set.delete(listener as any);
+    if (set.size === 0) this.listeners.delete(event);
+  }
+
+  private _emit<E extends CrashBufferEventName>(
+    event: E,
+    payload: CrashBufferEventMap[E]
+  ): void {
+    const set = this.listeners.get(event);
+    if (!set || set.size === 0) return;
+    for (const fn of Array.from(set)) {
+      try {
+        (fn as any)(payload);
+      } catch (_e) {
+        // never throw into app code
+      }
+    }
+  }
+
+  private async appendRecord(
+    kind: RecordKind,
+    ts: number,
+    payload: any,
+    windowMs: number
+  ): Promise<void> {
+    return this.enqueue(async () => {
+      if (!AsyncStorage) return;
+      await this.ensureIndexLoaded();
+
+      const id = randomId();
+      const key = `${RECORD_PREFIX}${id}`;
+      const entry: IndexEntry = { id, ts, kind };
+      this.index.push(entry);
+
+      try {
+        await AsyncStorage.setItem(key, JSON.stringify(payload));
+        await AsyncStorage.setItem(INDEX_KEY, JSON.stringify(this.index));
+      } catch (_e) {
+        // best-effort
+      }
+
+      this.pruneSoon(windowMs);
+    });
+  }
+
+  private pruneSoon(windowMs: number) {
+    const now = Date.now();
+    if (now - this.lastPruneAt < 2000) return;
+    this.lastPruneAt = now;
+    const cutoff = Math.max(0, now - windowMs);
+    void this.pruneOlderThan(cutoff);
+  }
+
+  async pruneOlderThan(cutoffTs: number): Promise<void> {
+    return this.enqueue(async () => {
+      if (!AsyncStorage) return;
+      await this.ensureIndexLoaded();
+      const toRemove = this.index.filter((e) => e.ts < cutoffTs);
+      if (toRemove.length === 0) return;
+
+      const removeKeys = toRemove.map((e) => `${RECORD_PREFIX}${e.id}`);
+      this.index = this.index.filter((e) => e.ts >= cutoffTs);
+
+      try {
+        await AsyncStorage.multiRemove(removeKeys);
+        await AsyncStorage.setItem(INDEX_KEY, JSON.stringify(this.index));
+      } catch (_e) {
+        // best-effort
+      }
+    });
+  }
+
+  async snapshot(
+    windowMs?: number,
+    now: number = Date.now()
+  ): Promise<CrashBufferSnapshot> {
+    return this.enqueue(async () => {
+      await this.ensureIndexLoaded();
+      const effectiveWindowMs = windowMs ?? this.defaultWindowMs;
+      const toTs = now;
+      const fromTs = Math.max(0, toTs - effectiveWindowMs);
+      const entries = this.index.filter((e) => e.ts >= fromTs && e.ts <= toTs);
+      const keys = entries.map((e) => `${RECORD_PREFIX}${e.id}`);
+
+      let pairs: Array<[string, string | null]> = [];
+      try {
+        pairs = AsyncStorage ? await AsyncStorage.multiGet(keys) : [];
+      } catch (_e) {
+        pairs = [];
+      }
+
+      const byKey = new Map<string, any>();
+      for (const [k, v] of pairs) {
+        if (!v) continue;
+        try {
+          byKey.set(k, JSON.parse(v));
+        } catch (_e) {
+          // ignore
+        }
+      }
+
+      const rrwebEvents: Array<{ ts: number; event: any }> = [];
+      const otelSpans: Array<{ ts: number; span: any }> = [];
+
+      for (const e of entries.sort((a, b) => a.ts - b.ts)) {
+        const key = `${RECORD_PREFIX}${e.id}`;
+        const payload = byKey.get(key);
+        if (!payload) continue;
+        if (e.kind === 'rrweb') rrwebEvents.push(payload);
+        if (e.kind === 'span') otelSpans.push(payload);
+      }
+
+      let attrs: any | null = null;
+      try {
+        const raw = AsyncStorage ? await AsyncStorage.getItem(ATTRS_KEY) : null;
+        attrs = raw ? JSON.parse(raw) : null;
+      } catch (_e) {
+        attrs = null;
+      }
+
+      return {
+        rrwebEvents,
+        otelSpans,
+        attrs,
+        windowMs: effectiveWindowMs,
+        fromTs,
+        toTs,
+      };
+    });
+  }
+
+  async clear(): Promise<void> {
+    return this.enqueue(async () => {
+      if (!AsyncStorage) return;
+      await this.ensureIndexLoaded();
+      const keys = this.index.map((e) => `${RECORD_PREFIX}${e.id}`);
+      this.index = [];
+      try {
+        await AsyncStorage.multiRemove([INDEX_KEY, ATTRS_KEY, ...keys]);
+      } catch (_e) {
+        // best-effort
+      }
+    });
+  }
+}

package/src/services/socket.service.ts

@@ -13,8 +13,13 @@ import {
   REMOTE_SESSION_RECORDING_START,
   REMOTE_SESSION_RECORDING_STOP,
   SESSION_STARTED_EVENT,
+  SESSION_SAVE_BUFFER_EVENT,
 } from '../config';
-import type { ISession, IUserAttributes } from '@multiplayer-app/session-recorder-common';
+import {
+  type ISession,
+  type IUserAttributes,
+  ATTR_MULTIPLAYER_SESSION_CLIENT_ID,
+} from '@multiplayer-app/session-recorder-common';
 
 const MAX_RECONNECTION_ATTEMPTS = 2;
 
@@ -22,12 +27,14 @@ export type SocketServiceEvents =
   | typeof SESSION_STOPPED_EVENT
   | typeof SESSION_AUTO_CREATED
   | typeof REMOTE_SESSION_RECORDING_START
-  | typeof REMOTE_SESSION_RECORDING_STOP;
+  | typeof REMOTE_SESSION_RECORDING_STOP
+  | typeof SESSION_SAVE_BUFFER_EVENT;
 
 export interface SocketServiceOptions {
   apiKey: string;
   socketUrl: string;
   keepAlive?: boolean;
+  clientId?: string;
 }
 
 export class SocketService extends Observable<SocketServiceEvents> {
@@ -72,15 +79,13 @@ export class SocketService extends Observable<SocketServiceEvents> {
    */
   public updateConfigs(config: Partial<SocketServiceOptions>): void {
     // If any config changed, reconnect if connected
-    const hasChanges = Object.keys(config).some(
-      (key) => {
-        const typedKey = key as keyof SocketServiceOptions;
-        return (
-          config[typedKey] !== undefined &&
-          config[typedKey] !== this.options[typedKey]
-        );
-      }
-    );
+    const hasChanges = Object.keys(config).some((key) => {
+      const typedKey = key as keyof SocketServiceOptions;
+      return (
+        config[typedKey] !== undefined &&
+        config[typedKey] !== this.options[typedKey]
+      );
+    });
 
     if (hasChanges) {
       this.options = { ...this.options, ...config };
@@ -106,6 +111,9 @@ export class SocketService extends Observable<SocketServiceEvents> {
       path: '/v0/radar/ws',
       auth: {
         'x-api-key': this.options.apiKey,
+        ...(this.options.clientId
+          ? { [ATTR_MULTIPLAYER_SESSION_CLIENT_ID]: this.options.clientId }
+          : {}),
       },
       reconnectionAttempts: 2,
       transports: ['websocket'],
@@ -146,6 +154,10 @@ export class SocketService extends Observable<SocketServiceEvents> {
     this.socket.on(REMOTE_SESSION_RECORDING_STOP, (data: any) => {
       this.emit(REMOTE_SESSION_RECORDING_STOP, [data]);
     });
+
+    this.socket.on(SESSION_SAVE_BUFFER_EVENT, (data: any) => {
+      this.emit(SESSION_SAVE_BUFFER_EVENT, [data]);
+    });
   }
 
   private checkReconnectionAttempts(): void {
@@ -156,10 +168,10 @@ export class SocketService extends Observable<SocketServiceEvents> {
 
   private emitSocketEvent(name: string, data: any): void {
     if (this.socket && this.isConnected) {
-      this.socket.emit(name, data)
+      this.socket.emit(name, data);
     } else {
-      this.queue.push({ data, name })
-      this._initConnection()
+      this.queue.push({ data, name });
+      this._initConnection();
     }
   }
 
@@ -174,12 +186,10 @@ export class SocketService extends Observable<SocketServiceEvents> {
     }
   }
 
-
   public send(event: any): void {
-    this.emitSocketEvent(SESSION_ADD_EVENT, event)
+    this.emitSocketEvent(SESSION_ADD_EVENT, event);
   }
 
-
   public subscribeToSession(session: ISession): void {
     this.sessionId = session.shortId || session._id;
     const payload = {
@@ -188,22 +198,26 @@ export class SocketService extends Observable<SocketServiceEvents> {
       debugSessionId: this.sessionId,
       sessionType: session.creationType,
     };
-    this.emitSocketEvent(SESSION_SUBSCRIBE_EVENT, payload)
+    this.emitSocketEvent(SESSION_SUBSCRIBE_EVENT, payload);
     // use long id instead of short id
-    this.emitSocketEvent(SESSION_STARTED_EVENT, { debugSessionId: session._id })
+    this.emitSocketEvent(SESSION_STARTED_EVENT, {
+      debugSessionId: session._id,
+    });
   }
 
   public unsubscribeFromSession(stopSession?: boolean) {
     if (this.sessionId) {
-      this.emitSocketEvent(SESSION_UNSUBSCRIBE_EVENT, { debugSessionId: this.sessionId })
+      this.emitSocketEvent(SESSION_UNSUBSCRIBE_EVENT, {
+        debugSessionId: this.sessionId,
+      });
       if (stopSession) {
-        this.emitSocketEvent(SESSION_STOPPED_EVENT, {})
+        this.emitSocketEvent(SESSION_STOPPED_EVENT, {});
       }
     }
   }
 
   public setUser(userAttributes: IUserAttributes | null): void {
-    this.emitSocketEvent(SOCKET_SET_USER_EVENT, userAttributes)
+    this.emitSocketEvent(SOCKET_SET_USER_EVENT, userAttributes);
   }
 
   public close(): Promise<void> {