reactoradar 1.6.10 → 1.6.11

package/README.md

@@ -53,6 +53,17 @@
 | **React** | Component tree and props inspector via `react-devtools-core` relay |
 | **Settings** | 9 color themes, font family/size, configurable panel visibility with drag-to-reorder, Metro port config, keyboard shortcuts, auto-update, support link |
 
+### What's New in v1.6.11
+
+- **Auto-clear on reconnect** — All tabs reset automatically when the RN app relaunches (fresh session, no stale data)
+- **No more `[object Object]`** — Safe string serialization everywhere in Console, Network, and Redux panels
+- **SDK auto-detects platform** — Android emulator (`10.0.2.2`) and iOS simulator (`127.0.0.1`) detected at runtime. No manual HOST editing.
+- **Setup auto-patches legacy `createStore`** — Detects `const middleware = []` pattern and wires `reduxMiddleware` automatically
+- **SDK hardened** — BigInt/circular-safe JSON, Redux state >1MB truncated, binary response guard, reconnect backoff, console try/catch
+- **Version rollback** — Settings > Version History shows all releases with download/install buttons
+- **Panel-per-file architecture** — Each panel in its own file under `panels/`. Safer, easier to maintain.
+- **Null guards everywhere** — All panel init functions, badge updates, and DOM access null-safe
+
 ### What's New in v1.6.0
 
 - **Auto-Update** — `.dmg` builds auto-download updates from GitHub Releases. Settings shows "Restart & Update" when ready.
@@ -134,7 +145,7 @@ Console, Network, Redux, GA4, AsyncStorage data flows automatically. No config n
 | Android real device (USB) | `10.0.2.2` | `adb reverse` tunnels over USB (auto-configured) |
 | iOS real device (USB/WiFi) | Mac's LAN IP | Auto-detected. Device must be on same WiFi as Mac. |
 
-`npx reactoradar setup` auto-detects your platform and sets the correct HOST.
+The SDK auto-detects the platform at runtime. For iOS real devices, set `HOST_OVERRIDE` in `src/debug/RNDebugSDK.js` to your Mac's LAN IP. `npx reactoradar setup` handles this automatically.
 
 ### Uninstall
 
@@ -146,7 +157,7 @@ npx reactoradar remove
 
 | ReactoRadar | React Native | Engine | Architecture |
 |---|---|---|---|
-| v1.6+ | 0.74 — 0.81+ | Hermes | Old & New Architecture |
+| v1.6.11+ | 0.74 — 0.81+ | Hermes | Old & New Architecture |
 
 ## Network Inspector
 
@@ -203,13 +214,26 @@ export const store = configureStore({
 });
 ```
 
-**Legacy Redux (createStore):**
+**Legacy Redux (createStore with middleware array):**
+```js
+const middleware = [];
+// ... your existing middleware (saga, thunk, etc.)
+if (__DEV__) {
+  try {
+    const { reduxMiddleware } = require('./debug/RNDebugSDK');
+    if (reduxMiddleware) middleware.push(reduxMiddleware);
+  } catch {}
+}
+const store = createStore(rootReducer, applyMiddleware(...middleware));
+```
+
+**Legacy Redux (createStore without middleware):**
 ```js
 import { reduxEnhancer } from '../debug/RNDebugSDK';
 const store = createStore(reducer, __DEV__ ? reduxEnhancer : undefined);
 ```
 
-> **Note:** The import path is relative from your store file to `src/debug/RNDebugSDK`. Run `npx reactoradar setup` to auto-detect the correct path.
+> **Note:** `npx reactoradar setup` auto-detects your store file and patches it. If it can't, follow the examples above. The import path is relative from your store file to `src/debug/RNDebugSDK`.
 
 ## Settings
 
@@ -293,7 +317,8 @@ const store = createStore(reducer, __DEV__ ? reduxEnhancer : undefined);
 | Network tab empty | Run Metro with `--reset-cache` |
 | Blank screen after long use | Click "Clear All Data" on the memory warning banner, or restart the app |
 | Redux shows "No actions dispatched" | Verify `reduxMiddleware` is wired in your store. Run `npx reactoradar setup` to auto-detect. |
-| Real device not connecting | Ensure HOST in `src/debug/RNDebugSDK.js` matches your Mac's LAN IP. Re-run `npx reactoradar setup`. |
+| Android emulator not connecting | Run `adb reverse tcp:9090 tcp:9090 && adb reverse tcp:9091 tcp:9091 && adb reverse tcp:9092 tcp:9092`. Re-run after emulator restart. |
+| Real device not connecting | Set `HOST_OVERRIDE` in `src/debug/RNDebugSDK.js` to your Mac's LAN IP. Re-run `npx reactoradar setup`. |
 | `XHRInterceptor.js` warning | Set `networking: false` in ReactotronConfig.js |
 | GA4 events not showing | Restart Metro with `--reset-cache` after setup |
 | Port conflict | Run `kill $(lsof -ti :9092)` to free the port, then restart |

package/app.js

@@ -46,6 +46,14 @@ const esc = s => s == null ? '' : String(s)
   .replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
 const ts = ms => new Date(ms).toLocaleTimeString('en',{hour12:false,hour:'2-digit',minute:'2-digit',second:'2-digit'});
 
+// Safe string conversion — never returns [object Object]
+function safeStr(val) {
+  if (val == null) return '';
+  if (typeof val === 'string') return val;
+  if (typeof val === 'number' || typeof val === 'boolean') return String(val);
+  try { return JSON.stringify(val); } catch { return '[Complex object]'; }
+}
+
 
 function pretty(val) {
   if (val == null) return '';
@@ -64,10 +72,12 @@ function syntaxHighlight(json) {
 }
 
 function renderJSON(val) {
+  if (val == null) return '<span style="color:var(--text-dim)">Empty response</span>';
   try {
     const str = typeof val === 'string' ? val : JSON.stringify(val, null, 2);
+    if (!str || str === '{}' || str === '""') return '<span style="color:var(--text-dim)">Empty response body</span>';
     return syntaxHighlight(esc(str));
-  } catch { return esc(typeof val === 'object' ? JSON.stringify(val) : String(val)); }
+  } catch { try { return esc(JSON.stringify(val)); } catch { return esc('[Unserializable data]'); } }
 }
 
 function tryURL(url) { try { return new URL(url); } catch { return null; } }

package/bin/setup.js

@@ -383,30 +383,9 @@ ${SDK_MARKER_END}
          } else {
            log('Redux store already has RNDebugSDK wired correctly — skipping');
          }
-       } else if (storeContent.includes('configureStore')) {
-         // RTK configureStore
-         // Try to add middleware to configureStore
-         if (storeContent.includes('middleware:') || storeContent.includes('middleware :')) {
-           warn('Redux store found at', C.bold + storeFile + C.reset, '— has custom middleware');
-           console.log(C.dim + '    Add manually to your middleware:' + C.reset);
-           console.log(C.dim + `      import { reduxMiddleware } from '${relSDK}';` + C.reset);
-           console.log(C.dim + '      middleware: (getDefault) => __DEV__' + C.reset);
-           console.log(C.dim + '        ? getDefault().concat(reduxMiddleware)' + C.reset);
-           console.log(C.dim + '        : getDefault(),' + C.reset);
-         } else {
-           // Add middleware field to configureStore
-           const patched = storeContent.replace(
-             /(configureStore\s*\(\s*\{)/,
-             `$1\n  middleware: (getDefaultMiddleware) =>\n    __DEV__\n      ? getDefaultMiddleware().concat(require('${relSDK}').reduxMiddleware)\n      : getDefaultMiddleware(),`
-           );
-           if (patched !== storeContent) {
-             fs.writeFileSync(storePath, patched);
-             log('Patched', C.bold + storeFile + C.reset, '— Redux middleware wired');
-           } else {
-             warn('Could not auto-patch', storeFile, '— wire Redux manually');
-           }
-         }
-        } else if (storeContent.includes('createStore')) {
+        } else if (/createStore\s*\(/.test(storeContent)) {
+          // Legacy createStore (check this BEFORE configureStore — a file may have both
+          // if the user named their wrapper function "configureStore" but uses Redux's createStore inside)
           // Legacy createStore — try to auto-patch by adding reduxMiddleware to middleware array
           let patched = storeContent;
           let didPatch = false;
@@ -449,9 +428,30 @@ ${SDK_MARKER_END}
             console.log(C.dim + '    Could not auto-patch. Add manually:' + C.reset);
             console.log(C.dim + `      if (__DEV__) { try { const { reduxMiddleware } = require('${relSDK}'); middleware.push(reduxMiddleware); } catch {} }` + C.reset);
             console.log(C.dim + '    Add this BEFORE the createStore() call in your middleware setup.' + C.reset);
+           }
+         } else if (/configureStore\s*\(\s*\{/.test(storeContent)) {
+          // RTK configureStore({ ... }) — actual Redux Toolkit usage
+          if (storeContent.includes('middleware:') || storeContent.includes('middleware :')) {
+            warn('Redux store found at', C.bold + storeFile + C.reset, '— has custom middleware');
+            console.log(C.dim + '    Add manually to your middleware:' + C.reset);
+            console.log(C.dim + `      import { reduxMiddleware } from '${relSDK}';` + C.reset);
+            console.log(C.dim + '      middleware: (getDefault) => __DEV__' + C.reset);
+            console.log(C.dim + '        ? getDefault().concat(reduxMiddleware)' + C.reset);
+            console.log(C.dim + '        : getDefault(),' + C.reset);
+          } else {
+            const patched = storeContent.replace(
+              /(configureStore\s*\(\s*\{)/,
+              `$1\n  middleware: (getDefaultMiddleware) =>\n    __DEV__\n      ? getDefaultMiddleware().concat(require('${relSDK}').reduxMiddleware)\n      : getDefaultMiddleware(),`
+            );
+            if (patched !== storeContent) {
+              fs.writeFileSync(storePath, patched);
+              log('Patched', C.bold + storeFile + C.reset, '— Redux middleware wired (RTK)');
+            } else {
+              warn('Could not auto-patch', storeFile, '— wire Redux manually');
+            }
           }
-        }
-     } else {
+         }
+      } else {
        warn('Redux detected but store file not found automatically');
        console.log(C.dim + '    Add to your store setup:' + C.reset);
        console.log(C.dim + '      import { reduxMiddleware } from \'./src/debug/RNDebugSDK\';' + C.reset);

package/init.js

@@ -47,21 +47,32 @@ if (window.electronAPI) {
 
   window.electronAPI.on('clear-all-ui', clearAll);
 
-  // When all device bridges disconnect, release heavy memory but keep logs visible.
-  // Debounced to avoid data loss during hot reloads or flaky connections.
+  // Device disconnect → debounced freeMemory. Reconnect → clearAll (fresh session).
   let _disconnectTimer = null;
+  let _wasDisconnected = false;
+
   window.electronAPI.on('device-all-disconnected', () => {
+    _wasDisconnected = true;
     clearTimeout(_disconnectTimer);
     _disconnectTimer = setTimeout(() => {
       console.log('[App] All devices disconnected — freeing memory');
       freeMemory();
     }, 3000);
   });
-  // Cancel pending free if a device reconnects
-  const _cancelDisconnectTimer = () => { clearTimeout(_disconnectTimer); _disconnectTimer = null; };
-  window.electronAPI.on('redux-connected', on => { if (on) _cancelDisconnectTimer(); updateDeviceBanner('redux', on); });
-  window.electronAPI.on('network-connected', on => { if (on) _cancelDisconnectTimer(); updateDeviceBanner('network', on); });
-  window.electronAPI.on('storage-connected', on => { if (on) _cancelDisconnectTimer(); updateDeviceBanner('storage', on); });
+
+  const _handleReconnect = () => {
+    clearTimeout(_disconnectTimer);
+    _disconnectTimer = null;
+    if (_wasDisconnected) {
+      _wasDisconnected = false;
+      console.log('[App] Device reconnected — clearing old session data');
+      clearAll();
+    }
+  };
+
+  window.electronAPI.on('redux-connected', on => { if (on) _handleReconnect(); updateDeviceBanner('redux', on); });
+  window.electronAPI.on('network-connected', on => { if (on) _handleReconnect(); updateDeviceBanner('network', on); });
+  window.electronAPI.on('storage-connected', on => { if (on) _handleReconnect(); updateDeviceBanner('storage', on); });
   window.electronAPI.on('react-dt-status', on => { updateDeviceBanner('reactDT', on); });
 
   // Cmd+F — focus the search input for the active panel

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "reactoradar",
   "productName": "ReactoRadar",
-  "version": "1.6.10",
+  "version": "1.6.11",
   "description": "macOS debugger for React Native — Console, Sources, Network, Performance, Memory, Redux, AsyncStorage, React tree. Supports RN 0.74+ with Hermes and New Architecture.",
   "main": "main.js",
   "bin": {

package/panels/console.js

@@ -401,7 +401,8 @@ function primitivePreview(val) {
   if (typeof val === 'number' || typeof val === 'boolean') return String(val);
   if (Array.isArray(val)) return `Array(${val.length})`;
   if (typeof val === 'object') return `{...}`;
-  return String(val);
+  if (typeof val === 'function') return `[Function: ${val.name || 'anonymous'}]`;
+  return safeStr(val);
 }
 
 function createTreeNode(key, val, startCollapsed) {
@@ -505,7 +506,7 @@ function _safeStr(val) {
   if (val === undefined) return 'undefined';
   if (typeof val === 'string') return val;
   if (typeof val === 'number' || typeof val === 'boolean') return String(val);
-  try { return JSON.stringify(val, null, 2); } catch { return String(val); }
+  try { return JSON.stringify(val, null, 2); } catch { return '[Complex object]'; }
 }
 
 function createPrimitiveSpan(val) {
@@ -561,7 +562,7 @@ function buildLogBody(logEntry) {
     });
   } else if (logEntry.message != null) {
     // Legacy / flat message — try to parse JSON objects out of it
-    const msg = String(logEntry.message);
+    const msg = safeStr(logEntry.message);
     // Try parsing the whole message as JSON
     try {
       const parsed = JSON.parse(msg);
@@ -691,7 +692,7 @@ function buildLogRow(l) {
       items.push({ label: 'Copy as JSON', action: () => {
         const json = l.args.map(a => {
           if (a.t === 'object' || a.t === 'array') return JSON.stringify(a.v, null, 2);
-          return String(a.v);
+          return safeStr(a.v);
         }).join(' ');
         navigator.clipboard.writeText(json);
       }});

package/panels/network.js

@@ -203,13 +203,13 @@ function initNetworkPanel() {
           method: r.method || 'GET',
           url: r.url || '',
           headers: Object.entries(r.requestHeaders || {}).map(([n, v]) => ({ name: n, value: v })),
-          postData: r.requestBody ? { mimeType: 'application/json', text: typeof r.requestBody === 'object' ? JSON.stringify(r.requestBody) : String(r.requestBody) } : undefined,
+          postData: r.requestBody ? { mimeType: 'application/json', text: typeof r.requestBody === 'object' ? JSON.stringify(r.requestBody) : safeStr(r.requestBody) } : undefined,
         },
         response: {
           status: r.status || 0,
           statusText: r.statusText || '',
           headers: Object.entries(r.responseHeaders || {}).map(([n, v]) => ({ name: n, value: v })),
-          content: { size: -1, mimeType: 'application/json', text: r.responseBody ? (typeof r.responseBody === 'object' ? JSON.stringify(r.responseBody) : String(r.responseBody)) : '' },
+          content: { size: -1, mimeType: 'application/json', text: r.responseBody ? (typeof r.responseBody === 'object' ? JSON.stringify(r.responseBody) : safeStr(r.responseBody)) : '' },
         },
         timings: { send: 0, wait: r.duration || 0, receive: 0 },
       };
@@ -835,7 +835,7 @@ function renderNetDetailContent(r) {
       if (!keys.length) return `<div class="section-label">${title}</div><span style="color:var(--text-dim)">none</span>`;
       return `<div class="section-label">${title}</div><div class="kv-grid">${keys.map(k => {
         let val = h[k];
-        if (val && typeof val === 'object') { try { val = JSON.stringify(val); } catch { val = String(val); } }
+        if (val && typeof val === 'object') { try { val = JSON.stringify(val); } catch { val = '[Complex object]'; } }
         return `<span class="kv-key">${esc(k)}</span><span class="kv-val">${esc(val)}</span>`;
       }).join('')}</div>`;
     };
@@ -870,6 +870,7 @@ function renderNetDetailContent(r) {
     const isErrStatus = _isHttpError(r);
     if (r.phase === 'error' && !r.responseBody) { body.innerHTML = `<span style="color:var(--red)">${esc(r.error || 'Request failed')}</span>`; return; }
     if (!r.responseBody && r.phase !== 'response') { body.innerHTML = '<span style="color:var(--text-dim)">Pending...</span>'; return; }
+    if (r.responseBody == null || r.responseBody === '') { body.innerHTML = '<span style="color:var(--text-dim)">Empty response body</span>'; return; }
     // Render as collapsible JSON tree with right-click copy
     const val = r.responseBody;
     let treeData = val;
@@ -896,13 +897,14 @@ function renderNetDetailContent(r) {
       });
     } else {
       body.innerHTML = isErrStatus
-        ? `<span style="color:var(--red)">${esc(String(r.responseBody))}</span>`
+        ? `<span style="color:var(--red)">${esc(safeStr(r.responseBody))}</span>`
         : '<span style="color:var(--text-dim)">No preview available</span>';
     }
   } else if (tab === 'response') {
     const isErrStatus = _isHttpError(r);
     if (r.phase === 'error' && !r.responseBody) { body.innerHTML = `<span style="color:var(--red)">${esc(r.error || 'Request failed')}</span>`; return; }
     if (!r.responseBody && r.phase !== 'response') { body.innerHTML = '<span style="color:var(--text-dim)">Pending...</span>'; return; }
+    if (r.responseBody == null || r.responseBody === '') { body.innerHTML = '<span style="color:var(--text-dim)">Empty response body</span>'; return; }
     if (isErrStatus) {
       const errBanner = document.createElement('div');
       errBanner.style.cssText = 'color:var(--red);font-weight:600;padding:4px 0 8px;font-size:11px;border-bottom:1px solid rgba(255,94,114,.15);margin-bottom:8px';