@oneuptime/common 13.0.5 → 13.0.7

package/Tests/UI/Rum/ReplayEngine.test.ts

@@ -11,6 +11,7 @@ import { createReplayEngine } from "../../../../App/FeatureSet/Dashboard/src/Com
 import {
   REPLAY_FEED_AHEAD_MIN_MS,
   REPLAY_HIDDEN_TICK_MS,
+  REPLAY_PAUSED_TICK_MS,
   ReplayEngine,
   ReplayEngineSnapshot,
   ReplayScheduleHandle,
@@ -613,6 +614,44 @@ async function loadAndFlush(
   await flush();
 }
 
+/*
+ * A loader for a second tab of the same session, with its own three
+ * chunks. The tab-switch scenarios all want one and differ only in what
+ * they do with it.
+ */
+function makeSecondTabLoader(tabId: string = "tab-2"): ChunkLoader {
+  return new ChunkLoader({
+    sessionId: "sess-1",
+    tabId: tabId,
+    entries: [
+      { ...makeEntry(0, { hasFullSnapshot: true }), tabId: tabId },
+      { ...makeEntry(1), tabId: tabId },
+      { ...makeEntry(2), tabId: tabId },
+    ],
+    fetcher: (
+      request: SessionReplayChunkFetchRequest,
+    ): Promise<ArrayBuffer> => {
+      return Promise.resolve(
+        encodeFrames(
+          request.chunkIndexes.map(
+            (
+              chunkIndex: number,
+            ): {
+              chunkIndex: number;
+              events: Array<SessionReplayRecordedEvent>;
+            } => {
+              return {
+                chunkIndex: chunkIndex,
+                events: eventsFor(chunkIndex, 2),
+              };
+            },
+          ),
+        ),
+      );
+    },
+  });
+}
+
 function dataOf(events: Array<SessionReplayRecordedEvent>): Array<unknown> {
   return events.map((event: SessionReplayRecordedEvent): unknown => {
     return event.data;
@@ -1166,6 +1205,159 @@ describe("ReplayEngine playback clock", () => {
       expect(snapshot.currentTimeMs).toBe(target);
     }
   });
+
+  /*
+   * The tick is how the clock follows rrweb, so its cadence has to follow
+   * the state even when the state changes asynchronously. Autoplay sends
+   * PLAY while the first chunk is still loading, which puts the tick on
+   * the paused timer; the build then landed and started rrweb without
+   * moving it, so for up to REPLAY_PAUSED_TICK_MS the clock stood still at
+   * 0:00.0 while the recording played. A Pause in that window published
+   * 0:00.0 and the next paused tick showed 0:00.1 - the Session Replay UI
+   * suite's "switches tab by keyboard" failure on master.
+   */
+  it("puts the tick on the playing cadence when an autoplay build or a stalled feed lands", async () => {
+    const harness: Harness = makeHarness({
+      entries: [
+        makeEntry(0, { hasFullSnapshot: true }),
+        makeEntry(1),
+        makeEntry(2),
+      ],
+      deferFetch: true,
+    });
+    /* The last tick the engine scheduled; its other timers are far longer. */
+    const tickDelayMs: () => number | undefined = (): number | undefined => {
+      const ticks: Array<{ delayMs: number }> = harness.scheduled.filter(
+        (entry: { delayMs: number }): boolean => {
+          return entry.delayMs <= REPLAY_PAUSED_TICK_MS;
+        },
+      );
+      return ticks[ticks.length - 1]?.delayMs;
+    };
+
+    harness.engine.dispatch({ type: "LOAD", anchorChunkIndex: 0, targetMs: 0 });
+    harness.engine.dispatch({ type: "PLAY" });
+
+    expect(harness.snapshot().buffer).toBe("building");
+    expect(tickDelayMs()).toBe(REPLAY_PAUSED_TICK_MS);
+
+    /* The build lands outside any dispatch or tick. */
+    harness.resolveFetch();
+    await flush();
+
+    expect(harness.snapshot().phase).toBe("playing");
+    expect(tickDelayMs()).toBeLessThan(REPLAY_HIDDEN_TICK_MS);
+
+    /* A stall is not playing, so the engine may slow down while it waits... */
+    harness.replayers[0]!.emit("finish");
+
+    expect(harness.snapshot().buffer).toBe("stalled");
+    expect(tickDelayMs()).toBe(REPLAY_PAUSED_TICK_MS);
+
+    /* ...and the feed that ends it, also asynchronous, speeds it back up. */
+    harness.resolveFetch();
+    await flush();
+
+    expect(harness.snapshot().phase).toBe("playing");
+    expect(tickDelayMs()).toBeLessThan(REPLAY_HIDDEN_TICK_MS);
+  });
+
+  /*
+   * rrweb moves its clock in its own animation frame, and the engine only
+   * reads it on a tick, so when Pause lands the engine's last reading can
+   * trail rrweb (by a frame, or by the whole paused-timer interval the
+   * test above closes). The pause must publish where rrweb actually
+   * stopped: otherwise the next paused TICK moves a clock the viewer has
+   * already seen stop.
+   */
+  it("publishes the pause at the time rrweb stopped on, and holds it there", async () => {
+    const harness: Harness = makeHarness({
+      entries: [makeEntry(0, { hasFullSnapshot: true }), makeEntry(1)],
+    });
+
+    await loadAndFlush(harness, 0, 0);
+    harness.engine.dispatch({ type: "PLAY" });
+    await harness.tick(80);
+    expect(harness.snapshot().currentTimeMs).toBe(80);
+
+    /* rrweb's frame ran after the engine's: its clock is already at 110. */
+    harness.live().advance(30, 1);
+    const clockTicksBefore: number = harness.clockTicks.length;
+    const snapshotsBefore: number = harness.snapshots.length;
+
+    harness.engine.dispatch({ type: "PAUSE" });
+
+    expect(harness.snapshot().phase).toBe("paused");
+    expect(harness.snapshot().currentTimeMs).toBe(110);
+    expect(harness.engine.getCurrentTimeMs?.()).toBe(110);
+    expect(harness.clockTicks.slice(clockTicksBefore)).toEqual([110]);
+
+    /* Paused TICKs read the same stopped clock, so nothing moves after. */
+    for (let i: number = 0; i < 4; i++) {
+      await harness.tick(250);
+    }
+
+    expect(harness.clockTicks.length).toBeGreaterThan(clockTicksBefore + 1);
+
+    for (const value of harness.clockTicks.slice(clockTicksBefore)) {
+      expect(value).toBe(110);
+    }
+
+    for (const snapshot of harness.snapshots.slice(snapshotsBefore)) {
+      expect(snapshot.phase).toBe("paused");
+      expect(snapshot.currentTimeMs).toBe(110);
+    }
+  });
+
+  /*
+   * (c) holds through a pause too. Seeking BACK to another anchor leaves
+   * the outgoing Replayer - still on screen as the held last frame -
+   * answering with a time past the target, so the monotonic rule alone
+   * would not stop a pause that consulted it from jumping the clock ahead.
+   */
+  it("keeps the seek target when paused during a rebuild", async () => {
+    const harness: Harness = makeHarness({
+      entries: [
+        makeEntry(0, { hasFullSnapshot: true }),
+        makeEntry(1),
+        makeEntry(2, { hasFullSnapshot: true }),
+        makeEntry(3),
+      ],
+      deferFetch: true,
+    });
+
+    harness.engine.dispatch({
+      type: "LOAD",
+      anchorChunkIndex: 2,
+      targetMs: 2 * CHUNK_MS,
+    });
+    harness.resolveFetch();
+    await flush();
+    harness.resolveFetch();
+    await flush();
+    harness.engine.dispatch({ type: "PLAY" });
+    await harness.tick(500);
+    expect(harness.snapshot().currentTimeMs).toBe(2 * CHUNK_MS + 500);
+
+    const target: number = 4000;
+    harness.engine.dispatch({ type: "SEEK", offsetMs: target, token: 1 });
+    expect(harness.snapshot().pendingSeekMs).toBe(target);
+    expect(harness.snapshot().currentTimeMs).toBe(target);
+
+    harness.engine.dispatch({ type: "PAUSE" });
+
+    expect(harness.snapshot().phase).not.toBe("playing");
+    expect(harness.snapshot().currentTimeMs).toBe(target);
+    expect(harness.engine.getCurrentTimeMs?.()).toBe(target);
+
+    harness.resolveFetch();
+    await flush();
+    harness.resolveFetch();
+    await flush();
+
+    expect(harness.snapshot().phase).toBe("paused");
+    expect(harness.snapshot().currentTimeMs).toBe(target);
+  });
 });
 
 describe("ReplayEngine transport state", () => {
@@ -2244,6 +2436,147 @@ describe("ReplayEngine tabs and live sessions", () => {
     expect(harness.snapshot().currentTimeMs).toBe(20000);
   });
 
+  /*
+   * The engine half of continuous playback across tabs
+   * (github.com/OneUptime/oneuptime/issues/3865).
+   *
+   * onFinish parks the engine with intent "paused", so a switch made to
+   * KEEP WATCHING - the shell's auto-continue, or the "Continue in Tab 2"
+   * chip - used to land the next tab on a still picture that needed a
+   * Play click of its own. `resume` carries the intent into the switch;
+   * omitting it keeps the behaviour a tab pill wants.
+   */
+  it("resumes playback in the target tab when the switch says to", async () => {
+    const harness: Harness = makeHarness({
+      entries: [makeEntry(0, { hasFullSnapshot: true }), makeEntry(1)],
+    });
+
+    await loadAndFlush(harness, 0, 0);
+    harness.engine.dispatch({ type: "PLAY" });
+
+    /* Play the tab out: a Finish with nothing left to feed is its end. */
+    harness.live().emit("finish");
+    await flush();
+    harness.live().emit("finish");
+    await flush();
+
+    expect(harness.snapshot().phase).toBe("ended");
+    expect(harness.snapshot().intent).toBe("paused");
+
+    harness.engine.dispatch({
+      type: "TAB_SWITCH",
+      tabId: "tab-2",
+      loader: makeSecondTabLoader(),
+      resume: true,
+    });
+    await flush();
+
+    expect(harness.snapshot().activeTabId).toBe("tab-2");
+    expect(harness.snapshot().intent).toBe("playing");
+    expect(harness.snapshot().phase).toBe("playing");
+    /*
+     * The landing PLAYED rather than paused - the whole point. Without
+     * the flag the new Replayer was handed a pause() and the viewer saw
+     * the next page of the visit frozen on its first frame.
+     */
+    expect(harness.replayers[1]!.playOffsets.length).toBeGreaterThan(0);
+    expect(harness.replayers[1]!.pauseOffsets).toEqual([]);
+    expect(harness.replayers[1]!.isPlaying).toBe(true);
+  });
+
+  it("a switch that does not ask to resume stays paused", async () => {
+    const harness: Harness = makeHarness({
+      entries: [makeEntry(0, { hasFullSnapshot: true }), makeEntry(1)],
+    });
+
+    await loadAndFlush(harness, 0, 0);
+    harness.engine.dispatch({ type: "PLAY" });
+    harness.live().emit("finish");
+    await flush();
+    harness.live().emit("finish");
+    await flush();
+
+    expect(harness.snapshot().phase).toBe("ended");
+
+    harness.engine.dispatch({
+      type: "TAB_SWITCH",
+      tabId: "tab-2",
+      loader: makeSecondTabLoader(),
+    });
+    await flush();
+
+    expect(harness.snapshot().activeTabId).toBe("tab-2");
+    expect(harness.snapshot().intent).toBe("paused");
+    expect(harness.replayers[1]!.playOffsets).toEqual([]);
+    expect(harness.replayers[1]!.isPlaying).toBe(false);
+  });
+
+  /*
+   * A viewer watching tab 1 who clicks tab 3 in the strip is mid-playback,
+   * and `resume` is absent there. The intent in force must carry over
+   * anyway, so the flag only ever ADDS play intent and never removes it.
+   */
+  it("keeps playing across a switch made while playing, with no flag", async () => {
+    const harness: Harness = makeHarness({
+      entries: [makeEntry(0, { hasFullSnapshot: true }), makeEntry(1)],
+    });
+
+    await loadAndFlush(harness, 0, 0);
+    harness.engine.dispatch({ type: "PLAY" });
+    await flush();
+
+    expect(harness.snapshot().intent).toBe("playing");
+
+    harness.engine.dispatch({
+      type: "TAB_SWITCH",
+      tabId: "tab-2",
+      loader: makeSecondTabLoader(),
+    });
+    await flush();
+
+    expect(harness.snapshot().intent).toBe("playing");
+    expect(harness.replayers[1]!.isPlaying).toBe(true);
+  });
+
+  /*
+   * A resuming switch into a tab with nothing stored must halt rather
+   * than run a "playing" phase over a stage that will never move. The
+   * shell will not aim at such a tab (the pure decision refuses a tab
+   * without footage), but the engine is the last line.
+   */
+  it("halts rather than plays when the target tab has no footage", async () => {
+    const harness: Harness = makeHarness({
+      entries: [makeEntry(0, { hasFullSnapshot: true }), makeEntry(1)],
+    });
+
+    await loadAndFlush(harness, 0, 0);
+    harness.engine.dispatch({ type: "PLAY" });
+    harness.live().emit("finish");
+    await flush();
+    harness.live().emit("finish");
+    await flush();
+
+    const empty: ChunkLoader = new ChunkLoader({
+      sessionId: "sess-1",
+      tabId: "tab-empty",
+      entries: [{ ...makeEntry(0, { eventCount: 0 }), tabId: "tab-empty" }],
+      fetcher: (): Promise<ArrayBuffer> => {
+        return Promise.resolve(new ArrayBuffer(0));
+      },
+    });
+
+    harness.engine.dispatch({
+      type: "TAB_SWITCH",
+      tabId: "tab-empty",
+      loader: empty,
+      resume: true,
+    });
+    await flush();
+
+    expect(harness.snapshot().phase).toBe("error");
+    expect(harness.snapshot().error?.retryable).toBe(false);
+  });
+
   it("turns an ended tab back into a stall when new manifest rows arrive", async () => {
     const harness: Harness = makeHarness({
       entries: [makeEntry(0, { hasFullSnapshot: true }), makeEntry(1)],