eventlog-rn 0.3.1

package/src/core/network.ts

@@ -0,0 +1,209 @@
+/**
+ * Network interception logic (Fetch & XHR)
+ */
+
+import type { EventLog, FeatureConfig, NetworkEventPayload } from '../types';
+
+type NetworkConfig = NonNullable<FeatureConfig['network']>;
+
+// Keep original globals
+const originalFetch = global.fetch;
+const originalXMLHttpRequest = global.XMLHttpRequest;
+
+/**
+ * Intercept Fetch API
+ */
+const interceptFetch = (eventLog: EventLog, config: NetworkConfig) => {
+  if (!config.interceptFetch) return;
+
+  global.fetch = async (input: RequestInfo | URL, init?: RequestInit) => {
+    const startTime = Date.now();
+    const url = typeof input === 'string' ? input : input instanceof URL ? input.toString() : input.url;
+    const method = (init?.method ?? 'GET').toUpperCase();
+
+    try {
+      const response = await originalFetch(input, init);
+      const endTime = Date.now();
+      const duration = endTime - startTime;
+
+      // Clone response to read body without consuming original stream
+      const clone = response.clone();
+      
+      let responseBody: unknown;
+      if (config.logResponseBody) {
+         try {
+            // Text first to check size/parse JSON
+            const text = await clone.text();
+            if (!config.maxBodySize || text.length <= config.maxBodySize) {
+                try {
+                    responseBody = JSON.parse(text);
+                } catch {
+                    responseBody = text;
+                }
+            } else {
+                responseBody = `[Body too large: ${text.length} bytes]`;
+            }
+         } catch {
+            responseBody = '[Failed to read response body]';
+         }
+      }
+
+      const payload: NetworkEventPayload = {
+        url,
+        method,
+        status: response.status,
+        duration,
+        responseHeaders: config.redactHeaders ? redactHeaders(response.headers, config.redactHeaders) : headersToObject(response.headers),
+        responseBody,
+      };
+
+      eventLog.network(payload);
+      
+      return response;
+    } catch (error) {
+      const endTime = Date.now();
+      eventLog.error(error, {
+        url,
+        method,
+        duration: endTime - startTime,
+        category: 'network', // Context hack
+      });
+      throw error;
+    }
+  };
+};
+
+/**
+ * Intercept XMLHttpRequest
+ */
+const interceptXHR = (eventLog: EventLog, config: NetworkConfig) => {
+  // If explicitly disabled, return. Undefined means enabled by default.
+  if (config.interceptAxios === false) return;
+
+  const XHR = originalXMLHttpRequest;
+  
+  // @ts-ignore - Monkey patching
+  global.XMLHttpRequest = function() {
+    const xhr = new XHR();
+    const startTime = Date.now();
+    let method = 'GET';
+    let url = '';
+
+    const originalOpen = xhr.open;
+    const originalSend = xhr.send;
+
+    xhr.open = function(m: string, u: string, ...args: any[]) {
+      method = m.toUpperCase();
+      url = u;
+      return originalOpen.apply(this, [m, u, ...args] as any);
+    };
+
+    xhr.send = function(body?: any) {
+        xhr.addEventListener('loadend', () => {
+            const duration = Date.now() - startTime;
+             
+             // Extract headers (messy in XHR)
+             const responseHeadersString = xhr.getAllResponseHeaders();
+             const responseHeaders = parseXHRHeaders(responseHeadersString);
+
+             let responseBody: unknown;
+             if (config.logResponseBody) {
+                 try {
+                     if (xhr.responseType === '' || xhr.responseType === 'text') {
+                         responseBody = xhr.responseText;
+                         if (responseBody && typeof responseBody === 'string' && (!config.maxBodySize || responseBody.length <= config.maxBodySize)) {
+                             try { responseBody = JSON.parse(responseBody); } catch {}
+                         }
+                     }
+                 } catch {}
+             }
+
+            const payload: NetworkEventPayload = {
+              url,
+              method,
+              status: xhr.status,
+              duration,
+              responseHeaders: config.redactHeaders ? redactHeaders(responseHeaders, config.redactHeaders) : responseHeaders as any,
+              responseBody,
+            };
+            
+            // @ts-ignore - We will add this method
+            if (typeof eventLog.network === 'function') {
+                // @ts-ignore
+                eventLog.network(payload);
+            }
+        });
+        return originalSend.apply(this, [body]);
+    }
+
+    return xhr;
+  };
+  
+  // Restore prototype chain
+  global.XMLHttpRequest.prototype = XHR.prototype;
+  Object.assign(global.XMLHttpRequest, XHR);
+};
+
+/**
+ * Helpers
+ */
+const headersToObject = (headers: Headers): Record<string, string> => {
+    const obj: Record<string, string> = {};
+    headers.forEach((value, key) => {
+        obj[key] = value;
+    });
+    return obj;
+}
+
+const redactHeaders = (headers: Headers | Record<string, string>, keysToRedact: ReadonlyArray<string>): Record<string, string> => {
+    const obj = headers instanceof Headers ? headersToObject(headers) : headers;
+    const redacted: Record<string, string> = { ...obj };
+    keysToRedact.forEach(key => {
+        const lowerKey = key.toLowerCase();
+        // Simple case-insensitive match simulation
+        Object.keys(redacted).forEach(h => {
+            if (h.toLowerCase() === lowerKey) {
+                redacted[h] = '***REDACTED***';
+            }
+        });
+    });
+    return redacted;
+}
+
+const parseXHRHeaders = (headers: string): Record<string, string> => {
+    if (!headers) return {};
+    const result: Record<string, string> = {};
+    const pairs = headers.trim().split(/[\r\n]+/);
+    pairs.forEach(line => {
+        const parts = line.split(': ');
+        if (parts.length >= 2) {
+            const key = parts.shift()!;
+            const value = parts.join(': ');
+            result[key] = value;
+        }
+    });
+    return result;
+}
+
+/**
+ * Main enable function
+ */
+export const enableNetworkInterception = (eventLog: EventLog, config: FeatureConfig['network']) => {
+    if (!config || !config.enabled) return;
+    
+    // Cleanup first just in case
+    restoreNetworkInterception();
+
+    if (config.interceptFetch !== false) {
+        interceptFetch(eventLog, config);
+    }
+    // Default to true for XHR if not specified, or checks interceptAxios
+    if (config.interceptAxios !== false) {
+        interceptXHR(eventLog, config);
+    }
+};
+
+export const restoreNetworkInterception = () => {
+    global.fetch = originalFetch;
+    global.XMLHttpRequest = originalXMLHttpRequest;
+};

package/src/core/query.ts

@@ -0,0 +1,50 @@
+/**
+ * Query events by filters
+ */
+
+import type { Event, EventQuery } from '../types';
+
+export const queryEvents = (
+  events: ReadonlyArray<Event>,
+  query: EventQuery
+): ReadonlyArray<Event> => {
+  let filtered = events;
+
+  // Filter by category
+  if (query.category && query.category.length > 0) {
+    filtered = filtered.filter((e) => {
+      const categories = query.category;
+      return categories ? categories.includes(e.category) : true;
+    });
+  }
+
+  // Filter by time range
+  if (query.timeRange) {
+    filtered = filtered.filter(
+      (e) =>
+        e.timestamp >= query.timeRange!.start &&
+        e.timestamp <= query.timeRange!.end
+    );
+  }
+
+  // Filter by session ID
+  if (query.sessionId) {
+    filtered = filtered.filter((e) => e.sessionId === query.sessionId);
+  }
+
+  // Search in payload
+  if (query.search) {
+    const searchLower = query.search.toLowerCase();
+    filtered = filtered.filter((e) => {
+      const payloadStr = JSON.stringify(e.payload).toLowerCase();
+      return payloadStr.includes(searchLower);
+    });
+  }
+
+  // Limit results
+  if (query.limit && query.limit > 0) {
+    filtered = filtered.slice(-query.limit);
+  }
+
+  return filtered;
+};

package/src/core/utils.ts

@@ -0,0 +1,54 @@
+/**
+ * Pure utility functions
+ */
+
+/**
+ * Generate a UUID v4
+ */
+export const generateUUID = (): string => {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+    const r = (Math.random() * 16) | 0;
+    const v = c === 'x' ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+};
+
+/**
+ * Get current timestamp in milliseconds
+ */
+export const getTimestamp = (): number => Date.now();
+
+/**
+ * Get ISO 8601 timestamp with timezone
+ */
+export const getTimestampISO = (): string => new Date().toISOString();
+
+/**
+ * Get IANA timezone identifier
+ */
+export const getTimezone = (): string => {
+  try {
+    return Intl.DateTimeFormat().resolvedOptions().timeZone;
+  } catch {
+    return 'UTC';
+  }
+};
+
+/**
+ * Debounce function (returns a new function, pure in concept)
+ */
+export const debounce = <T extends ReadonlyArray<unknown>>(
+  func: (...args: T) => void,
+  wait: number
+): ((...args: T) => void) => {
+  let timeout: ReturnType<typeof setTimeout> | null = null;
+
+  return (...args: T): void => {
+    if (timeout !== null) {
+      clearTimeout(timeout);
+    }
+    timeout = setTimeout(() => {
+      func(...args);
+    }, wait);
+  };
+};

package/src/index.ts

@@ -0,0 +1,39 @@
+/**
+ * eventlog-rn
+ * Functional, type-safe event logging SDK for React Native
+ */
+
+export { createEventLog } from './core/eventlog';
+export { EventLogViewer } from './viewer/EventLogViewer';
+export type { EventLogViewerProps } from './viewer/types';
+export type {
+  EventLog,
+  EventLogConfig,
+  Event,
+  EventCategory,
+  EventContext,
+  Session,
+  ExportOptions,
+  LogLevel,
+  Result,
+  StorageAdapter,
+  NetworkEventPayload,
+  ErrorEventPayload,
+  EventQuery,
+} from './types';
+
+/**
+ * Default singleton instance
+ * 
+ * Usage:
+ * ```typescript
+ * import { eventLog } from 'eventlog-rn';
+ * import AsyncStorage from '@react-native-async-storage/async-storage';
+ * 
+ * await eventLog.init({ storage: AsyncStorage });
+ * eventLog.screen('Home');
+ * ```
+ */
+import { eventLog } from './instance';
+export { eventLog };
+export { EventLogErrorBoundary } from './components/EventLogErrorBoundary';

package/src/instance.ts

@@ -0,0 +1,7 @@
+/**
+ * Singleton instance of EventLog
+ * Moved here to avoid circular dependencies
+ */
+import { createEventLog } from './core/eventlog';
+
+export const eventLog = createEventLog();

package/src/storage/mmkv.ts

@@ -0,0 +1,57 @@
+/**
+ * Internal MMKV storage adapter
+ * Supports both MMKV v3 (RN 0.74+) and v4 (RN 0.75+)
+ * MMKV is synchronous, but we wrap it in Promises to match StorageAdapter interface
+ */
+
+import type { StorageAdapter } from '../types';
+
+// Detect and initialize MMKV with version compatibility
+import * as MMKVModule from 'react-native-mmkv';
+
+let mmkv: any;
+
+try {
+  // Handle ESM vs CJS
+  const m = (MMKVModule as any)?.default ? (MMKVModule as any).default : MMKVModule;
+
+  if (typeof (m as any).createMMKV === 'function') {
+    // v4 API
+    mmkv = (m as any).createMMKV({ id: 'eventlog-rn' });
+
+  } else if (typeof (m as any).MMKV === 'function') {
+    // v3 API
+    mmkv = new (m as any).MMKV({ id: 'eventlog-rn' });
+
+  } else if (typeof m === 'function') {
+    // v2/v3 fallback (default export)
+    mmkv = new (m as any)({ id: 'eventlog-rn' });
+
+  } else {
+    throw new Error('MMKV module found but no valid constructor (createMMKV or class MMKV) found.');
+  }
+} catch (error: any) {
+  const errorMessage = error instanceof Error ? error.message : String(error);
+  throw new Error(
+    `[EventLog] Failed to initialize MMKV: ${errorMessage}.`
+  );
+}
+
+export const internalStorage: StorageAdapter = {
+  setItem: async (key: string, value: string): Promise<void> => {
+    mmkv.set(key, value);
+  },
+
+  getItem: async (key: string): Promise<string | null> => {
+    return mmkv.getString(key) ?? null;
+  },
+
+  removeItem: async (key: string): Promise<void> => {
+    // v4 uses remove(), v3 uses delete()
+    if (typeof mmkv.remove === 'function') {
+      mmkv.remove(key);
+    } else {
+      mmkv.delete(key);
+    }
+  },
+};

package/src/types.ts

@@ -0,0 +1,159 @@
+/**
+ * Type definitions for eventlog-rn/core
+ * Strict, immutable types following functional programming principles
+ */
+
+/**
+ * Storage adapter interface (AsyncStorage-compatible)
+ */
+export type StorageAdapter = Readonly<{
+  getItem: (key: string) => Promise<string | null>;
+  setItem: (key: string, value: string) => Promise<void>;
+  removeItem: (key: string) => Promise<void>;
+}>;
+
+/**
+ * Event categories
+ */
+export type EventCategory = 'screen' | 'action' | 'network' | 'error' | 'log';
+
+/**
+ * Log levels
+ */
+export type LogLevel = 'debug' | 'info' | 'warn' | 'error';
+
+/**
+ * Event context (attached to all events)
+ */
+export type EventContext = Readonly<{
+  readonly user?: Readonly<Record<string, unknown>>;
+  readonly deviceInfo?: Readonly<Record<string, unknown>>;
+  readonly [key: string]: unknown;
+}>;
+
+/**
+ * Immutable event structure
+ */
+export type Event = Readonly<{
+  readonly eventId: string;
+  readonly sessionId: string;
+  readonly seq: number;
+  readonly timestamp: number;
+  readonly timestampISO: string;
+  readonly timezone: string;
+  readonly category: EventCategory;
+  readonly payload: unknown;
+  readonly context: EventContext;
+}>;
+
+/**
+ * Session information
+ */
+export type Session = Readonly<{
+  readonly sessionId: string;
+  readonly sessionStart: number;
+  readonly startType: 'cold' | 'warm';
+  readonly seq: number;
+  readonly lastActivityTime: number;
+}>;
+
+/**
+ * Feature configuration
+ */
+export type FeatureConfig = Readonly<{
+  readonly network?: Readonly<{
+    readonly enabled?: boolean;
+    readonly interceptFetch?: boolean;
+    readonly interceptAxios?: boolean;
+    readonly logRequestBody?: boolean;
+    readonly logResponseBody?: boolean;
+    readonly maxBodySize?: number;
+    readonly redactHeaders?: ReadonlyArray<string>;
+  }>;
+  readonly globalErrors?: Readonly<{
+    readonly enabled?: boolean;
+  }>;
+}>;
+
+/**
+ * Tracker configuration
+ */
+export type EventLogConfig = Readonly<{
+  readonly autoDetect?: boolean;
+  readonly maxEvents?: number;
+  readonly maxAgeDays?: number;
+  readonly sessionTimeoutMinutes?: number;
+  readonly batchWriteDelayMs?: number;
+  readonly sanitize?: (event: Event) => Event;
+  readonly features?: FeatureConfig;
+}>;
+
+/**
+ * Export options
+ */
+export type ExportOptions = Readonly<{
+  readonly mode: 'repro' | 'full';
+}>;
+
+/**
+ * Network event payload
+ */
+export type NetworkEventPayload = Readonly<{
+  readonly url: string;
+  readonly method: string;
+  readonly status?: number;
+  readonly duration?: number;
+  readonly error?: string;
+  readonly requestHeaders?: Readonly<Record<string, string>>;
+  readonly responseHeaders?: Readonly<Record<string, string>>;
+  readonly requestBody?: unknown;
+  readonly responseBody?: unknown;
+}>;
+
+/**
+ * Error event payload
+ */
+export type ErrorEventPayload = Readonly<{
+  readonly message: string;
+  readonly stack?: string;
+  readonly isFatal?: boolean;
+  readonly context?: unknown;
+}>;
+
+/**
+ * Result type for operations that can fail
+ */
+export type Result<T, E = Error> =
+  | Readonly<{ readonly ok: true; readonly value: T }>
+  | Readonly<{ readonly ok: false; readonly error: E }>;
+
+/**
+ * Event query for filtering
+ */
+export type EventQuery = Readonly<{
+  readonly category?: ReadonlyArray<EventCategory>;
+  readonly timeRange?: Readonly<{ readonly start: number; readonly end: number }>;
+  readonly sessionId?: string;
+  readonly search?: string;
+  readonly limit?: number;
+}>;
+
+/**
+ * EventLog API
+ */
+export type EventLog = Readonly<{
+  readonly init: (config?: Partial<EventLogConfig>) => Promise<Result<void>>;
+  readonly isReady: () => boolean;
+  readonly screen: (name: string, params?: unknown) => Result<void>;
+  readonly action: (name: string, data?: unknown) => Result<void>;
+  readonly log: (level: LogLevel, message: string, data?: unknown) => Result<void>;
+  readonly error: (error: unknown, context?: unknown) => Result<void>;
+  readonly setUser: (user: Readonly<Record<string, unknown>>) => void;
+  readonly setContext: (key: string, value: unknown) => void;
+  readonly setDeviceInfo: (info: Readonly<Record<string, unknown>>) => void;
+  readonly export: (options: ExportOptions) => Promise<Result<string>>;
+  readonly clear: () => Promise<Result<void>>;
+  readonly getEvents: () => Result<ReadonlyArray<Event>>;
+  readonly query: (query: EventQuery) => Result<ReadonlyArray<Event>>;
+  readonly network: (payload: NetworkEventPayload) => Result<void>;
+}>;

package/src/viewer/EventItem.tsx

@@ -0,0 +1,63 @@
+/**
+ * EventItem component
+ */
+
+import React from 'react';
+import { View, Text, TouchableOpacity } from 'react-native';
+import type { EventItemProps } from './types';
+import { CATEGORY_COLORS } from './types';
+import { styles } from './styles';
+
+export const EventItem: React.FC<EventItemProps> = ({ event, expanded, onPress }) => {
+  return (
+    <TouchableOpacity onPress={onPress} style={styles.eventItem}>
+      {/* Event Header */}
+      <View style={styles.eventHeader}>
+        <View
+          style={[
+            styles.categoryBadge,
+            { backgroundColor: CATEGORY_COLORS[event.category] },
+          ]}
+        >
+          <Text style={styles.categoryText}>{event.category}</Text>
+        </View>
+        <Text style={styles.timestamp}>
+          {new Date(event.timestamp).toLocaleTimeString()}
+        </Text>
+      </View>
+
+      {/* Event Summary */}
+      <Text style={styles.eventSummary} numberOfLines={expanded ? undefined : 1}>
+        {JSON.stringify(event.payload)}
+      </Text>
+
+      {/* Expanded Details */}
+      {expanded && (
+        <View style={styles.eventDetails}>
+          <Text style={styles.detailsLabel}>Session:</Text>
+          <Text style={styles.detailsText}>{event.sessionId}</Text>
+
+          <Text style={styles.detailsLabel}>Sequence:</Text>
+          <Text style={styles.detailsText}>{event.seq}</Text>
+
+          <Text style={styles.detailsLabel}>Timezone:</Text>
+          <Text style={styles.detailsText}>{event.timezone}</Text>
+
+          {event.context && Object.keys(event.context).length > 0 && (
+            <>
+              <Text style={styles.detailsLabel}>Context:</Text>
+              <Text style={styles.detailsText}>
+                {JSON.stringify(event.context, null, 2)}
+              </Text>
+            </>
+          )}
+
+          <Text style={styles.detailsLabel}>Full Event:</Text>
+          <Text style={styles.detailsText}>
+            {JSON.stringify(event, null, 2)}
+          </Text>
+        </View>
+      )}
+    </TouchableOpacity>
+  );
+};

package/src/viewer/EventList.tsx

@@ -0,0 +1,41 @@
+/**
+ * EventList component
+ */
+
+import React from 'react';
+import { FlatList, View, Text } from 'react-native';
+import type { EventListProps } from './types';
+import { EventItem } from './EventItem';
+import { styles } from './styles';
+import type { Event } from '../types';
+
+export const EventList: React.FC<EventListProps> = ({ events, onEventPress, expandedId }) => {
+  const renderItem = ({ item }: { item: Event }) => (
+    <EventItem
+      event={item}
+      expanded={expandedId === item.eventId}
+      onPress={() => onEventPress(item.eventId)}
+    />
+  );
+
+  const keyExtractor = (item: Event) => item.eventId;
+
+  const renderEmpty = () => (
+    <View style={styles.emptyState}>
+      <Text style={styles.emptyText}>No events</Text>
+    </View>
+  );
+
+  return (
+    <FlatList
+      data={events}
+      renderItem={renderItem}
+      keyExtractor={keyExtractor}
+      ListEmptyComponent={renderEmpty}
+      style={styles.eventList}
+      initialNumToRender={20}
+      maxToRenderPerBatch={10}
+      windowSize={5}
+    />
+  );
+};