@oneuptime/common 14.0.1 → 14.0.3

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

@@ -122,7 +122,9 @@ jest.mock("../../../UI/Utils/Permission", () => {
 
 import RumApplicationSessionReplaySettings, {
   EffectiveRecordingStatePill,
+  SAME_ORIGIN_TRACE_PROPAGATION_TITLE,
   describeEffectiveRecordingState,
+  describeSameOriginTracePropagation,
 } from "../../../../App/FeatureSet/Dashboard/src/Pages/Rum/View/SessionReplaySettings";
 import useSessionReplayHealth, {
   SESSION_REPLAY_INGEST_STATUS_ROUTE,
@@ -583,3 +585,150 @@ describe("EffectiveRecordingStatePill (standalone)", () => {
     expect(ingestStatusCalls()).toHaveLength(1);
   });
 });
+
+/*
+ * RumApplication.sessionReplaySameOriginTracePropagation on the Replay
+ * Policy page: the read view names the switch and what it does, and the
+ * privacy summary gains its backend-link sentence exactly while it is on.
+ * The column defaults to true and the gate reads anything but an explicit
+ * false as on, so an unset value must read as on here too.
+ */
+const SAME_ORIGIN_ON_COPY: string =
+  "On: requests to your own origin carry a traceparent and this session's id";
+const SAME_ORIGIN_OFF_COPY: string =
+  "Off: nothing is added to requests to your own origin";
+
+describe("describeSameOriginTracePropagation", () => {
+  it("only an explicit false reads as off", () => {
+    expect(describeSameOriginTracePropagation(false)).toBe(
+      SAME_ORIGIN_OFF_COPY,
+    );
+    expect(describeSameOriginTracePropagation(true)).toBe(SAME_ORIGIN_ON_COPY);
+    expect(describeSameOriginTracePropagation(undefined)).toBe(
+      SAME_ORIGIN_ON_COPY,
+    );
+    expect(describeSameOriginTracePropagation(null)).toBe(SAME_ORIGIN_ON_COPY);
+  });
+
+  it("carries the fixed setting title", () => {
+    expect(SAME_ORIGIN_TRACE_PROPAGATION_TITLE).toBe(
+      "Same-origin trace propagation",
+    );
+  });
+});
+
+describe("Replay Policy page: same-origin trace propagation", () => {
+  async function renderWithRow(
+    overrides: Partial<RumApplication>,
+  ): Promise<HealthControl> {
+    getItemMock.mockImplementation((): Promise<RumApplication> => {
+      return Promise.resolve(makeApplication(overrides));
+    });
+
+    const health: HealthControl = holdHealth();
+
+    renderPage();
+
+    await waitForPolicyRows();
+
+    return health;
+  }
+
+  it("the policy fetch selects the switch", async () => {
+    const health: HealthControl = await renderWithRow({});
+
+    const select: JSONObject =
+      ((policyGetItemCalls()[0]?.[0] as { select?: JSONObject })
+        .select as JSONObject) || {};
+
+    expect(select["sessionReplaySameOriginTracePropagation"]).toBe(true);
+    expect(select["sessionReplayTracePropagationOrigins"]).toBe(true);
+
+    await act(async (): Promise<void> => {
+      health.release(wireStatus());
+    });
+  });
+
+  it("a row with it on reads on and adds the backend-link sentence", async () => {
+    const health: HealthControl = await renderWithRow({
+      sessionReplaySameOriginTracePropagation: true,
+      sessionReplayCaptureUserIdentity: false,
+    });
+
+    const card: HTMLElement = getPolicyCard();
+
+    expect(
+      within(card).getByText(SAME_ORIGIN_TRACE_PROPAGATION_TITLE),
+    ).toBeInTheDocument();
+    expect(within(card).getByText(SAME_ORIGIN_ON_COPY)).toBeInTheDocument();
+    expect(
+      within(card).getByText(
+        "None: no cross-origin request gets a traceparent",
+      ),
+    ).toBeInTheDocument();
+
+    await waitFor(
+      () => {
+        expect(
+          screen.getByTestId("privacy-summary-backend-link"),
+        ).toHaveTextContent(
+          "Same-origin requests carry this session's id to your backend",
+        );
+      },
+      { timeout: WAIT_TIMEOUT },
+    );
+    expect(screen.getByTestId("privacy-summary-identity")).toHaveTextContent(
+      "can still name the person",
+    );
+
+    await act(async (): Promise<void> => {
+      health.release(wireStatus());
+    });
+  });
+
+  it("a row with it off reads off and has no backend-link sentence", async () => {
+    const health: HealthControl = await renderWithRow({
+      sessionReplaySameOriginTracePropagation: false,
+      sessionReplayCaptureUserIdentity: false,
+    });
+
+    expect(
+      within(getPolicyCard()).getByText(SAME_ORIGIN_OFF_COPY),
+    ).toBeInTheDocument();
+
+    await waitFor(
+      () => {
+        expect(
+          screen.getByTestId("privacy-summary-identity"),
+        ).toHaveTextContent("cannot be found by who the person was");
+      },
+      { timeout: WAIT_TIMEOUT },
+    );
+    expect(screen.queryByTestId("privacy-summary-backend-link")).toBeNull();
+
+    await act(async (): Promise<void> => {
+      health.release(wireStatus());
+    });
+  });
+
+  it("a row that never set it reads as the on default, in both places", async () => {
+    const health: HealthControl = await renderWithRow({});
+
+    expect(
+      within(getPolicyCard()).getByText(SAME_ORIGIN_ON_COPY),
+    ).toBeInTheDocument();
+
+    await waitFor(
+      () => {
+        expect(
+          screen.getByTestId("privacy-summary-backend-link"),
+        ).toHaveAttribute("data-default", "true");
+      },
+      { timeout: WAIT_TIMEOUT },
+    );
+
+    await act(async (): Promise<void> => {
+      health.release(wireStatus());
+    });
+  });
+});

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

@@ -17,9 +17,10 @@ import { RecordingHealthStatus } from "../../../Types/Rum/SessionReplayHealth";
  * The three live checks flip as the health status changes; "Watch it"
  * appears only with a playable session and opens the newest one through
  * the LIST endpoint (never the manifest, which writes an audit row); the
- * not-sampled cause quotes the current sample percentage; the
- * onSessionChange snippet is present; the install snippet uses the safe
- * identifier or the placeholder; the CSP block keeps 'self'
+ * not-sampled cause quotes the current sample percentage; step 4 says
+ * backend linking is automatic, names the cross-origin step and offers
+ * the onSessionChange snippet as optional (issue #3979); the install
+ * snippet uses the safe identifier or the placeholder; the CSP block keeps 'self'
  * (session-list-15); "Run the installation test" lands on THIS
  * application's settings (settings-setup-17).
  */
@@ -61,6 +62,7 @@ import SessionReplaySetupGuide, {
 import { clearSessionReplayHealthStore } from "../../../../App/FeatureSet/Dashboard/src/Components/SessionReplay/useSessionReplayHealth";
 import {
   buildCspSnippet,
+  buildOnSessionChangeSnippet,
   buildScriptTagSnippet,
   getSafeAppIdentifier,
 } from "../../../../App/FeatureSet/Dashboard/src/Components/SessionReplay/SessionReplayInstallSnippet";
@@ -378,6 +380,74 @@ describe("Install snippet builders", () => {
     expect(csp).toContain("script-src  'self' https://one.example.com;");
     expect(csp).toContain("connect-src 'self' https://one.example.com;");
   });
+
+  /*
+   * Issue #3979: the session hook is no longer the join key for backend
+   * telemetry - the recorder's same-origin tracestate is - so the snippet
+   * is labelled optional and only stamps the page's own browser spans.
+   * It stamps each span at start through a span processor instead of
+   * mutating resource.attributes, which the exporter reads at export time
+   * and so re-labels spans batched before a rotation.
+   */
+  it("the correlation snippet is optional and stamps the page's own spans at start", () => {
+    const snippet: string = buildOnSessionChangeSnippet();
+
+    expect(snippet).toMatch(/^\/\/ Optional\./);
+    expect(snippet).toContain(
+      "Requests to your own origin are linked without it",
+    );
+    expect(snippet).toContain('"onSessionChange"');
+    expect(snippet).toContain("onStart: (span) => {");
+    expect(snippet).toContain(
+      'span.setAttribute("session.id", replaySessionId)',
+    );
+    expect(snippet).toContain("forceFlush: () => Promise.resolve()");
+    expect(snippet).toContain("shutdown: () => Promise.resolve()");
+
+    /* The old manual path: a mutated resource and a server-side header. */
+    expect(snippet).not.toContain("resource.attributes");
+    expect(snippet).not.toContain("baggage");
+    expect(snippet).not.toContain("session.tab.id");
+  });
+
+  /*
+   * Index.onSessionChange tells the listener the id as soon as a recorder
+   * exists - before consent under Require explicit, before an on-error
+   * trigger, even for an unsampled session - and the processor then stamps
+   * every browser span from the first page load. The docs warn about it;
+   * the snippet people actually copy has to as well.
+   */
+  it("the correlation snippet carries the consent caveat", () => {
+    const snippet: string = buildOnSessionChangeSnippet();
+    const commentText: string = snippet
+      .split("\n")
+      .filter((line: string): boolean => {
+        return line.startsWith("// ");
+      })
+      .map((line: string): string => {
+        return line.slice(3);
+      })
+      .join(" ");
+
+    expect(commentText).toContain(
+      "Fires as soon as the recorder starts - before consent or a trigger - so gate on your own consent state if that matters.",
+    );
+    /* A comment above the code, so it cannot change what the snippet does. */
+    expect(snippet.indexOf("gate on your own consent state")).toBeLessThan(
+      snippet.indexOf("let replaySessionId = null;"),
+    );
+    expect(snippet).toMatch(/^\/\/ Optional\./);
+  });
+
+  it("the correlation snippet queues the listener, so it works before the recorder loads", () => {
+    const snippet: string = buildOnSessionChangeSnippet();
+
+    expect(snippet).toContain(
+      "(window.OneUptimeReplayQueue = window.OneUptimeReplayQueue || []).push([",
+    );
+    /* No direct call on a global that may not exist yet. */
+    expect(snippet).not.toContain("OneUptimeReplay.onSessionChange(");
+  });
 });
 
 describe("SessionReplaySetupGuide (rendered)", () => {
@@ -406,13 +476,44 @@ describe("SessionReplaySetupGuide (rendered)", () => {
     expect(screen.getByTestId("setup-step-2")).toHaveTextContent(
       'data-oneuptime-app-identifier="acme-web"',
     );
-    /* Step 4 carries the correlation hook. */
+    /*
+     * Step 4: backend linking is automatic (issue #3979), the one manual
+     * step left is for an API on another origin, and the session hook is
+     * an optional extra for the page's own browser spans.
+     */
+    expect(screen.getByTestId("setup-correlation-automatic")).toHaveTextContent(
+      "Nothing to install",
+    );
+    expect(screen.getByTestId("setup-correlation-automatic")).toHaveTextContent(
+      "own origin",
+    );
+    expect(screen.getByTestId("setup-correlation-automatic")).toHaveTextContent(
+      "tracestate",
+    );
+    expect(
+      screen.getByTestId("setup-correlation-cross-origin"),
+    ).toHaveTextContent("Trace propagation origins");
+    expect(
+      screen.getByTestId("setup-correlation-cross-origin"),
+    ).toHaveTextContent("Access-Control-Allow-Headers");
+    expect(
+      screen.getByTestId("setup-correlation-cross-origin"),
+    ).toHaveTextContent("Same-origin trace propagation");
     expect(screen.getByTestId("setup-correlation-snippet")).toHaveTextContent(
-      "OneUptimeReplay.onSessionChange",
+      "onSessionChange",
     );
     expect(screen.getByTestId("setup-correlation-snippet")).toHaveTextContent(
-      'resource.attributes["session.id"]',
+      'span.setAttribute("session.id"',
     );
+    expect(
+      screen.getByTestId("setup-correlation-snippet"),
+    ).not.toHaveTextContent("resource.attributes");
+    /* Step 4 shows the optional snippet only, not the script tag again. */
+    expect(
+      screen.getByTestId("setup-correlation-snippet"),
+    ).not.toHaveTextContent("data-oneuptime-token");
+    expect(screen.getAllByTestId("install-snippet")).toHaveLength(1);
+    expect(screen.getByTestId("setup-step-4")).not.toHaveTextContent("baggage");
     /* Step 3 keeps 'self'. */
     expect(screen.getByTestId("setup-csp-snippet")).toHaveTextContent(
       "script-src 'self'",

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

@@ -0,0 +1,330 @@
+import "@testing-library/jest-dom";
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  within,
+} from "@testing-library/react";
+import * as React from "react";
+import { MemoryRouter } from "react-router-dom";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  jest,
+  test,
+} from "@jest/globals";
+import HTTPErrorResponse from "../../../Types/API/HTTPErrorResponse";
+import HTTPResponse from "../../../Types/API/HTTPResponse";
+import { JSONObject } from "../../../Types/JSON";
+import TimeRange from "../../../Types/Time/TimeRange";
+import getJestMockFunction, { MockFunction } from "../../MockType";
+
+/*
+ * The Session Replay Users table's (i) tooltips: Sessions, Last seen, Time
+ * and Signals explain themselves in their headers; User and Actions do not.
+ *
+ * Each (i) is hovered and must show its own text from
+ * RUM_REPLAY_USERS_METRIC_DESCRIPTIONS, it sits in the header - never in a
+ * row, whose click opens the person's sessions - and the cells under each
+ * header read the rollup fields the text describes.
+ */
+
+const postMock: MockFunction = getJestMockFunction();
+
+jest.mock("../../../UI/Utils/API/API", () => {
+  return {
+    __esModule: true,
+    default: {
+      post: (...args: Array<unknown>) => {
+        return postMock(...args);
+      },
+      getFriendlyMessage: (error: unknown): string => {
+        return error instanceof HTTPErrorResponse
+          ? error.message
+          : String(error);
+      },
+    },
+  };
+});
+
+jest.mock("../../../UI/Utils/ModelAPI/ModelAPI", () => {
+  return {
+    __esModule: true,
+    default: {
+      getCommonHeaders: (): Record<string, string> => {
+        return {};
+      },
+    },
+  };
+});
+
+import SessionReplayUsersTable from "../../../../App/FeatureSet/Dashboard/src/Components/SessionReplay/SessionReplayUsersTable";
+import {
+  RUM_REPLAY_USERS_METRIC_DESCRIPTIONS,
+  RumReplayUsersMetric,
+} from "../../../../App/FeatureSet/Dashboard/src/Components/MetricDescriptions/RumMetricDescriptions";
+import { expectReadableDescriptionRecord } from "../../App/Dashboard/MetricDescriptionRules";
+
+const APP_ID: string = "0193c0de-1111-4aaa-8bbb-000000000001";
+const USER_KEY: string =
+  "9f86d081884c7d659a2feaa0c55ad015a3bf4f1b2b0b822cd15d6c15b0f00a08";
+const HOUR_MS: number = 60 * 60 * 1000;
+// Every (i) is a button named "About <what it explains>".
+const INFO_BUTTON_NAME: RegExp = /^About /;
+
+function wireRollup(overrides?: JSONObject): JSONObject {
+  const now: number = Date.now();
+
+  return {
+    groupKey: `u:${USER_KEY}`,
+    kind: "identified",
+    identifiedUserKey: USER_KEY,
+    visitorId: "7f3a2b1c9d8e4f5a6b7c8d9e0f1a2b3c",
+    identifiedUserLabel: "jane@acme.com",
+    identifiedUserTraits: {},
+    sessionCount: 3,
+    liveSessionCount: 0,
+    firstSeenUnixMs: now - 5 * HOUR_MS,
+    lastSeenUnixMs: now - 2 * HOUR_MS,
+    totalDurationMs: 45 * 60 * 1000,
+    errorCount: 4,
+    frustrationCount: 2,
+    errorSessionCount: 1,
+    pageCount: 0,
+    lastSessionId: "a1b2c3d4e5f60718293a4b5c6d7e8f90",
+    lastEntryUrl: "https://app.acme.com/checkout",
+    browserName: "Chrome",
+    browserVersion: "126",
+    osName: "macOS",
+    deviceType: "desktop",
+    countryCode: "DE",
+    ...overrides,
+  };
+}
+
+async function flush(): Promise<void> {
+  for (let i: number = 0; i < 5; i++) {
+    await act(async () => {
+      await Promise.resolve();
+    });
+  }
+}
+
+async function renderTable(users: Array<JSONObject>): Promise<void> {
+  postMock.mockImplementation((): Promise<HTTPResponse<JSONObject>> => {
+    return Promise.resolve(
+      new HTTPResponse<JSONObject>(200, { users, nextCursor: null }, {}),
+    );
+  });
+
+  render(
+    <MemoryRouter>
+      <SessionReplayUsersTable
+        rumApplicationId={APP_ID}
+        timeRange={{ range: TimeRange.PAST_ONE_DAY }}
+        reloadToken={0}
+        onViewUserSessions={onViewUserSessions}
+      />
+    </MemoryRouter>,
+  );
+
+  await flush();
+}
+
+let onViewUserSessions: MockFunction = getJestMockFunction();
+
+function infoButton(title: string): HTMLElement {
+  const found: Array<HTMLElement> = screen.getAllByRole("button", {
+    name: `About ${title}`,
+  });
+  expect(found).toHaveLength(1);
+  return found[0]!;
+}
+
+function allInfoLabels(): Array<string> {
+  return screen
+    .queryAllByRole("button", { name: INFO_BUTTON_NAME })
+    .map((button: HTMLElement): string => {
+      return (button.getAttribute("aria-label") || "").replace("About ", "");
+    });
+}
+
+async function tooltipTextOf(button: HTMLElement): Promise<string> {
+  fireEvent.mouseEnter(button);
+  await act(async () => {
+    jest.advanceTimersByTime(200);
+  });
+
+  const describedBy: string | null = button.getAttribute("aria-describedby");
+  expect(describedBy).toBeTruthy();
+
+  const text: string =
+    document.getElementById(describedBy as string)?.textContent || "";
+
+  fireEvent.mouseLeave(button);
+
+  return text;
+}
+
+async function expectExplained(
+  title: string,
+  key: RumReplayUsersMetric,
+): Promise<void> {
+  const button: HTMLElement = infoButton(title);
+
+  expect(button.closest("thead")).not.toBeNull();
+  expect(button.parentElement?.closest("button, a")).toBeNull();
+  expect(await tooltipTextOf(button)).toBe(
+    RUM_REPLAY_USERS_METRIC_DESCRIPTIONS[key],
+  );
+}
+
+/* The row's cells, in column order: User, Sessions, Last seen, Time, Signals, Actions. */
+function rowCells(): Array<HTMLElement> {
+  const [row] = screen.getAllByTestId("session-user-row");
+
+  return Array.from(row!.querySelectorAll("td"));
+}
+
+beforeEach(() => {
+  jest.useFakeTimers();
+  postMock.mockReset();
+  onViewUserSessions = getJestMockFunction();
+});
+
+afterEach(() => {
+  cleanup();
+  jest.useRealTimers();
+});
+
+describe("the Session Replay Users descriptions", () => {
+  test("read as short, finished, distinct sentences", () => {
+    expectReadableDescriptionRecord(
+      RUM_REPLAY_USERS_METRIC_DESCRIPTIONS,
+      "RUM_REPLAY_USERS_METRIC_DESCRIPTIONS",
+    );
+  });
+});
+
+describe("SessionReplayUsersTable header tooltips", () => {
+  test("Sessions, Last seen, Time and Signals explain themselves; User and Actions do not", async () => {
+    await renderTable([wireRollup()]);
+
+    expect(screen.getAllByTestId("session-user-row")).toHaveLength(1);
+    expect(allInfoLabels()).toEqual([
+      "Sessions",
+      "Last seen",
+      "Time",
+      "Signals",
+    ]);
+
+    await expectExplained("Sessions", "sessions");
+    await expectExplained("Last seen", "lastSeen");
+    await expectExplained("Time", "time");
+    await expectExplained("Signals", "signals");
+  });
+
+  test("the headers carry their (i) even when the range is empty", async () => {
+    await renderTable([]);
+
+    expect(screen.getByTestId("session-users-empty")).toBeInTheDocument();
+    expect(allInfoLabels()).toEqual([
+      "Sessions",
+      "Last seen",
+      "Time",
+      "Signals",
+    ]);
+  });
+
+  test("clicking or pressing Enter on an (i) never opens a person's sessions", async () => {
+    await renderTable([wireRollup()]);
+
+    const info: HTMLElement = infoButton("Signals");
+
+    fireEvent.click(info);
+    fireEvent.keyDown(info, { key: "Enter" });
+
+    expect(onViewUserSessions).not.toHaveBeenCalled();
+
+    // The row itself still does.
+    fireEvent.click(screen.getByTestId("session-user-row"));
+
+    expect(onViewUserSessions).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe("SessionReplayUsersTable cells read what the header texts describe", () => {
+  test("Sessions shows the count, then live sessions or the earliest start in the range", async () => {
+    await renderTable([
+      wireRollup(),
+      wireRollup({
+        groupKey: "v:visitor-2",
+        kind: "visitor",
+        identifiedUserKey: "",
+        identifiedUserLabel: "",
+        visitorId: "visitor-2",
+        sessionCount: 2,
+        liveSessionCount: 1,
+      }),
+    ]);
+
+    const rows: Array<HTMLElement> = screen.getAllByTestId("session-user-row");
+    const [, firstSessions] = Array.from(rows[0]!.querySelectorAll("td"));
+    const [, secondSessions] = Array.from(rows[1]!.querySelectorAll("td"));
+
+    expect(firstSessions).toHaveTextContent("3");
+    // firstSeenUnixMs is the earliest session IN THE RANGE, five hours ago.
+    expect(firstSessions).toHaveTextContent("first seen 5 hours ago");
+    expect(secondSessions).toHaveTextContent("2");
+    expect(secondSessions).toHaveTextContent("1 live");
+    expect(RUM_REPLAY_USERS_METRIC_DESCRIPTIONS.sessions).toContain(
+      "not necessarily their first visit ever",
+    );
+  });
+
+  test("Last seen is the newest session's start, however long that session has run", async () => {
+    await renderTable([wireRollup()]);
+
+    const lastSeen: HTMLElement = within(rowCells()[2]!).getByTestId(
+      "session-user-last-seen",
+    );
+
+    expect(lastSeen).toHaveTextContent("2 hours ago");
+    expect(RUM_REPLAY_USERS_METRIC_DESCRIPTIONS.lastSeen).toContain(
+      "newest session in the selected range started",
+    );
+  });
+
+  test("Time adds the durations up; its page line is the route-change count, which can be 0", async () => {
+    await renderTable([wireRollup()]);
+
+    const time: HTMLElement = rowCells()[3]!;
+
+    expect(time).toHaveTextContent("45m");
+    /*
+     * pageCount is the recorder's route-change counter, so a person who
+     * only ever loaded pages in full reads "0 pages" - which is why the
+     * text says a page opened by a full load is not counted.
+     */
+    expect(time).toHaveTextContent("0 pages");
+    expect(RUM_REPLAY_USERS_METRIC_DESCRIPTIONS.time).toContain(
+      "a page opened by a full load is not counted",
+    );
+  });
+
+  test("Signals shows the summed error and frustration counts, with the error sessions on hover", async () => {
+    await renderTable([wireRollup()]);
+
+    const signals: HTMLElement = rowCells()[4]!;
+
+    expect(signals).toHaveTextContent("4 errors");
+    expect(signals).toHaveTextContent("2 frustration");
+    expect(
+      within(signals).getByText("4 errors").closest("[title]"),
+    ).toHaveAttribute("title", "in 1 session");
+  });
+});