react-native-inapp-inspector 2.2.2 → 2.2.4

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,
+    );
+  });
+};