react-native-inapp-inspector 2.2.2 → 2.2.3

package/src/customHooks/reduxLogger.ts

@@ -0,0 +1,406 @@
+// #8 — Redux inspector module.
+//
+// Two integration paths, both feeding the same timeline/state snapshot:
+//
+//   1. `inspectorReduxMiddleware` (recommended) — a standard Redux middleware.
+//      Because it sits inside the middleware chain it sees EVERY action,
+//      including ones dispatched from thunks, sagas, listeners and RTK Query.
+//
+//   2. `connectReduxStore(store)` — zero-config fallback. It wraps the outer
+//      `store.dispatch` AND diffs state on `store.subscribe`, so even actions
+//      that bypass the wrapped dispatch (thunk/saga internals capture the raw
+//      dispatch reference at store-creation time) still update the state tree
+//      and per-reducer "last action" consistently.
+
+import {ReduxHistoryEntry} from '../types';
+import {parseStackLine} from '../helpers';
+
+export {ReduxHistoryEntry};
+
+let currentReduxState: any = null;
+const listeners = new Set<() => void>();
+let globalReduxAutoRefresh = true;
+let isReduxModuleEnabled = false;
+
+export const setReduxModuleEnabled = (enabled: boolean) => {
+  isReduxModuleEnabled = enabled;
+};
+
+export const getReduxModuleEnabled = () => isReduxModuleEnabled;
+
+let lastActionForReducer: Record<string, any> = {};
+
+let actionHistory: ReduxHistoryEntry[] = [];
+
+let maxReduxHistoryLimit = 50;
+let historyIdSeq = 0;
+
+export const setMaxReduxHistoryLimit = (limit: number): void => {
+  maxReduxHistoryLimit = Math.max(10, limit);
+  if (actionHistory.length > maxReduxHistoryLimit) {
+    actionHistory = actionHistory.slice(0, maxReduxHistoryLimit);
+    notify();
+  }
+};
+
+export const getMaxReduxHistoryLimit = (): number => maxReduxHistoryLimit;
+
+export const pruneReduxHistory = (targetCount?: number): number => {
+  const countToKeep = targetCount !== undefined ? Math.max(0, targetCount) : Math.floor(actionHistory.length / 2);
+  const pruned = actionHistory.length - countToKeep;
+  if (pruned > 0) {
+    actionHistory = actionHistory.slice(0, countToKeep);
+    notify();
+  }
+  return Math.max(0, pruned);
+};
+
+// Guards against double-instrumentation (e.g. connectReduxStore called twice,
+// or middleware + connect used together) which previously produced duplicate
+// timeline entries and inconsistent counts.
+const connectedStores = new WeakSet<object>();
+let middlewareAttached = false;
+
+export const isReduxConnected = () =>
+  middlewareAttached || currentReduxState != null || actionHistory.length > 0;
+
+export const getReduxState = () => currentReduxState;
+
+export const setReduxAutoRefresh = (val: boolean) => {
+  globalReduxAutoRefresh = val;
+};
+
+export const getReduxAutoRefresh = () => globalReduxAutoRefresh;
+
+export const getLastActionForReducer = () => lastActionForReducer;
+
+export const clearLastActionForReducer = () => {
+  lastActionForReducer = {};
+  notify();
+};
+
+export const getActionHistory = () => actionHistory;
+
+export const clearActionHistory = () => {
+  actionHistory = [];
+  notify();
+};
+
+export const setReduxState = (state: any) => {
+  currentReduxState = state;
+  notify();
+};
+
+export const subscribeReduxState = (cb: () => void) => {
+  listeners.add(cb);
+  return () => {
+    listeners.delete(cb);
+  };
+};
+
+function notify() {
+  listeners.forEach(cb => cb());
+}
+
+function actionTypeOf(action: any): string {
+  if (typeof action === 'string') return action;
+  if (action && typeof action === 'object' && action.type != null) {
+    return String(action.type);
+  }
+  if (typeof action === 'function') {
+    return action.name ? `thunk: ${action.name}` : 'thunk';
+  }
+  return 'UNKNOWN_ACTION';
+}
+
+function detectActionOrigin(stack: string, actionType: string, actionObj?: any): {
+  originType: 'saga' | 'thunk' | 'ui' | 'direct' | 'listener';
+  caller?: string;
+  callerFile?: string;
+  callerLine?: number;
+  callerCol?: number;
+} {
+  const stackLower = (stack || '').toLowerCase();
+  const typeLower = (actionType || '').toLowerCase();
+
+  // Explicit hint on action if developer tagged it
+  if (actionObj && actionObj.__origin) {
+    const raw = String(actionObj.__origin).toLowerCase();
+    if (raw.includes('saga')) return {originType: 'saga'};
+    if (raw.includes('thunk')) return {originType: 'thunk'};
+    if (raw.includes('ui')) return {originType: 'ui'};
+  }
+
+  // 1. Saga Detection (Stack + Action naming conventions)
+  const isSaga =
+    stackLower.includes('redux-saga') ||
+    stackLower.includes('runputeffect') ||
+    stackLower.includes('proc.js') ||
+    stackLower.includes('effects.js') ||
+    stackLower.includes('sagamiddleware') ||
+    stackLower.includes('saga.ts') ||
+    stackLower.includes('saga.js') ||
+    stackLower.includes('sagas') ||
+    typeLower.includes('saga') ||
+    typeLower.startsWith('saga/') ||
+    typeLower.startsWith('@saga/');
+
+  // 2. Thunk / RTK Query Detection
+  const isThunk =
+    stackLower.includes('createasyncthunk') ||
+    stackLower.includes('redux-thunk') ||
+    stackLower.includes('rtk-query') ||
+    stackLower.includes('thunkmiddleware') ||
+    stackLower.includes('actioncreator') ||
+    typeLower.includes('thunk') ||
+    typeLower.endsWith('/pending') ||
+    typeLower.endsWith('/fulfilled') ||
+    typeLower.endsWith('/rejected');
+
+  // 3. Parse Stack Frames to find best application caller
+  const lines = (stack || '').split('\n').map(l => l.trim()).filter(Boolean);
+  let bestFrame: any = null;
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    // Ignore logger / middleware lines inside inspector
+    if (
+      line.includes('reduxLogger') ||
+      line.includes('inspectorReduxMiddleware') ||
+      line.includes('recordAction') ||
+      line.includes('redux.js') ||
+      line.includes('redux.cjs')
+    ) {
+      continue;
+    }
+    const parsed = parseStackLine(line, false);
+    if (parsed.frameType === 'app' || (!parsed.isRuntimeNoise && parsed.fileName !== 'Unknown')) {
+      bestFrame = parsed;
+      break;
+    }
+  }
+
+  if (!bestFrame && lines.length > 0) {
+    for (let i = 0; i < lines.length; i++) {
+      if (!lines[i].includes('reduxLogger') && !lines[i].includes('inspectorReduxMiddleware')) {
+        bestFrame = parseStackLine(lines[i], false);
+        break;
+      }
+    }
+  }
+
+  let originType: 'saga' | 'thunk' | 'ui' | 'direct' | 'listener' = 'direct';
+  if (isSaga || (bestFrame && bestFrame.fileName?.toLowerCase().includes('saga'))) {
+    originType = 'saga';
+  } else if (isThunk || (bestFrame && bestFrame.fileName?.toLowerCase().includes('thunk'))) {
+    originType = 'thunk';
+  } else if (
+    bestFrame &&
+    (bestFrame.fileName?.endsWith('.tsx') ||
+      bestFrame.functionName?.includes('onPress') ||
+      bestFrame.functionName?.includes('touchable') ||
+      bestFrame.functionName?.includes('Effect'))
+  ) {
+    originType = 'ui';
+  } else if (stackLower.includes('listener') || stackLower.includes('subscribe')) {
+    originType = 'listener';
+  }
+
+  return {
+    originType,
+    caller: bestFrame?.copyableLocation || bestFrame?.raw || undefined,
+    callerFile: bestFrame?.fullPath || bestFrame?.fileName || undefined,
+    callerLine: bestFrame?.lineNumber ? Number(bestFrame.lineNumber) : undefined,
+    callerCol: bestFrame?.columnNumber ? Number(bestFrame.columnNumber) : undefined,
+  };
+}
+
+function extractSliceName(actionType: string, affectedSlices: string[]): string | undefined {
+  if (affectedSlices && affectedSlices.length > 0) {
+    return affectedSlices[0];
+  }
+  // If Redux Toolkit action format: e.g. "users/fetchById" -> "users"
+  const match = actionType.match(/^([a-zA-Z0-9_\-]+)\//);
+  if (match && match[1] && !match[1].startsWith('@@')) {
+    return match[1];
+  }
+  return undefined;
+}
+
+function recordAction(action: any, prevState: any, nextState: any, rawStack?: string) {
+  if (!isReduxModuleEnabled) return;
+  const stack = rawStack || new Error().stack || '';
+  const type = actionTypeOf(action);
+  const payload =
+    action && typeof action === 'object' && action.payload !== undefined
+      ? action.payload
+      : null;
+  const now = Date.now();
+  const timestamp = new Date(now).toLocaleTimeString();
+
+  const affectedSlices: string[] = [];
+  const origin = detectActionOrigin(stack, type, action);
+  const sliceName = extractSliceName(type, affectedSlices);
+
+  if (
+    prevState &&
+    nextState &&
+    typeof prevState === 'object' &&
+    typeof nextState === 'object'
+  ) {
+    Object.keys(nextState).forEach(key => {
+      if (prevState[key] !== nextState[key]) {
+        lastActionForReducer[key] = {
+          type,
+          payload,
+          timestamp,
+          updatedAt: now,
+          originType: origin.originType,
+          callerFile: origin.callerFile,
+          callerLine: origin.callerLine,
+          callerCol: origin.callerCol,
+          caller: origin.caller,
+          stack,
+        };
+        affectedSlices.push(key);
+      }
+    });
+  }
+
+  actionHistory.unshift({
+    id: ++historyIdSeq,
+    type,
+    payload,
+    timestamp,
+    updatedAt: now,
+    affectedSlices,
+    prevState,
+    nextState,
+    stack,
+    caller: origin.caller,
+    callerFile: origin.callerFile,
+    callerLine: origin.callerLine,
+    callerCol: origin.callerCol,
+    originType: origin.originType,
+    sliceName,
+  });
+  if (actionHistory.length > maxReduxHistoryLimit) {
+    actionHistory.length = maxReduxHistoryLimit;
+  }
+
+  if (globalReduxAutoRefresh) {
+    currentReduxState = nextState;
+  }
+  // Timeline / last-action map always changed — notify even when the state
+  // tree snapshot is paused so those panels stay live.
+  notify();
+}
+
+/**
+ * Standard Redux middleware — add it to your store to capture every action,
+ * including those dispatched from thunks, sagas and RTK Query:
+ *
+ *   const store = configureStore({
+ *     reducer,
+ *     middleware: gDM => gDM().concat(inspectorReduxMiddleware),
+ *   });
+ *
+ * Pair with `connectReduxStore(store)` (safe — they de-duplicate) or rely on
+ * the middleware alone; the initial snapshot is taken on the first action.
+ */
+export const inspectorReduxMiddleware =
+  (storeApi: any) => (next: (action: any) => any) => (action: any) => {
+    middlewareAttached = true;
+    const capturedStack = new Error().stack || '';
+    // Thunks are functions — let them run; their inner plain-action dispatches
+    // pass back through this same middleware, so nothing is lost.
+    if (typeof action === 'function') {
+      return next(action);
+    }
+    const prevState = storeApi.getState();
+    const result = next(action);
+    const nextState = storeApi.getState();
+    if (currentReduxState == null) currentReduxState = nextState;
+    recordAction(action, prevState, nextState, capturedStack);
+    return result;
+  };
+
+export const connectReduxStore = (store: any) => {
+  if (
+    !store ||
+    typeof store.getState !== 'function' ||
+    typeof store.subscribe !== 'function'
+  ) {
+    console.warn(
+      '[NetworkInspector] Invalid Redux store passed to connectReduxStore.',
+    );
+    return;
+  }
+
+  // Idempotent — connecting the same store twice must not double-wrap
+  // dispatch or double-record the timeline.
+  if (connectedStores.has(store)) {
+    return;
+  }
+  connectedStores.add(store);
+
+  // Wrap the outer dispatch so directly dispatched actions get full
+  // type/payload attribution. Skipped when the middleware is already
+  // attached, otherwise every direct dispatch would be recorded twice.
+  const originalDispatch = store.dispatch.bind(store);
+  let inWrappedDispatch = false;
+  store.dispatch = (action: any) => {
+    const capturedStack = new Error().stack || '';
+    if (middlewareAttached || typeof action === 'function') {
+      // Middleware handles recording, or it's a thunk whose inner dispatches
+      // will be picked up individually.
+      inWrappedDispatch = true;
+      try {
+        return originalDispatch(action);
+      } finally {
+        inWrappedDispatch = false;
+      }
+    }
+    const prevState = store.getState();
+    inWrappedDispatch = true;
+    let result;
+    try {
+      result = originalDispatch(action);
+    } finally {
+      inWrappedDispatch = false;
+    }
+    recordAction(action, prevState, store.getState(), capturedStack);
+    return result;
+  };
+
+  setReduxState(store.getState());
+
+  // Subscribe-diff fallback: catches state changes whose dispatch bypassed
+  // the wrapper above (thunk/saga internals hold the raw dispatch reference).
+  // Without this, the tree and per-reducer last-action drifted out of sync.
+  let lastSeenState = store.getState();
+  store.subscribe(() => {
+    const nextState = store.getState();
+    if (nextState === lastSeenState) return;
+    const prevState = lastSeenState;
+    lastSeenState = nextState;
+
+    if (inWrappedDispatch || middlewareAttached) {
+      // Already recorded with proper attribution; just refresh the snapshot.
+      if (globalReduxAutoRefresh) {
+        currentReduxState = nextState;
+        notify();
+      }
+      return;
+    }
+    // Change arrived outside the wrapped dispatch — record it so the
+    // timeline stays consistent, even without the original action type.
+    const subStack = new Error().stack || '';
+    recordAction(
+      {type: '@@inspector/EXTERNAL_STATE_CHANGE'},
+      prevState,
+      nextState,
+      subStack,
+    );
+  });
+};

package/src/customHooks/useAccordion.tsx

@@ -0,0 +1,60 @@
+import {useCallback, useRef, useState} from 'react';
+import {Animated} from 'react-native';
+
+const useAccordion = (
+  initialOpen = false,
+  maxBodyHeight = 1200,
+  duration = 280,
+) => {
+  const [isOpen, setIsOpen] = useState(initialOpen);
+  const animVal = useRef(new Animated.Value(initialOpen ? 1 : 0)).current;
+
+  const toggleOpen = useCallback(() => {
+    const next = !isOpen;
+    setIsOpen(next);
+    Animated.timing(animVal, {
+      toValue: next ? 1 : 0,
+      duration,
+      useNativeDriver: false,
+    }).start();
+  }, [isOpen, animVal, duration]);
+
+  const forceOpen = useCallback(
+    (open: boolean) => {
+      setIsOpen(open);
+      Animated.timing(animVal, {
+        toValue: open ? 1 : 0,
+        duration,
+        useNativeDriver: false,
+      }).start();
+    },
+    [animVal, duration],
+  );
+
+  const chevronStyle = {
+    transform: [
+      {
+        rotate: animVal.interpolate({
+          inputRange: [0, 1],
+          outputRange: ['0deg', '180deg'],
+        }),
+      },
+    ],
+  };
+
+  const bodyStyle = {
+    maxHeight: animVal.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, maxBodyHeight],
+    }),
+    overflow: 'hidden' as const,
+    opacity: animVal.interpolate({
+      inputRange: [0, 0.4, 1],
+      outputRange: [0, 0.7, 1],
+    }),
+  };
+
+  return {isOpen, toggleOpen, forceOpen, chevronStyle, bodyStyle};
+};
+
+export default useAccordion;

package/src/decorators/index.ts

@@ -0,0 +1,184 @@
+// ─── Method & Class Decorators for React Native In-App Inspector ─────────────
+//
+// Clean TypeScript decorators to seamlessly annotate methods, asynchronous actions,
+// and API services with automatic inspection, logging, timing, and error boundaries.
+// ─────────────────────────────────────────────────────────────────────────────
+
+export interface InspectLogOptions {
+  tag?: string;
+  logArgs?: boolean;
+  logResult?: boolean;
+  logDuration?: boolean;
+}
+
+/**
+ * `@InspectLog`: Automatically logs method execution, arguments, duration, and return values
+ * to the In-App Inspector Console.
+ *
+ * @example
+ * ```ts
+ * class UserService {
+ *   @InspectLog({ tag: 'API', logArgs: true, logDuration: true })
+ *   async fetchUser(id: string) {
+ *     return api.get(`/users/${id}`);
+ *   }
+ * }
+ * ```
+ */
+export function InspectLog(options: InspectLogOptions = {}) {
+  const {
+    tag = 'Inspect',
+    logArgs = true,
+    logResult = true,
+    logDuration = true,
+  } = options;
+
+  return function (
+    _target: any,
+    propertyKey: string,
+    descriptor: PropertyDescriptor,
+  ) {
+    const originalMethod = descriptor.value;
+
+    descriptor.value = function (...args: any[]) {
+      const start = Date.now();
+      const prefix = `[${tag}] ${propertyKey}`;
+
+      if (logArgs && args.length > 0) {
+        console.log(`${prefix} called with arguments:`, ...args);
+      } else {
+        console.log(`${prefix} invoked`);
+      }
+
+      try {
+        const result = originalMethod.apply(this, args);
+
+        if (result && typeof result.then === 'function') {
+          return result
+            .then((asyncResult: any) => {
+              const elapsed = Date.now() - start;
+              if (logResult) {
+                console.log(
+                  `${prefix} resolved${logDuration ? ` in ${elapsed}ms` : ''}:`,
+                  asyncResult,
+                );
+              }
+              return asyncResult;
+            })
+            .catch((err: any) => {
+              const elapsed = Date.now() - start;
+              console.error(
+                `${prefix} rejected${logDuration ? ` in ${elapsed}ms` : ''}:`,
+                err,
+              );
+              throw err;
+            });
+        }
+
+        const elapsed = Date.now() - start;
+        if (logResult) {
+          console.log(
+            `${prefix} returned${logDuration ? ` in ${elapsed}ms` : ''}:`,
+            result,
+          );
+        }
+        return result;
+      } catch (error) {
+        const elapsed = Date.now() - start;
+        console.error(
+          `${prefix} failed${logDuration ? ` in ${elapsed}ms` : ''}:`,
+          error,
+        );
+        throw error;
+      }
+    };
+
+    return descriptor;
+  };
+}
+
+/**
+ * `@InspectTrackTime`: Measures and logs execution duration for critical functions.
+ *
+ * @example
+ * ```ts
+ * class FeedManager {
+ *   @InspectTrackTime('Feed Data Processing')
+ *   processFeedItems(items: FeedItem[]) { ... }
+ * }
+ * ```
+ */
+export function InspectTrackTime(label?: string) {
+  return function (
+    _target: any,
+    propertyKey: string,
+    descriptor: PropertyDescriptor,
+  ) {
+    const originalMethod = descriptor.value;
+    const metricLabel = label || propertyKey;
+
+    descriptor.value = function (...args: any[]) {
+      const start = Date.now();
+      try {
+        const result = originalMethod.apply(this, args);
+        if (result && typeof result.then === 'function') {
+          return result.finally(() => {
+            const duration = Date.now() - start;
+            console.log(`[PERF] ⚡ ${metricLabel} took ${duration}ms`);
+          });
+        }
+        const duration = Date.now() - start;
+        console.log(`[PERF] ⚡ ${metricLabel} took ${duration}ms`);
+        return result;
+      } catch (err) {
+        const duration = Date.now() - start;
+        console.error(`[PERF] ⚡ ${metricLabel} failed after ${duration}ms:`, err);
+        throw err;
+      }
+    };
+
+    return descriptor;
+  };
+}
+
+/**
+ * `@InspectCatch`: Safely catches unhandled exceptions thrown inside the method,
+ * logs them to the In-App Inspector, and returns a fallback value.
+ *
+ * @example
+ * ```ts
+ * class AuthService {
+ *   @InspectCatch({ fallback: null, tag: 'AUTH' })
+ *   async getCachedToken() { ... }
+ * }
+ * ```
+ */
+export function InspectCatch(options: { fallback?: any; tag?: string } = {}) {
+  const { fallback = undefined, tag = 'Catch' } = options;
+
+  return function (
+    _target: any,
+    propertyKey: string,
+    descriptor: PropertyDescriptor,
+  ) {
+    const originalMethod = descriptor.value;
+
+    descriptor.value = function (...args: any[]) {
+      try {
+        const result = originalMethod.apply(this, args);
+        if (result && typeof result.then === 'function') {
+          return result.catch((err: any) => {
+            console.error(`[${tag}] Error caught in ${propertyKey}:`, err);
+            return fallback;
+          });
+        }
+        return result;
+      } catch (err) {
+        console.error(`[${tag}] Error caught in ${propertyKey}:`, err);
+        return fallback;
+      }
+    };
+
+    return descriptor;
+  };
+}