@oneuptime/common 13.0.6 → 13.0.7

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

@@ -614,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;
@@ -2398,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)],

package/Tests/UI/Rum/ReplayHeader.test.tsx

@@ -872,6 +872,29 @@ describe("ReplayHeader", () => {
       expect(props.onSwitchTab).toHaveBeenCalledWith("tab-2");
     });
 
+    /*
+     * The header owns no behaviour here; it passes the chip's handler down
+     * to the switcher. Pinned because the prop being absent is silent -
+     * the chip falls back to the plain switch and the next tab lands
+     * paused, which is exactly the click-per-tab of issue 3865 coming
+     * back rather than an error anyone would see.
+     */
+    it("hands the continue handler down to the tab switcher", () => {
+      const onContinueInTab: MockFunction = getJestMockFunction();
+      const props: ReplayHeaderProps = makeProps({
+        tabs: tabs,
+        continueInTab: tabs[1] as ReplayHeaderTab,
+        onContinueInTab: onContinueInTab,
+      });
+
+      render(<ReplayHeader {...props} />);
+
+      fireEvent.click(screen.getByTestId("replay-continue-in-tab"));
+
+      expect(onContinueInTab).toHaveBeenCalledWith("tab-2");
+      expect(props.onSwitchTab).not.toHaveBeenCalled();
+    });
+
     /*
      * One tab and a continuation is a real state (the tab played out and
      * the session goes on in a tab the strip would not draw): the row

package/Tests/UI/Rum/ReplayScrubber.test.tsx

@@ -1061,4 +1061,92 @@ describe("ReplayScrubber timeline lanes", () => {
 
     expect(values).toEqual([false, true]);
   });
+
+  /*
+   * Continuous playback across the browser tabs of a session
+   * (github.com/OneUptime/oneuptime/issues/3865). It is on by default, so
+   * the item a viewer first sees is the one that turns it OFF - the
+   * overflow menu labels every item by what pressing it does, not by the
+   * state it reports.
+   */
+  it("offers the auto-continue toggle, labelled by what the press does", () => {
+    const values: Array<boolean> = [];
+    const onAutoContinueChange: (isEnabled: boolean) => void = (
+      isEnabled: boolean,
+    ): void => {
+      values.push(isEnabled);
+    };
+
+    const { rerender } = render(
+      <ReplayScrubber
+        {...makeProps({ onAutoContinueChange: onAutoContinueChange })}
+      />,
+    );
+
+    fireEvent.click(screen.getByTestId("replay-more-menu"));
+
+    expect(
+      screen.queryByRole("menuitem", { name: "Play continuously across tabs" }),
+    ).toBeNull();
+
+    fireEvent.click(
+      screen.getByRole("menuitem", { name: "Stop at the end of each tab" }),
+    );
+
+    expect(values).toEqual([false]);
+
+    rerender(
+      <ReplayScrubber
+        {...makeProps({
+          isAutoContinueEnabled: false,
+          onAutoContinueChange: onAutoContinueChange,
+        })}
+      />,
+    );
+
+    fireEvent.click(screen.getByTestId("replay-more-menu"));
+    fireEvent.click(
+      screen.getByRole("menuitem", { name: "Play continuously across tabs" }),
+    );
+
+    expect(values).toEqual([false, true]);
+  });
+
+  /*
+   * An undefined preference reads as ON, the same rule the lanes follow,
+   * so a caller that predates the preference still describes the
+   * behaviour the player actually has.
+   */
+  it("treats an absent auto-continue preference as on", () => {
+    render(
+      <ReplayScrubber
+        {...makeProps({
+          onAutoContinueChange: (): void => {
+            // presence is what this asserts
+          },
+        })}
+      />,
+    );
+
+    fireEvent.click(screen.getByTestId("replay-more-menu"));
+
+    expect(
+      screen.getByRole("menuitem", { name: "Stop at the end of each tab" }),
+    ).toBeInTheDocument();
+  });
+
+  /* The toggle alone is enough to earn the overflow menu. */
+  it("shows the overflow menu for the auto-continue handler alone", () => {
+    render(
+      <ReplayScrubber
+        {...makeProps({
+          onAutoContinueChange: (): void => {
+            // presence is what this asserts
+          },
+        })}
+      />,
+    );
+
+    expect(screen.getByTestId("replay-more-menu")).toBeInTheDocument();
+  });
 });

package/Tests/UI/Rum/ReplayStageOverlays.test.tsx

@@ -867,6 +867,89 @@ describe("ReplayStageOverlays", () => {
       expect(props.onSwitchTab).toHaveBeenCalledWith("tab-2");
     });
 
+    /*
+     * Continuing is "keep watching", which is a different request to the
+     * engine from "take me to that tab": the shell resumes playback with
+     * the switch rather than landing the next page of the visit paused
+     * (github.com/OneUptime/oneuptime/issues/3865). So the chip prefers
+     * its own handler when it is given one.
+     */
+    it("prefers the continue handler over the plain tab switch", () => {
+      const props: ReplayStageOverlaysProps = makeProps({
+        snapshot: makeSnapshot({ buffer: "ended", currentTimeMs: DURATION_MS }),
+        continueInTab: {
+          tabId: "tab-2",
+          label: "Tab 2",
+          durationMs: 30000,
+          openedAtMs: 134000,
+          hasFootage: true,
+          isActive: false,
+        },
+        onSwitchTab: jest.fn(),
+        onContinueInTab: jest.fn(),
+      });
+
+      render(<ReplayStageOverlays {...props} />);
+
+      fireEvent.click(screen.getByTestId("replay-ended-continue-in-tab"));
+
+      expect(props.onContinueInTab).toHaveBeenCalledWith("tab-2");
+      expect(props.onSwitchTab).not.toHaveBeenCalled();
+    });
+
+    /* A caller that only knows about the continue handler still gets the chip. */
+    it("shows the chip when only the continue handler is given", () => {
+      const props: ReplayStageOverlaysProps = makeProps({
+        snapshot: makeSnapshot({ buffer: "ended", currentTimeMs: DURATION_MS }),
+        continueInTab: {
+          tabId: "tab-3",
+          label: "Tab 3",
+          durationMs: 30000,
+          openedAtMs: 200000,
+          hasFootage: true,
+          isActive: false,
+        },
+        onContinueInTab: jest.fn(),
+      });
+
+      render(<ReplayStageOverlays {...props} />);
+
+      const chip: HTMLElement = screen.getByTestId(
+        "replay-ended-continue-in-tab",
+      );
+
+      expect(chip).toHaveTextContent("Continue in Tab 3");
+
+      fireEvent.click(chip);
+      expect(props.onContinueInTab).toHaveBeenCalledWith("tab-3");
+    });
+
+    /* No handler at all: no chip, rather than a dead button. */
+    it("draws no chip without a handler for it", () => {
+      render(
+        <ReplayStageOverlays
+          {...makeProps({
+            snapshot: makeSnapshot({
+              buffer: "ended",
+              currentTimeMs: DURATION_MS,
+            }),
+            continueInTab: {
+              tabId: "tab-2",
+              label: "Tab 2",
+              durationMs: 30000,
+              openedAtMs: 134000,
+              hasFootage: true,
+              isActive: false,
+            },
+          })}
+        />,
+      );
+
+      expect(
+        screen.queryByTestId("replay-ended-continue-in-tab"),
+      ).not.toBeInTheDocument();
+    });
+
     it("offers the user's next session from the ended card", () => {
       const props: ReplayStageOverlaysProps = makeProps({
         snapshot: makeSnapshot({ buffer: "ended", currentTimeMs: DURATION_MS }),

package/Tests/UI/Rum/ReplayTabSwitcher.test.tsx

@@ -215,6 +215,39 @@ describe("ReplayTabSwitcher summary", () => {
     expect(props.onSwitchTab).toHaveBeenCalledWith("tab-2");
   });
 
+  /*
+   * Continuing means "keep watching", which the shell turns into a tab
+   * switch that RESUMES playback; picking a tab from the strip keeps the
+   * intent in force. They are two different requests, so the chip takes
+   * its own handler when there is one - otherwise clicking Continue left
+   * the next page of the visit paused and needed a Play as well
+   * (github.com/OneUptime/oneuptime/issues/3865).
+   */
+  it("prefers the continue handler over the plain tab switch", () => {
+    const props: ReplayTabSwitcherProps = renderSwitcher({
+      tabs: [makeTab({ isActive: true })],
+      continueInTab: makeTab({ tabId: "tab-2", label: "Tab 2" }),
+      onContinueInTab: jest.fn(),
+    });
+
+    fireEvent.click(screen.getByTestId("replay-continue-in-tab"));
+
+    expect(props.onContinueInTab).toHaveBeenCalledWith("tab-2");
+    expect(props.onSwitchTab).not.toHaveBeenCalled();
+  });
+
+  /* The pills are a deliberate jump and keep going through onSwitchTab. */
+  it("leaves the tab pills on the plain switch", () => {
+    const props: ReplayTabSwitcherProps = renderSwitcher({
+      onContinueInTab: jest.fn(),
+    });
+
+    fireEvent.click(screen.getAllByTestId("replay-tab-pill")[1] as HTMLElement);
+
+    expect(props.onSwitchTab).toHaveBeenCalledTimes(1);
+    expect(props.onContinueInTab).not.toHaveBeenCalled();
+  });
+
   it("counts open, closed and footage-less tabs", () => {
     renderSwitcher();
 

package/Tests/Utils/API.test.ts

@@ -11,6 +11,9 @@ import APIException from "../../Types/Exception/ApiException";
 import BadDataException from "../../Types/Exception/BadDataException";
 import GenericObject from "../../Types/GenericObject";
 import { JSONObject } from "../../Types/JSON";
+import RequestFailedDetails, {
+  RequestFailedPhase,
+} from "../../Types/Probe/RequestFailedDetails";
 import API from "../../Utils/API";
 import { HTTPResponseBodyBudget } from "../../Utils/HTTPResponseBodyReader";
 import { expect, jest } from "@jest/globals";
@@ -494,6 +497,46 @@ describe("API.getFriendlyErrorMessage", () => {
   });
 });
 
+describe("API.getRequestFailedDetails", () => {
+  test.each([
+    { code: "ETIMEDOUT", failedPhase: RequestFailedPhase.RequestTimeout },
+    { code: "ESOCKETTIMEDOUT", failedPhase: RequestFailedPhase.RequestTimeout },
+    { code: "ECONNABORTED", failedPhase: RequestFailedPhase.RequestAborted },
+  ])(
+    "classifies native $code errors without relying on message text",
+    (scenario: { code: string; failedPhase: RequestFailedPhase }) => {
+      const error: NodeJS.ErrnoException = new Error("The operation failed.");
+      error.code = scenario.code;
+
+      const details: RequestFailedDetails = API.getRequestFailedDetails(error);
+
+      expect(details.errorCode).toBe(scenario.code);
+      expect(details.failedPhase).toBe(scenario.failedPhase);
+      expect(details.rawErrorMessage).toBe(error.message);
+    },
+  );
+
+  test.each([
+    { code: 408 },
+    { code: null },
+    { code: {} },
+    { code: ["ETIMEDOUT"] },
+  ])(
+    "ignores a non-string native error code: $code",
+    (scenario: { code: unknown }) => {
+      const error: Error & { code: unknown } = Object.assign(
+        new Error("The operation failed."),
+        { code: scenario.code },
+      );
+
+      const details: RequestFailedDetails = API.getRequestFailedDetails(error);
+
+      expect(details.errorCode).toBeUndefined();
+      expect(details.failedPhase).toBe(RequestFailedPhase.Unknown);
+    },
+  );
+});
+
 describe("API instance properties", () => {
   test("should return protocol with trailing slashes", () => {
     const api: API = new API(Protocol.HTTPS, new Hostname("example.com"));
@@ -637,6 +680,59 @@ describe("API.fetch with options", () => {
     expect(budget.remainingBytes).toBe(1024 - Buffer.byteLength(json));
   });
 
+  test.each([200, 400, 503])(
+    "should cancel a stalled status %s body even after Axios has settled",
+    async (status: number) => {
+      mockedAxios.mockClear();
+      HTTPErrorResponseMock.mockClear();
+      const controller: AbortController = new AbortController();
+      let resolveReading: () => void = (): void => {};
+      const reading: Promise<void> = new Promise((resolve: () => void) => {
+        resolveReading = resolve;
+      });
+      const body: Readable = new Readable({
+        read: (): void => {
+          resolveReading();
+        },
+      });
+      const response: AxiosResponse = createAxiosResponse({
+        data: body,
+        status: status,
+      });
+      if (status >= 400) {
+        mockedAxios.mockRejectedValueOnce(
+          createAxiosError({ response: response }),
+        );
+      } else {
+        mockedAxios.mockResolvedValueOnce(response);
+      }
+
+      const pending: Promise<HTTPResponse<JSONObject>> = API.fetch({
+        method: HTTPMethod.GET,
+        url: new URL(
+          Protocol.HTTPS,
+          "api.example.com",
+          new Route("stalled-body"),
+        ),
+        options: {
+          signal: controller.signal,
+          responseBodyBudget: new HTTPResponseBodyBudget(100),
+        },
+      });
+      const rejected: Promise<void> = expect(pending).rejects.toThrow(
+        "Response body read was aborted",
+      );
+
+      await reading;
+      controller.abort();
+      await rejected;
+
+      expect(body.destroyed).toBe(true);
+      expect(mockedAxios).toHaveBeenCalledTimes(1);
+      expect(HTTPErrorResponseMock).not.toHaveBeenCalled();
+    },
+  );
+
   test("should strip a leading UTF-8 BOM before parsing a budgeted JSON stream", async () => {
     mockedAxios.mockClear();
     const bodyText: string = `\uFEFF${JSON.stringify(responseData)}`;