peekinside 1.2.0 → 1.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "peekinside",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "Debug Node.js from the inside: errors with the requests, queries, logs and jobs behind them. A free local dashboard, and encrypted monitoring for production",
   "main": "index.js",
   "types": "./index.d.ts",

package/src/cli.js

@@ -70,6 +70,9 @@ export class Cli {
    * @throws {Error} When the hub did not start in time
    */
   async start(openBrowser) {
+    // A hub left running by an older PeekInside is replaced by this version's (its data stays).
+    const replaced = await this.hub.replaceIfOlder();
+    if (replaced) console.log(`Restarted PeekInside Local: it was version ${replaced}, now ${VERSION}.`);
     let running = await this.hub.status();
     if (!running) {
       this.hub.spawn();

package/src/hub/client.js

@@ -9,7 +9,7 @@ import fs from 'fs';
 import http from 'http';
 import path from 'path';
 import { fileURLToPath } from 'url';
-import { HUB_APP_ID, VERSION, settings } from '../config.js';
+import { HUB_API_VERSION, HUB_APP_ID, VERSION, settings } from '../config.js';
 
 const HUB_ENTRY = fileURLToPath(new URL('./entry.js', import.meta.url));
 
@@ -153,6 +153,50 @@ export class HubClient {
     }
   }
 
+  /**
+   * Replaces a running hub from an older PeekInside with this version's. Hubs outlive the apps
+   * that start them, so after an upgrade the old one would keep serving, its dashboard page
+   * included. Only a hub with the same API and data folder is replaced, so its data stays, and
+   * only the process hub.json names, so nothing else listening on the port is ever stopped.
+   *
+   * @returns {Promise<string|null>} The version that was replaced, or null when none was
+   */
+  async replaceIfOlder() {
+    const running = await this.status().catch(() => null);
+    const dataDir = settings.dataDir();
+    if (!HubClient.shouldReplace(running, { version: VERSION, dataDir, infoPid: readInfoPid(dataDir) })) return null;
+    try {
+      process.kill(running.pid, 'SIGTERM');
+    } catch (error) {
+      return null;
+    }
+    for (let attempt = 0; attempt < 50; attempt++) {
+      await new Promise((resolve) => setTimeout(resolve, 100));
+      if (!(await this.status().catch(() => null))) {
+        this.spawn();
+        await this.waitUntilReady(8000).catch(() => null);
+        return running.version;
+      }
+    }
+    return null;
+  }
+
+  /**
+   * Whether a running hub is an older version than this one that may be replaced: same API, same
+   * data folder, and the process its hub.json names.
+   *
+   * @param {Object|null} running - Its GET /api/status
+   * @param {{ version: string, dataDir: string, infoPid: number|null }} self - This version, its
+   *   data folder, and the pid in that folder's hub.json
+   * @returns {boolean}
+   */
+  static shouldReplace(running, { version, dataDir, infoPid }) {
+    if (!running || running.apiVersion !== HUB_API_VERSION) return false;
+    if (!Number.isInteger(running.pid) || running.pid !== infoPid || running.pid === process.pid) return false;
+    if (typeof running.dataDir !== 'string' || path.resolve(running.dataDir) !== path.resolve(dataDir)) return false;
+    return compareVersions(running.version, version) < 0;
+  }
+
   /**
    * Waits until the hub answers.
    *
@@ -182,3 +226,34 @@ export class HubClient {
     if (this.agent) this.agent.destroy();
   }
 }
+
+// The pid in the data folder's hub.json (written by the hub that runs), or null.
+function readInfoPid(dataDir) {
+  try {
+    const info = JSON.parse(fs.readFileSync(path.join(dataDir, 'hub.json'), 'utf8'));
+    return Number.isInteger(info.pid) ? info.pid : null;
+  } catch (error) {
+    return null;
+  }
+}
+
+/**
+ * Compares two versions by major, minor and patch ("1.10.0" is after "1.9.3"). Anything after the
+ * patch number (a prerelease) is ignored, and versions that can't be read compare as equal, so
+ * nothing is replaced on a guess.
+ *
+ * @param {string} a
+ * @param {string} b
+ * @returns {number} Negative when a is older, positive when newer, 0 otherwise
+ */
+export function compareVersions(a, b) {
+  const parse = (value) => /^(\d+)\.(\d+)\.(\d+)/.exec(String(value || ''));
+  const left = parse(a);
+  const right = parse(b);
+  if (!left || !right) return 0;
+  for (let index = 1; index <= 3; index++) {
+    const difference = Number(left[index]) - Number(right[index]);
+    if (difference) return difference;
+  }
+  return 0;
+}

package/src/hub/server.js

@@ -57,6 +57,11 @@ const BASE_HEADERS = {
   'Cross-Origin-Resource-Policy': 'same-origin'
 };
 
+// If the interface doesn't arrive (blocked, offline, or still missing after 20 seconds), says so
+// instead of "Loading" forever. The app replaces the loading message when it starts, so the timer
+// finds nothing to replace then.
+const BOOT_WATCH = '(function(){var shown=false;function show(){if(shown)return;var loading=document.querySelector(".boot-loading"),failed=document.querySelector(".boot-failed");if(!loading||!failed)return;shown=true;loading.hidden=true;failed.hidden=false}function broken(){if(document.readyState==="loading")document.addEventListener("DOMContentLoaded",show);else show()}document.addEventListener("securitypolicyviolation",function(e){if(/^(script|style)-src/.test(e.effectiveDirective||e.violatedDirective||""))broken()});window.addEventListener("error",function(e){var t=e.target;if(t&&t.tagName==="SCRIPT"&&/\\/app\\.js$/.test(t.src||""))broken()},true);setTimeout(function(){if(document.querySelector(".boot-loading"))broken()},20000)})()';
+
 // Applies the saved theme before first paint (same as the PeekInside site).
 const THEME_SCRIPT = '(function(){try{var t=localStorage.getItem("peekinside:theme");if(t!=="light"&&t!=="dark"){t=matchMedia("(prefers-color-scheme: light)").matches?"light":"dark"}document.documentElement.setAttribute("data-theme",t)}catch(e){document.documentElement.setAttribute("data-theme","dark")}})()';
 
@@ -408,19 +413,20 @@ export class HubServer {
   }
 
   // The dashboard page: a shell that loads the interface from the PeekInside site. The Content
-  // Security Policy allows scripts only from that site (and the inline theme script, by nonce),
-  // and lets the page fetch data only from this server.
+  // Security Policy allows scripts only from that site (and the inline scripts, by nonce), and
+  // lets the page fetch data only from this server.
   _shell(req, res) {
     const assets = this._assets;
     const siteUrl = this.siteUrl;
+    const host = new URL(siteUrl).host;
     const nonce = randomBytes(16).toString('base64');
-    const assetOrigin = new URL(assets).origin;
+    const assetOrigins = siteOrigins(assets);
     const csp = [
       "default-src 'none'",
-      `script-src 'nonce-${nonce}' ${assetOrigin}`,
-      `style-src ${assetOrigin} 'unsafe-inline'`,
+      `script-src 'nonce-${nonce}' ${assetOrigins}`,
+      `style-src ${assetOrigins} 'unsafe-inline'`,
       "img-src 'self' data:",
-      `font-src ${assetOrigin}`,
+      `font-src ${assetOrigins}`,
       "connect-src 'self'",
       "base-uri 'none'",
       "form-action 'none'",
@@ -436,12 +442,13 @@ export class HubServer {
 <title>PeekInside Local</title>
 <link rel="icon" href="/brand/peekinside-span-core-mark-light.svg" type="image/svg+xml" media="(prefers-color-scheme: light)">
 <link rel="icon" href="/brand/peekinside-span-core-mark-dark.svg" type="image/svg+xml" media="(prefers-color-scheme: dark)">
+<script nonce="${nonce}">${BOOT_WATCH}</script>
 <link rel="stylesheet" href="${escapeHtml(assets)}/app.css">
 <script nonce="${nonce}">${THEME_SCRIPT}</script>
-<style>.boot{font:13px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;max-width:440px;margin:18vh auto 0;padding:0 16px;opacity:.75}.boot a{color:inherit}</style>
+<style>.boot{font:13px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;max-width:440px;margin:18vh auto 0;padding:0 16px;opacity:.75}.boot a{color:inherit}.boot[hidden]{display:none}.boot-failed{opacity:.9}</style>
 </head>
 <body>
-<div id="root"><div class="boot"><p><strong>Loading PeekInside…</strong></p><p>The dashboard interface loads from <a href="${escapeHtml(siteUrl)}">${escapeHtml(new URL(siteUrl).host)}</a>. Your requests stay on this machine.</p></div></div>
+<div id="root"><div class="boot boot-loading"><p><strong>Loading PeekInside…</strong></p><p>The dashboard interface loads from <a href="${escapeHtml(siteUrl)}">${escapeHtml(host)}</a>. Your requests stay on this machine.</p></div><div class="boot boot-failed" hidden><p><strong>The dashboard didn’t load</strong></p><p>Its interface comes from <a href="${escapeHtml(siteUrl)}">${escapeHtml(host)}</a>, and this browser couldn’t load it. Check that this computer can reach ${escapeHtml(host)}: a firewall, VPN, proxy or ad blocker can block it. Then <a href="">reload this page</a>.</p><p>Your app keeps recording meanwhile, so nothing is lost.</p></div></div>
 <script src="${escapeHtml(assets)}/app.js" defer></script>
 </body>
 </html>
@@ -454,6 +461,22 @@ export class HubServer {
   }
 }
 
+// The site's origin and its www twin: hosting often redirects one to the other (Vercel sends the
+// bare domain to www by default), and a Content Security Policy also checks where a redirect
+// lands. Local addresses (localhost, IPs) have no twin.
+function siteOrigins(siteUrl) {
+  const url = new URL(siteUrl);
+  const host = url.hostname;
+  const origins = [url.origin];
+  const named = host.includes('.') && !host.startsWith('[') && !/^[\d.]+$/.test(host) && host !== 'localhost' && !host.endsWith('.localhost');
+  if (named) {
+    const twin = new URL(url.origin);
+    twin.hostname = host.startsWith('www.') ? host.slice(4) : `www.${host}`;
+    origins.push(twin.origin);
+  }
+  return origins.join(' ');
+}
+
 function isRead(req) {
   return req.method === 'GET' || req.method === 'HEAD';
 }

package/src/transport/local.js

@@ -79,6 +79,7 @@ export class LocalTransport extends BatchTransport {
     this.blocked = new BlockedRequests();
     this.blockedWarnings = new Set();
     this.outdatedHubNoted = false;
+    this.hubVersionChecked = false;
   }
 
   /**
@@ -198,6 +199,12 @@ export class LocalTransport extends BatchTransport {
   // Sends the batch with the blocked-request counts gathered since the last batch. Records are
   // dropped only when the hub refuses them; when it isn't reachable, both are kept for later.
   async _deliver(batch) {
+    // Once per process: a hub left running by an older PeekInside is replaced by this version's.
+    if (!this.hubVersionChecked) {
+      this.hubVersionChecked = true;
+      const replaced = await this.hub.replaceIfOlder().catch(() => null);
+      if (replaced) console.log(`${LOG_PREFIX} Restarted the local dashboard: it was PeekInside ${replaced}, and this app uses ${VERSION}.`);
+    }
     const blocked = this.blocked.take();
     const samples = this.takeSamples();
     const { requests, exceptions, jobs, logs } = BatchTransport.split(batch);