Merge pull request #46 from reclaimprotocol/fix/viewer-boot-watchdog-main

fix: retry stalled viewer module

Author: kryptocodes

images/minimal-vnc-desktop/Dockerfile

@@ -271,20 +271,19 @@ RUN set -eux; \
         --minify-whitespace --minify-syntax \
         --outfile=/usr/share/novnc/viewer.bundle.js; \
     rm -rf /tmp/esbuild.tgz /tmp/esbuild-src /tmp/esbuild.lock; \
-    # Content-hash the bundle so novnc-proxy can serve it immutably (max-age=1y):
-    # a content change yields a NEW url, so a reconnect/reopen skips re-downloading
-    # it entirely — with zero staleness risk (the reason liveview.html itself stays
-    # no-store, pointing at whatever hash is current). Deterministic: the hash is of
-    # esbuild's deterministic output. Rewrite the <script src> to the hashed name.
+    # Immutable primary bundle plus a no-cache fallback; generate SRI from its bytes.
     bundle_hash="$(sha256sum /usr/share/novnc/viewer.bundle.js | cut -c1-12)"; \
+    bundle_sri="$(openssl dgst -sha384 -binary /usr/share/novnc/viewer.bundle.js | base64 | tr -d '\n')"; \
     mv /usr/share/novnc/viewer.bundle.js "/usr/share/novnc/viewer-${bundle_hash}.bundle.js"; \
-    sed -i "s#src=\"viewer\.bundle\.js\"#src=\"viewer-${bundle_hash}.bundle.js\"#" \
+    cp "/usr/share/novnc/viewer-${bundle_hash}.bundle.js" "/usr/share/novnc/viewer-fallback-${bundle_hash}.bundle.js"; \
+    sed -i "s#viewer\.bundle\.js#viewer-${bundle_hash}.bundle.js#g; s#viewer-fallback\.bundle\.js#viewer-fallback-${bundle_hash}.bundle.js#g; s#sha384-__VIEWER_BUNDLE_SRI__#sha384-${bundle_sri}#g" \
         /usr/share/novnc/liveview.html; \
     # Precompress the (hashed) bundle: it's the cold-start bottleneck over the
     # tunnel and novnc-proxy serves the .gz via Accept-Encoding negotiation. -n
     # drops the name/mtime from the gzip header so the output is deterministic;
     # -k keeps the raw file for clients without gzip.
-    gzip -9 -n -k -f "/usr/share/novnc/viewer-${bundle_hash}.bundle.js"
+    gzip -9 -n -k -f "/usr/share/novnc/viewer-${bundle_hash}.bundle.js" \
+        "/usr/share/novnc/viewer-fallback-${bundle_hash}.bundle.js"
 
 COPY third-party/fortress /usr/share/doc/popcorn/third-party/fortress
 COPY --chown=kernel:kernel extensions/proxy /home/kernel/extensions/proxy

images/minimal-vnc-desktop/host/popcorn-host.js

@@ -685,6 +685,14 @@
             emit('hello', d);
             reportLayout('hello');
             break;
+          // The preflight ran; the full viewer handshake may still fail.
+          case 'POPCORN_BOOT': emit('boot', d); break;
+          case 'POPCORN_BOOT_ERROR': emit('booterror', d); break;
+          // The watchdog gave up waiting for the module. attempt/retrying separate a
+          // session that RECOVERED on reload from one that never booted at all —
+          // without it both look identical downstream, which is what made this class
+          // of stall invisible for five days.
+          case 'POPCORN_BOOT_STALL': emit('bootstall', d); break;
           case 'POPCORN_VIEWPORT': emit('viewport', d); break;
           case 'POPCORN_CONNECT': emit('connect', d); break;
           case 'POPCORN_FRAME':
@@ -847,7 +855,7 @@
     }
 
     return {
-      /** Subscribe to viewer events: hello|viewport|connect|frame|disconnect|error|kbdstate|inputdrift|interaction|health|scale|layout|rtt */
+      /** Subscribe to viewer events: boot|booterror|bootstall|hello|viewport|connect|frame|disconnect|error|kbdstate|inputdrift|interaction|health|scale|layout|rtt */
       on: function (name, fn) {
         (listeners[name] || (listeners[name] = [])).push(fn);
         return this;

images/minimal-vnc-desktop/kbd/test/host-embed-layout.test.mjs

@@ -293,6 +293,30 @@ test('the viewer\'s scale report is relayed UP to the embedder', () => {
   assert.ok(h.parentPosted.some((m) => m.type === 'POPCORN_SCALE'), 'and keeps it travelling up');
 });
 
+test('boot diagnostics are emitted locally and relayed through a portal', () => {
+  const h = makeHostWindow({ top: false, ...COMPLIANT });
+  const host = h.PopcornHost.attach(h.iframe, { childOrigin: 'https://pod.test', relay: true });
+  const boots = [];
+  const errors = [];
+  const stalls = [];
+  host.on('boot', (d) => boots.push(d));
+  host.on('booterror', (d) => errors.push(d));
+  host.on('bootstall', (d) => stalls.push(d));
+
+  h.fromChild({ type: 'POPCORN_BOOT', unsupported: null, ua: 'viewer-ua' });
+  h.fromChild({ type: 'POPCORN_BOOT_ERROR', msg: 'SyntaxError', src: 'liveview.html', line: 206 });
+  h.fromChild({ type: 'POPCORN_BOOT_STALL', stage: 'module', attempt: 0, retrying: true });
+
+  assert.equal(boots.length, 1, 'the embedding page can observe that the viewer page ran');
+  assert.equal(errors.length, 1, 'the embedding page can observe module evaluation failures');
+  assert.equal(stalls.length, 1, 'the embedding page can observe a viewer that never booted');
+  assert.equal(stalls[0].stage, 'module', 'startup stalls are distinct from RFB transport failures');
+  assert.equal(stalls[0].retrying, true, 'the retry flag survives, so a recovery is distinguishable');
+  assert.deepEqual(h.parentPosted.map((m) => m.type),
+    ['POPCORN_BOOT', 'POPCORN_BOOT_ERROR', 'POPCORN_BOOT_STALL'],
+    'every diagnostic continues through a relay frame');
+});
+
 test('keyboard health is relayed through a portal hop', () => {
   const h = makeHostWindow({ top: false, ...COMPLIANT });
   const host = h.PopcornHost.attach(h.iframe, { childOrigin: 'https://pod.test', relay: true });

images/minimal-vnc-desktop/liveview.html

@@ -159,14 +159,116 @@
           'This browser is too old to run the live viewer. Update your OS/browser, or open this link in the latest Safari or Chrome.'
         );
       }
+
+      // Report that the page ran before the viewer module completes its handshake.
+      try {
+        parent.postMessage({
+          type: 'POPCORN_BOOT',
+          unsupported: window.__viewerUnsupported || null,
+          ua: navigator.userAgent
+        }, '*');
+      } catch (e) { /* no parent, or a parent that refuses '*' */ }
+
+      // Surface module evaluation failures to cross-origin embedders.
+      if (window.addEventListener) {
+        window.addEventListener('error', function (event) {
+          // Runtime errors after startup belong to the viewer's own lifecycle,
+          // not the boot-failure channel.
+          if (window.__viewerBooted) return;
+          try {
+            parent.postMessage({
+              type: 'POPCORN_BOOT_ERROR',
+              msg: String((event && event.message) || ''),
+              src: String((event && event.filename) || ''),
+              line: (event && event.lineno) || 0
+            }, '*');
+          } catch (e) { /* see above */ }
+        });
+      }
+
+      // Retry the asset, not this document: the primary, a query-busted retry,
+      // then a distinct no-cache fallback. Ten seconds avoids restarting slow boots.
+      var BOOT_DEADLINE_MS = 10000;
+      var bootAttempt = 0;
+      var assetPaths = [
+        'viewer.bundle.js',
+        'viewer.bundle.js?__pcna=1',
+        'viewer-fallback.bundle.js'
+      ];
+      var assetScript;
+      var assetSettled = false;
+
+      // Rewritten by the Docker build with hashed paths and SRI.
+      var assetIntegrity = 'sha384-__VIEWER_BUNDLE_SRI__';
+
+      function reportStall(retrying) {
+        try {
+          parent.postMessage({
+            type: 'POPCORN_BOOT_STALL', stage: 'asset', attempt: bootAttempt, retrying: retrying,
+            path: assetPaths[bootAttempt]
+          }, '*');
+        } catch (e) { /* no parent, or a parent that refuses '*' */ }
+      }
+
+      function terminalAssetFailure() {
+        reportStall(false);
+        window.__viewerOverlay(
+          'Live view couldn\u2019t start',
+          'The viewer didn\u2019t finish loading. Check your connection and try again.',
+          function () { location.reload(); }
+        );
+      }
+
+      function loadViewerAsset() {
+        if (window.__viewerBooted || assetSettled) return;
+        if (bootAttempt >= assetPaths.length) {
+          assetSettled = true;
+          terminalAssetFailure();
+          return;
+        }
+        if (assetScript && assetScript.parentNode) assetScript.parentNode.removeChild(assetScript);
+        assetScript = document.createElement('script');
+        assetScript.type = 'module';
+        assetScript.src = assetPaths[bootAttempt];
+        assetScript.integrity = assetIntegrity;
+        assetScript.onerror = function () {
+          if (window.__viewerBooted || assetSettled) return;
+          try {
+            parent.postMessage({
+              type: 'POPCORN_BOOT_ERROR', msg: 'Viewer bundle request failed',
+              src: assetPaths[bootAttempt], line: 0
+            }, '*');
+          } catch (e) { /* see above */ }
+          if (bootAttempt + 1 >= assetPaths.length) {
+            assetSettled = true;
+            terminalAssetFailure();
+            return;
+          }
+          reportStall(true);
+          bootAttempt++;
+          loadViewerAsset();
+        };
+        document.head.appendChild(assetScript);
+      }
+
+      if (!window.__viewerUnsupported && window.setTimeout) {
+        loadViewerAsset();
+        setTimeout(function watchdog() {
+          if (window.__viewerBooted || assetSettled) return;
+          if (bootAttempt + 1 >= assetPaths.length) {
+            assetSettled = true;
+            terminalAssetFailure();
+            return;
+          }
+          reportStall(true);
+          bootAttempt++;
+          loadViewerAsset();
+          setTimeout(watchdog, BOOT_DEADLINE_MS);
+        }, BOOT_DEADLINE_MS);
+      }
     })();
   </script>
 
-  <!-- The entire viewer — noVNC core + the kbd/IME layer + this page's
-       controller — is bundled by esbuild at build time into one file (see
-       viewer.js + the Dockerfile bundler step), so it loads in a single request
-       instead of a ~70-module ES-graph waterfall. Served no-store; a module
-       script is deferred, so the classic preflight above runs first. -->
-  <script type="module" src="viewer.bundle.js"></script>
+  <!-- The asset loader above starts the content-addressed viewer module. -->
 </body>
 </html>