reactoradar 1.5.3 → 1.5.5

package/app.js

@@ -209,7 +209,7 @@ if (window.electronAPI) {
     const btn = $('btnCDP');
     if (btn) {
       const hasCDP = targets?.length > 0;
-      const port = getStoredMetroPort();
+      const port = state.ports?.METRO || getStoredMetroPort();
       btn.textContent = hasCDP
         ? `JS Debugger (:${port}) [${targets.length}] ↗`
         : `JS Debugger (:${port}) ↗`;
@@ -268,21 +268,7 @@ if (window.electronAPI) {
   window.electronAPI.on('update-available', ({ current, latest }) => {
     // Show in settings only, not as a banner
     state._updateAvailable = { current, latest };
-    const el = $('aboutVersion');
-    if (el) el.innerHTML = `v${current} <span style="color:var(--green);font-size:10px;margin-left:6px">v${latest} available</span>`;
-    // Add update button in settings if not already there
-    if (!$('updateBtn')) {
-      const aboutEl = document.querySelector('.settings-about');
-      if (aboutEl) {
-        const btn = document.createElement('div');
-        btn.style.cssText = 'margin-top:10px';
-        btn.innerHTML = '<button id="updateBtn" class="tb-btn primary" style="font-size:11px">Download v' + latest + '</button>';
-        aboutEl.appendChild(btn);
-        $('updateBtn')?.addEventListener('click', () => {
-          window.electronAPI?.openExternal('https://github.com/sharanagouda/react-native-debugger/releases');
-        });
-      }
-    }
+    _applyUpdateBanner();
   });
 
   window.electronAPI.on('trigger-open-cdp', () => {
@@ -299,6 +285,31 @@ if (window.electronAPI) {
 }
 
 // ─── Device Connection Status (inline in titlebar) ───────────────────────────
+// Reusable — called from IPC handler AND from initSettingsPanel
+function _applyUpdateBanner() {
+  const info = state._updateAvailable;
+  if (!info) return;
+  const { current, latest } = info;
+  const el = $('aboutVersion');
+  if (el && !el.dataset.updateApplied) {
+    el.innerHTML = `v${current} <span style="color:var(--green);font-size:10px;margin-left:6px">v${latest} available</span>`;
+    el.dataset.updateApplied = '1';
+  }
+  // Add update button in settings if not already there
+  if (!$('updateBtn')) {
+    const aboutEl = document.querySelector('.settings-about');
+    if (aboutEl) {
+      const btn = document.createElement('div');
+      btn.style.cssText = 'margin-top:10px';
+      btn.innerHTML = '<button id="updateBtn" class="tb-btn primary" style="font-size:11px;padding:6px 16px">Download v' + latest + '</button>';
+      aboutEl.appendChild(btn);
+      $('updateBtn')?.addEventListener('click', () => {
+        window.electronAPI?.openExternal('https://github.com/sharanagouda/react-native-debugger/releases');
+      });
+    }
+  }
+}
+
 function updateDeviceBanner(service, connected) {
   state.connections[service] = connected;
   const el = $('deviceStatus');
@@ -1273,9 +1284,13 @@ function renderNetwork() {
   rows.appendChild(frag);
 }
 
+function _isHttpError(r) {
+  return r.phase === 'error' || (r.status && r.status >= 400);
+}
+
 function buildNetRow(r, wfMin, wfRange) {
   const row = document.createElement('div');
-  row.className = 'net-row' + (r.id === state.network.selectedId ? ' selected' : '') + (r.phase === 'error' ? ' error' : '');
+  row.className = 'net-row' + (r.id === state.network.selectedId ? ' selected' : '') + (_isHttpError(r) ? ' error' : '');
   row.dataset.id = r.id;
 
   const urlObj = tryURL(r.url);
@@ -1291,7 +1306,9 @@ function buildNetRow(r, wfMin, wfRange) {
   const method = r.method || '?';
   const mClass = ['GET','POST','PUT','PATCH','DELETE'].includes(method) ? `m-${method}` : 'm-other';
   const fullPath = urlObj ? urlObj.pathname + urlObj.search : r.url || '';
-  nameCell.innerHTML = `<span class="method-badge ${mClass}">${method}</span> <span class="net-path" title="${esc(r.url)}">${esc(fullPath)}</span><span class="net-host">${esc(host)}</span>`;
+  const isErr = _isHttpError(r);
+  const pathCls = isErr ? ' net-path-error' : '';
+  nameCell.innerHTML = `<span class="method-badge ${mClass}">${method}</span> <span class="net-path${pathCls}" title="${esc(r.url)}">${esc(fullPath)}</span><span class="net-host">${esc(host)}</span>`;
   row.appendChild(nameCell);
 
   // Status
@@ -1301,7 +1318,13 @@ function buildNetRow(r, wfMin, wfRange) {
   statusCell.style.width = NET_COLS[1].width + 'px';
   let statusStr = '...', sCls = 's-pending';
   if (r.phase === 'error') { statusStr = 'ERR'; sCls = 's-err'; }
-  else if (r.status) { statusStr = String(r.status); sCls = `s-${Math.floor(r.status/100)}`; }
+  else if (r.status) {
+    statusStr = String(r.status);
+    const group = Math.floor(r.status / 100);
+    // 1xx info, 2xx success, 3xx redirect, 4xx client error, 5xx server error
+    if (group >= 4) sCls = 's-err';
+    else sCls = `s-${group}`;
+  }
   statusCell.className += ` ${sCls}`;
   statusCell.textContent = statusStr;
   row.appendChild(statusCell);
@@ -1350,6 +1373,7 @@ function buildNetRow(r, wfMin, wfRange) {
     const width = Math.max(2, ((r.duration || 50) / wfRange) * 100);
     let barCls = 'pending';
     if (r.phase === 'error') barCls = 'err';
+    else if (r.status && r.status >= 400) barCls = 'err';
     else if (r.status) barCls = `s${Math.floor(r.status/100)}`;
     wfCell.innerHTML = `<div class="wf-bar ${barCls}" style="left:${left}%;width:${width}%"></div>`;
   }
@@ -1416,8 +1440,12 @@ function renderNetDetailTabs(r) {
 }
 
 function renderNetDetailContent(r) {
-  const body = $('netDetailContent');
+  let body = $('netDetailContent');
   if (!body) return;
+  // Clone-replace to remove all stale event listeners (prevents contextmenu leak)
+  const fresh = body.cloneNode(false);
+  body.parentNode.replaceChild(fresh, body);
+  body = fresh;
   const tab = r._tab || 'headers';
 
   if (tab === 'headers') {
@@ -1436,7 +1464,7 @@ function renderNetDetailContent(r) {
       <div class="kv-grid">
         <span class="kv-key">Request URL</span><span class="kv-val">${esc(r.url)}</span>
         <span class="kv-key">Method</span><span class="kv-val">${esc(r.method)}</span>
-        <span class="kv-key">Status</span><span class="kv-val ${r.status ? 's-' + Math.floor(r.status/100) : 's-pending'}">${r.status || 'Pending'} ${r.statusText || ''}</span>
+        <span class="kv-key">Status</span><span class="kv-val ${r.phase === 'error' ? 's-err' : r.status ? (r.status >= 400 ? 's-err' : 's-' + Math.floor(r.status/100)) : 's-pending'}">${r.phase === 'error' ? (r.status || 'ERR') : (r.status || 'Pending')} ${r.statusText || (r.phase === 'error' ? r.error || 'Network Error' : '')}</span>
       </div>
       ${renderH('Response Headers', rsH)}
       ${renderH('Request Headers', rqH)}`;
@@ -1460,16 +1488,27 @@ function renderNetDetailContent(r) {
       }
     }
   } else if (tab === 'preview') {
-    if (r.phase === 'error') { body.innerHTML = `<span style="color:var(--red)">${esc(r.error || 'Request failed')}</span>`; return; }
+    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; }
     // Render as collapsible JSON tree with right-click copy
     const val = r.responseBody;
     let treeData = val;
     if (typeof val === 'string') {
-      try { treeData = JSON.parse(val); } catch { body.textContent = val; return; }
+      try { treeData = JSON.parse(val); } catch {
+        body.innerHTML = `<span style="color:${isErrStatus ? 'var(--red)' : 'inherit'}">${esc(val)}</span>`;
+        return;
+      }
     }
     if (treeData && typeof treeData === 'object') {
       body.innerHTML = '';
+      // Show error status banner above the response body
+      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';
+        errBanner.textContent = `${r.status || 'ERR'} ${r.statusText || r.error || 'Error'}`;
+        body.appendChild(errBanner);
+      }
       body.appendChild(createTreeNode(null, treeData, false));
       // Right-click on preview to copy the whole object or clicked node value
       body.addEventListener('contextmenu', (e) => {
@@ -1477,12 +1516,27 @@ function renderNetDetailContent(r) {
         showPreviewCopyMenu(e, treeData);
       });
     } else {
-      body.innerHTML = '<span style="color:var(--text-dim)">No preview available</span>';
+      body.innerHTML = isErrStatus
+        ? `<span style="color:var(--red)">${esc(String(r.responseBody))}</span>`
+        : '<span style="color:var(--text-dim)">No preview available</span>';
     }
   } else if (tab === 'response') {
-    if (r.phase === 'error') { body.innerHTML = `<span style="color:var(--red)">${esc(r.error || 'Request failed')}</span>`; return; }
+    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; }
-    body.innerHTML = renderJSON(r.responseBody);
+    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';
+      errBanner.textContent = `${r.status || 'ERR'} ${r.statusText || r.error || 'Error'}`;
+      body.innerHTML = '';
+      body.appendChild(errBanner);
+      const raw = document.createElement('div');
+      raw.style.color = 'var(--red)';
+      raw.innerHTML = renderJSON(r.responseBody);
+      body.appendChild(raw);
+    } else {
+      body.innerHTML = renderJSON(r.responseBody);
+    }
   }
 }
 
@@ -2433,6 +2487,9 @@ function initSettingsPanel() {
     setStoredFontSize(size);
     applyFontSize(size);
   });
+
+  // Apply update banner if update info arrived before settings panel was created
+  _applyUpdateBanner();
 }
 
 // Apply saved theme + font size + app name on load

package/main.js

@@ -19,6 +19,15 @@ const PORTS = {
 let mainWindow = null;
 let devtoolsWindow = null;  // hosts the embedded CDP DevTools frontend
 
+// Safe IPC send — prevents "Object has been destroyed" crash
+function _send(channel, ...args) {
+  try {
+    if (mainWindow && !mainWindow.isDestroyed() && mainWindow.webContents && !mainWindow.webContents.isDestroyed()) {
+      mainWindow.webContents.send(channel, ...args);
+    }
+  } catch {}
+}
+
 // ─── State ────────────────────────────────────────────────────────────────────
 let reduxClients   = new Set();
 let storageClients = new Set();
@@ -27,8 +36,32 @@ let networkClients = new Set();
 // ─── Set dock icon ASAP (before app ready) ──────────────────────────────────
 const _appIcon = nativeImage.createFromPath(path.join(__dirname, 'ReactoRadar.png'));
 
+// ─── Single Instance Lock ────────────────────────────────────────────────────
+// Prevent multiple ReactoRadar instances from running simultaneously.
+// If a second instance launches, focus the existing window instead.
+const gotLock = app.requestSingleInstanceLock();
+if (!gotLock) {
+  // Another instance is already running — show a dialog and quit
+  const { dialog } = require('electron');
+  app.whenReady().then(() => {
+    dialog.showErrorBox(
+      'ReactoRadar is already running',
+      'Another instance of ReactoRadar is already open.\n\nPlease close the existing instance first, or check your system tray / dock.\n\nIf the old version is stuck, run:\n  kill $(lsof -ti :9092) \nin your terminal to stop it.'
+    );
+    app.quit();
+  });
+} else {
+  app.on('second-instance', () => {
+    // Focus the existing window when someone tries to open a second instance
+    if (mainWindow) {
+      if (mainWindow.isMinimized()) mainWindow.restore();
+      mainWindow.focus();
+    }
+  });
+}
+
 // ─── App lifecycle ────────────────────────────────────────────────────────────
-app.whenReady().then(async () => {
+if (gotLock) app.whenReady().then(async () => {
   nativeTheme.themeSource = 'dark';
 
   // Set dock icon on macOS
@@ -42,11 +75,11 @@ app.whenReady().then(async () => {
   let appVersion;
   try { appVersion = require('./package.json').version; } catch { appVersion = app.getVersion(); }
   // Send multiple times to ensure renderer catches it
-  mainWindow?.webContents.on('did-finish-load', () => {
+  mainWindow.webContents.on('did-finish-load', () => {
     [200, 1000, 3000].forEach(delay => {
       setTimeout(() => {
         if (mainWindow && !mainWindow.isDestroyed()) {
-          mainWindow.webContents.send('app-version', appVersion);
+          _send('app-version', appVersion);
         }
       }, delay);
     });
@@ -102,11 +135,23 @@ async function createMainWindow() {
 
   // Open the JS Debugger panel (CDP DevTools) in a second window
   mainWindow.webContents.on('did-finish-load', () => {
-    mainWindow.webContents.send('ports', PORTS);
+    _send('ports', PORTS);
   });
 }
 
 // ─── Update Checker ──────────────────────────────────────────────────────────
+function _semverCompare(a, b) {
+  // Returns 1 if a > b, -1 if a < b, 0 if equal
+  const pa = (a || '').split('.').map(Number);
+  const pb = (b || '').split('.').map(Number);
+  for (let i = 0; i < 3; i++) {
+    const va = pa[i] || 0, vb = pb[i] || 0;
+    if (va > vb) return 1;
+    if (va < vb) return -1;
+  }
+  return 0;
+}
+
 function checkForUpdates() {
   const currentVersion = require('./package.json').version;
   https.get('https://registry.npmjs.org/reactoradar/latest', (res) => {
@@ -115,9 +160,16 @@ function checkForUpdates() {
     res.on('end', () => {
       try {
         const latest = JSON.parse(data).version;
-        if (latest && latest !== currentVersion) {
-          // Notify the renderer to show an update banner
-          mainWindow?.webContents.send('update-available', { current: currentVersion, latest });
+        if (latest && _semverCompare(latest, currentVersion) > 0) {
+          // Send with retries to ensure renderer catches it after did-finish-load
+          const payload = { current: currentVersion, latest };
+          [500, 2000, 5000].forEach(delay => {
+            setTimeout(() => {
+              if (mainWindow && !mainWindow.isDestroyed()) {
+                _send('update-available', payload);
+              }
+            }, delay);
+          });
           console.log(`[Update] New version available: ${latest} (current: ${currentVersion})`);
         }
       } catch {}
@@ -184,7 +236,7 @@ function fetchCDPTargets(callback) {
           t.type === 'node' || t.devtoolsFrontendUrl
         );
         lastKnownTargets = rnTargets;
-        mainWindow?.webContents.send('cdp-targets', rnTargets);
+        _send('cdp-targets', rnTargets);
         if (callback) callback(rnTargets);
       } catch (_) {
         if (callback) callback([]);
@@ -192,7 +244,7 @@ function fetchCDPTargets(callback) {
     });
   }).on('error', () => {
     lastKnownTargets = [];
-    mainWindow?.webContents.send('cdp-targets', []);
+    _send('cdp-targets', []);
     if (callback) callback([]);
   });
 }
@@ -216,13 +268,13 @@ function startReactDevToolsServer() {
     reactDTServer.on('error', (err) => {
       console.warn(`[ReactDT] Server error: ${err.message}`);
       if (err.code === 'EADDRINUSE') {
-        mainWindow?.webContents.send('react-dt-status', false);
+        _send('react-dt-status', false);
       }
     });
     reactDTServer.on('connection', (ws) => {
       reactDTClients.add(ws);
       console.log(`[ReactDT] Client connected (total: ${reactDTClients.size})`);
-      mainWindow?.webContents.send('react-dt-status', true);
+      _send('react-dt-status', true);
 
       // Relay messages between all connected clients (frontend ↔ backend)
       ws.on('message', (data) => {
@@ -237,7 +289,7 @@ function startReactDevToolsServer() {
         reactDTClients.delete(ws);
         console.log(`[ReactDT] Client disconnected (total: ${reactDTClients.size})`);
         if (reactDTClients.size === 0) {
-          mainWindow?.webContents.send('react-dt-status', false);
+          _send('react-dt-status', false);
         }
       });
     });
@@ -251,53 +303,67 @@ function startReactDevToolsServer() {
 function startBridgeServers() {
   // Redux Bridge
   startBridge(PORTS.REDUX_BRIDGE, 'redux', reduxClients, (event) => {
-    mainWindow?.webContents.send('redux-event', event);
+    _send('redux-event', event);
   });
 
   // AsyncStorage Bridge
   startBridge(PORTS.STORAGE_BRIDGE, 'storage', storageClients, (event) => {
-    mainWindow?.webContents.send('storage-event', event);
+    _send('storage-event', event);
   });
 
   // Network + Console + Perf Bridge (port 9092 carries all types from RNDebugSDK)
   startBridge(PORTS.NETWORK_BRIDGE, 'network', networkClients, (event) => {
     if (event.type === 'control') return;
     if (event.type === 'console') {
-      mainWindow?.webContents.send('console-event', event);
+      _send('console-event', event);
     } else if (event.type === 'perf') {
-      mainWindow?.webContents.send('perf-event', event);
+      _send('perf-event', event);
     } else if (event.type === 'ga4') {
-      mainWindow?.webContents.send('ga4-event', event);
+      _send('ga4-event', event);
     } else {
-      mainWindow?.webContents.send('network-event', event);
+      _send('network-event', event);
     }
   });
 }
 
 function startBridge(port, name, clients, onEvent) {
-  const wss = new WebSocketServer({ port });
-  wss.on('connection', (ws) => {
-    clients.add(ws);
-    console.log(`[${name}] RN app connected`);
-    mainWindow?.webContents.send(`${name}-connected`, true);
-
-    ws.on('message', (raw) => {
-      try {
-        const event = JSON.parse(raw.toString());
-        onEvent(event);
-      } catch (e) {
-        console.warn(`[${name}] Failed to parse message:`, e.message);
+  try {
+    const wss = new WebSocketServer({ port });
+    wss.on('error', (err) => {
+      if (err.code === 'EADDRINUSE') {
+        console.error(`[${name}] Port ${port} is already in use — another ReactoRadar or debugger may be running.`);
+        const { dialog } = require('electron');
+        dialog.showErrorBox(
+          `Port ${port} is in use`,
+          `ReactoRadar cannot start the ${name} bridge because port ${port} is already occupied.\n\nThis usually means an older version of ReactoRadar is still running.\n\nTo fix this, run the following in your terminal:\n  kill $(lsof -ti :${port})\n\nThen restart ReactoRadar.`
+        );
       }
     });
+    wss.on('connection', (ws) => {
+      clients.add(ws);
+      console.log(`[${name}] RN app connected`);
+      _send(`${name}-connected`, true);
 
-    ws.on('close', () => {
-      clients.delete(ws);
-      if (clients.size === 0) {
-        mainWindow?.webContents.send(`${name}-connected`, false);
-      }
+      ws.on('message', (raw) => {
+        try {
+          const event = JSON.parse(raw.toString());
+          onEvent(event);
+        } catch (e) {
+          console.warn(`[${name}] Failed to parse message:`, e.message);
+        }
+      });
+
+      ws.on('close', () => {
+        clients.delete(ws);
+        if (clients.size === 0) {
+          _send(`${name}-connected`, false);
+        }
+      });
     });
-  });
-  console.log(`[${name}] Bridge on :${port}`);
+    console.log(`[${name}] Bridge on :${port}`);
+  } catch (e) {
+    console.error(`[${name}] Failed to start bridge on port ${port}:`, e.message);
+  }
 }
 
 // ─── IPC from Renderer ────────────────────────────────────────────────────────
@@ -336,9 +402,11 @@ function setupIPC() {
   // clear-all is handled by renderer via clear-all-ui IPC from menu
 
   ipcMain.on('set-metro-port', (_, port) => {
-    PORTS.METRO = port;
+    const p = parseInt(port);
+    if (isNaN(p) || p < 1024 || p > 65535) return;
+    PORTS.METRO = p;
     fetchCDPTargets();
-    mainWindow?.webContents.send('ports', PORTS);
+    _send('ports', PORTS);
   });
 
   ipcMain.on('set-network-capture', (_, enabled) => {
@@ -482,7 +550,7 @@ function buildMenu() {
         {
           label: 'Open JS Debugger (CDP)',
           accelerator: 'Cmd+D',
-          click: () => { mainWindow?.webContents.send('trigger-open-cdp'); },
+          click: () => { _send('trigger-open-cdp'); },
         },
         {
           label: 'Open React DevTools',
@@ -493,7 +561,7 @@ function buildMenu() {
         {
           label: 'Clear All',
           accelerator: 'Cmd+K',
-          click: () => { mainWindow?.webContents.send('clear-all-ui'); },
+          click: () => { _send('clear-all-ui'); },
         },
         { type: 'separator' },
         {
@@ -506,7 +574,7 @@ function buildMenu() {
             const next = themes[(idx + 1) % themes.length];
             nativeTheme.themeSource = next.includes('light') ? 'light' : 'dark';
             if (mainWindow && !mainWindow.isDestroyed()) {
-              mainWindow.webContents.send('theme-changed', next);
+              _send('theme-changed', next);
             }
           },
         },
@@ -526,7 +594,7 @@ function buildMenu() {
         {
           label: 'Find',
           accelerator: 'Cmd+F',
-          click: () => { mainWindow?.webContents.send('focus-search'); },
+          click: () => { _send('focus-search'); },
         },
       ],
     },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "reactoradar",
   "productName": "ReactoRadar",
-  "version": "1.5.3",
+  "version": "1.5.5",
   "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/styles.css

@@ -741,7 +741,11 @@ body {
 }
 .net-row:hover { background: var(--bg3); }
 .net-row.selected { background: var(--bg4); }
-.net-row.error { background: rgba(255,94,114,.04); }
+.net-row.error { background: rgba(255,94,114,.06); border-bottom-color: rgba(255,94,114,.10); }
+.net-row.error:hover { background: rgba(255,94,114,.10); }
+.net-row.error .net-path { color: var(--red); }
+.net-row.error .net-host { color: rgba(255,94,114,.6); }
+.net-path-error { color: var(--red) !important; }
 .net-cell {
   padding: 6px 8px;
   overflow: hidden;
@@ -757,12 +761,13 @@ body {
 .net-cell-name .method-badge { flex-shrink: 0; vertical-align: middle; }
 
 .net-status { font-weight: 700; }
-.s-2 { color: var(--green); }
-.s-3 { color: var(--yellow); }
-.s-4 { color: var(--orange); }
-.s-5 { color: var(--red); }
+.s-1 { color: var(--text-mid); }   /* 1xx informational */
+.s-2 { color: var(--green); }      /* 2xx success */
+.s-3 { color: var(--yellow); }     /* 3xx redirect */
+.s-4 { color: var(--red); }        /* 4xx client error */
+.s-5 { color: var(--red); }        /* 5xx server error */
 .s-pending { color: var(--text-dim); }
-.s-err { color: var(--red); }
+.s-err { color: var(--red); font-weight: 700; }
 
 .net-type { color: var(--text-dim); font-size: 10px; }
 .net-initiator { color: var(--text-dim); font-size: 10px; }