fix(replay): shutting down before example load

Author: blakebyrnes

examples/.gitignore

@@ -1,4 +1,5 @@
 *.ts
 *.js
 !example.org.ts
+!proxy-example.js
 !news.ycombinator.com.ts

examples/default-example.js examples/proxy-example.jsexamples/default-example.js renamed to examples/proxy-example.js

@@ -90,6 +90,9 @@ export default class Application {
       if (key === '--replay-api-path') {
         ReplayApi.serverStartPath = value;
       }
+      if (key === '--replay-node-path') {
+        ReplayApi.nodePath = value;
+      }
     }
 
     if (this.shouldAppendToOpenReplayScript(replayMeta)) return;

replay/backend/Application.ts

@@ -14,7 +14,6 @@ import ITickState from '~shared/interfaces/ITickState';
 import ReplayTime from '~backend/api/ReplayTime';
 import getResolvable from '~shared/utils/promise';
 
-const loadWaitTime = 5e3;
 let pageCounter = 0;
 
 export default class ReplayTabState extends EventEmitter {
@@ -34,6 +33,7 @@ export default class ReplayTabState extends EventEmitter {
   public currentPlaybarOffsetPct = 0;
   public replayTime: ReplayTime;
   public tabCreatedTime: string;
+  public hasAllData = false;
 
   public get isActive() {
     return this.listenerCount('tick:changes') > 0;
@@ -87,13 +87,7 @@ export default class ReplayTabState extends EventEmitter {
 
   public transitionToNextTick() {
     const result = this.loadTick(this.currentTickIdx + 1);
-    if (
-      this.replayTime.close &&
-      // give it a few seconds to get the rest of the data.
-      // TODO: figure out how to confirm via http2 that all data is sent
-      new Date().getTime() - this.replayTime.close.getTime() > loadWaitTime &&
-      this.currentTickIdx === this.ticks.length - 1
-    ) {
+    if (this.replayTime.close && this.hasAllData && this.currentTickIdx === this.ticks.length - 1) {
       this.currentPlaybarOffsetPct = 100;
     }
     return result;
@@ -188,7 +182,7 @@ export default class ReplayTabState extends EventEmitter {
     if (!newTick) return;
     if (!this.replayTime.close) {
       // give ticks time to load. TODO: need a better strategy for this
-      if (new Date().getTime() - new Date(newTick.timestamp).getTime() < loadWaitTime) return;
+      if (new Date().getTime() - new Date(newTick.timestamp).getTime() < 2e3) return;
     }
 
     console.log('Loading tick %s', newTickIdx);
@@ -322,7 +316,7 @@ export default class ReplayTabState extends EventEmitter {
         tick.isNewDocumentTick = true;
         tick.documentOrigin = textContent;
         this.pages.push({
-          id: pageCounter += 1,
+          id: (pageCounter += 1),
           url: textContent,
           commandId,
         });

replay/backend/api/ReplayTabState.ts

@@ -12,6 +12,7 @@ import ReplayTime from '~backend/api/ReplayTime';
 export default class ReplayApi {
   public static serverProcess: ChildProcess;
   public static serverStartPath: string;
+  public static nodePath: string;
   private static sessions = new Set<http2.ClientHttp2Session>();
   private static localApiHost: string;
 
@@ -21,6 +22,7 @@ export default class ReplayApi {
   public lastActivityDate: Date;
   public lastCommandName: string;
   public showUnresponsiveMessage = true;
+  public hasAllData = false;
 
   public onNewTab?: (tab: ReplayTabState) => any;
 
@@ -52,25 +54,34 @@ export default class ReplayApi {
     ReplayApi.sessions.add(this.http2Session);
     this.http2Session.on('close', () => {
       ReplayApi.sessions.delete(this.http2Session);
+      this.http2Session.unref();
       console.log('Http2 Session closed');
     });
     this.http2Session.on('stream', this.onStream.bind(this));
 
     const request = this.http2Session
-      .request({
-        ':path': `/`,
-        'data-location': this.saSession.dataLocation,
-        'session-name': this.saSession.name,
-        'session-id': this.saSession.id,
-        'script-instance-id': this.saSession.scriptInstanceId,
-        'script-entrypoint': this.saSession.scriptEntrypoint,
-      })
+      .request(
+        {
+          ':path': `/`,
+          'data-location': this.saSession.dataLocation,
+          'session-name': this.saSession.name,
+          'session-id': this.saSession.id,
+          'script-instance-id': this.saSession.scriptInstanceId,
+          'script-entrypoint': this.saSession.scriptEntrypoint,
+        },
+        { waitForTrailers: true },
+      )
       .on('response', async headers => {
         const status = headers[':status'];
         if (status !== 200) {
           const data = await streamToJson<{ message: string }>(request);
           this.isReadyResolvable.reject(new Error(data.message ?? 'Unexpected Error'));
         }
+      })
+      .on('trailers', trailers => {
+        console.log('Got Replay API Trailer', trailers);
+        this.hasAllData = true;
+        for (const tab of this.tabs) tab.hasAllData = true;
       });
   }
 
@@ -194,8 +205,8 @@ export default class ReplayApi {
       !!ReplayApi.serverProcess,
       ReplayApi.sessions.size,
     );
-    if (ReplayApi.serverProcess) ReplayApi.serverProcess.kill();
     for (const session of ReplayApi.sessions) session.destroy();
+    if (ReplayApi.serverProcess) ReplayApi.serverProcess.kill();
   }
 
   public static async connect(replay: IReplayMeta) {
@@ -217,8 +228,9 @@ export default class ReplayApi {
       const replayDir = __dirname.split(`${Path.sep}replay${Path.sep}`).shift();
       this.serverStartPath = Path.resolve(replayDir, 'session-state/api/start');
     }
+    if (!this.nodePath) this.nodePath = 'node';
     console.log('Launching Replay API Server at %s', this.serverStartPath);
-    const child = spawn(`node "${this.serverStartPath}"`, args, {
+    const child = spawn(`${this.nodePath} "${this.serverStartPath}"`, args, {
       stdio: ['ignore', 'pipe', 'inherit'],
       shell: true,
       windowsHide: true,
@@ -229,6 +241,9 @@ export default class ReplayApi {
       },
     });
     this.serverProcess = child;
+    this.serverProcess.once('exit', () => {
+      this.serverProcess = null;
+    });
 
     child.stdout.setEncoding('utf8');
     const promise = await new Promise(resolve => {

replay/backend/api/index.ts

@@ -89,7 +89,6 @@ export default class ReplayView extends ViewBackend {
   }
 
   public fixBounds(newBounds: { x: number; width: number; y: any; height: number }) {
-    console.log('fixing bounds', newBounds, this.browserView.getBounds());
     this.playbarView.fixBounds({
       x: 0,
       y: newBounds.height + newBounds.y,
@@ -103,7 +102,6 @@ export default class ReplayView extends ViewBackend {
 
   public attach() {
     if (this.isAttached) return;
-    console.log('attaching replay');
     super.attach();
     this.playbarView.attach();
     this.interceptHttpRequests();

replay/backend/models/ReplayView.ts

@@ -94,7 +94,7 @@ export default class BaseOverlay {
   }
 
   public hide() {
-    if (!this.browserWindow) return;
+    if (!this.browserWindow || this.browserWindow.isDestroyed()) return;
     if (!this.visible) return;
 
     this.browserWindow.removeBrowserView(this.browserView);

replay/backend/overlays/BaseOverlay.ts

@@ -23,6 +23,7 @@ export function replay(launchArgs: IReplayLaunchArgs) {
     `--replay-api-path="${apiPath}"`,
     `--replay-script-start-date="${scriptStartDate}"`,
     `--replay-api-server="${replayApiServer}"`,
+    `--replay-node-path="${process.execPath}"`,
   ];
 
   if (isBinaryInstalled()) {

replay/index.ts

@@ -46,7 +46,7 @@
     "build": "yarn build:dist",
     "build:pack": "yarn build:icons && shx cp pack.sh ../build/replay/pack.sh && cd ../build/replay && electron-builder -mwl && ./pack.sh",
     "clean": "shx rm -rf ../build/replay/static && shx rm -rf ../build/replay/dist && tsc -b --clean tsconfig.json && tsc -b --clean frontend/tsconfig.json",
-    "dev": "yarn build:backend && concurrently -k -n backend,frontend -c blue,green \"yarn start:backend\" \"cd frontend && yarn serve\"",
+    "dev": "yarn build:backend && concurrently -k -n backend,frontend -c blue,green \"yarn start:backend\" \"cd frontend && yarn dev\"",
     "start:backend": "cross-env CLEAR_LOGS=true WEBPACK_DEV_SERVER_URL=http://localhost:8080 NODE_ENV=development electron ../build/replay",
     "start:frontend": "cd frontend && yarn dev",
     "start": "electron ../build/replay",

replay/package.json

@@ -141,14 +141,13 @@ export default class SessionLoader extends EventEmitter {
   public checkState() {
     if (!this.sessionState || this.session.closeDate) return;
     const scriptState = this.sessionState.checkForResponsive();
-    const lastState = this.lastScriptState;
+    const lastState = { ...(this.lastScriptState ?? {}) };
 
     this.lastScriptState = scriptState;
     if (
-      !lastState ||
       lastState.hasRecentErrors !== scriptState.hasRecentErrors ||
       lastState.closeDate !== scriptState.closeDate ||
-      lastState.lastActivityDate !== scriptState.lastActivityDate ||
+      lastState.lastActivityDate?.getTime() !== scriptState.lastActivityDate?.getTime() ||
       lastState.lastCommandName !== scriptState.lastCommandName
     ) {
       this.emit('script-state', scriptState);