@oneuptime/common 14.0.1 → 14.0.3

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

@@ -0,0 +1,447 @@
+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 { RecordingHealthStatus } from "../../../Types/Rum/SessionReplayHealth";
+import {
+  diagnoseRecordingHealth,
+  SESSION_REPLAY_RECORDER_ACTIVE_WINDOW_MS,
+  SESSION_REPLAY_REFUSAL_ALERT_THRESHOLD,
+  SESSION_REPLAY_STALE_CHUNK_MS,
+} from "../../../Utils/Rum/SessionReplayHealth";
+import getJestMockFunction, { MockFunction } from "../../MockType";
+
+/*
+ * The Replay Health page's (i) tooltips: the four pipeline stages, the two
+ * upload counters and the two byte meters. The policy and recorder panels
+ * list settings and versions, not measurements, and carry none; nor does
+ * the compact card on the Replay Policy page, which only shows the
+ * diagnosis.
+ *
+ * Each (i) is hovered and must show its own text from
+ * RUM_RECORDING_HEALTH_METRIC_DESCRIPTIONS. The thresholds the texts name
+ * (amber after 24 hours, after 6 hours, from 80%, "5 or more") are checked
+ * against what the page actually colours, on both sides of each line.
+ */
+
+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 {
+  PIPELINE_STAGE_TOOLTIPS,
+  RecordingHealthDashboardView,
+} from "../../../../App/FeatureSet/Dashboard/src/Components/SessionReplay/RecordingHealthDashboard";
+import { RecordingHealthSummaryView } from "../../../../App/FeatureSet/Dashboard/src/Components/SessionReplay/RecordingHealthCard";
+import { USAGE_WARNING_PERCENT } from "../../../../App/FeatureSet/Dashboard/src/Components/SessionReplay/RecordingHealthModel";
+import { SessionReplayHealthSnapshot } from "../../../../App/FeatureSet/Dashboard/src/Components/SessionReplay/useSessionReplayHealth";
+import {
+  RUM_RECORDING_HEALTH_METRIC_DESCRIPTIONS,
+  RumRecordingHealthMetric,
+} from "../../../../App/FeatureSet/Dashboard/src/Components/MetricDescriptions/RumMetricDescriptions";
+import { expectReadableDescriptionRecord } from "../../App/Dashboard/MetricDescriptionRules";
+
+const APP_ID: string = "0193c0de-1111-4aaa-8bbb-000000000001";
+const NOW: number = Date.parse("2026-09-05T10:00:00.000Z");
+const MINUTE_MS: number = 60 * 1000;
+const HOUR_MS: number = 60 * MINUTE_MS;
+const MB: number = 1024 * 1024;
+const GB: number = 1024 * MB;
+// Every (i) is a button named "About <what it explains>".
+const INFO_BUTTON_NAME: RegExp = /^About /;
+
+function iso(offsetMs: number): string {
+  return new Date(NOW - offsetMs).toISOString();
+}
+
+function makeStatus(
+  overrides?: Partial<RecordingHealthStatus>,
+): RecordingHealthStatus {
+  return {
+    appIdentifier: "acme-web",
+    allowedOrigins: ["https://app.acme.com"],
+    policy: {
+      isProjectEnabled: true,
+      isApplicationEnabled: true,
+      captureTrigger: "Always",
+      samplePercentage: 100,
+      consentMode: "NotRequired",
+      maskingMode: "MaskSensitiveInputsOnly",
+      retentionInDays: 7,
+    },
+    publishedRecorderVersion: "1.4.0",
+    lastConfigFetchAt: iso(12 * 1000),
+    lastChunkReceivedAt: iso(12 * 1000),
+    lastSessionStartedAt: iso(MINUTE_MS),
+    budgetExceededAt: null,
+    sessionsLast24h: 143,
+    playableSessionsLast24h: 120,
+    refusalsLast24h: [],
+    projectBytesUsedToday: 10 * MB,
+    dailyByteLimit: GB,
+    applicationBytesUsedThisMonth: 256 * MB,
+    monthlyBudgetInGB: 1,
+    ...overrides,
+  };
+}
+
+function makeSnapshot(
+  status: RecordingHealthStatus,
+  overrides?: Partial<SessionReplayHealthSnapshot>,
+): SessionReplayHealthSnapshot {
+  return {
+    status: status,
+    diagnosis: diagnoseRecordingHealth(status, NOW),
+    extras: {
+      dropsLast24h: [{ reason: "scrub-incomplete", count: 2 }],
+      recorderCapabilities: ["click-events"],
+    },
+    isLoading: false,
+    isRefreshing: false,
+    error: null,
+    fetchedAtUnixMs: NOW,
+    nowUnixMs: NOW,
+    ...overrides,
+  };
+}
+
+function renderView(status: RecordingHealthStatus = makeStatus()): void {
+  render(
+    <MemoryRouter>
+      <RecordingHealthDashboardView
+        rumApplicationId={APP_ID}
+        health={makeSnapshot(status)}
+      />
+    </MemoryRouter>,
+  );
+}
+
+function infoButton(label: string): HTMLElement {
+  const found: Array<HTMLElement> = screen.getAllByRole("button", {
+    name: `About ${label}`,
+  });
+  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(
+  label: string,
+  key: RumRecordingHealthMetric,
+): Promise<void> {
+  const button: HTMLElement = infoButton(label);
+
+  expect(button.parentElement?.closest("button, a")).toBeNull();
+  expect(await tooltipTextOf(button)).toBe(
+    RUM_RECORDING_HEALTH_METRIC_DESCRIPTIONS[key],
+  );
+}
+
+function tone(testId: string): string | null {
+  return screen.getByTestId(testId).getAttribute("data-tone");
+}
+
+beforeEach(() => {
+  jest.useFakeTimers();
+  postMock.mockReset();
+});
+
+afterEach(() => {
+  cleanup();
+  jest.useRealTimers();
+});
+
+describe("the Replay Health descriptions", () => {
+  test("read as short, finished, distinct sentences", () => {
+    expectReadableDescriptionRecord(
+      RUM_RECORDING_HEALTH_METRIC_DESCRIPTIONS,
+      "RUM_RECORDING_HEALTH_METRIC_DESCRIPTIONS",
+    );
+  });
+
+  test("every pipeline stage has its own text", () => {
+    expect(PIPELINE_STAGE_TOOLTIPS).toEqual({
+      recorder: RUM_RECORDING_HEALTH_METRIC_DESCRIPTIONS.recorderLoaded,
+      policy: RUM_RECORDING_HEALTH_METRIC_DESCRIPTIONS.recordingAllowed,
+      uploads: RUM_RECORDING_HEALTH_METRIC_DESCRIPTIONS.chunksReceived,
+      sessions: RUM_RECORDING_HEALTH_METRIC_DESCRIPTIONS.sessionsLast24h,
+    });
+  });
+});
+
+describe("Replay Health tooltips", () => {
+  test("the stages, counters and meters explain themselves; settings and versions do not", async () => {
+    renderView();
+
+    expect(allInfoLabels()).toEqual([
+      "Recorder loaded",
+      "Recording allowed",
+      "Chunks received",
+      "Sessions in 24h",
+      "Refused at the gate",
+      "Dropped after acceptance",
+      "Project bytes today",
+      "This application this month",
+    ]);
+
+    await expectExplained("Recorder loaded", "recorderLoaded");
+    await expectExplained("Recording allowed", "recordingAllowed");
+    await expectExplained("Chunks received", "chunksReceived");
+    await expectExplained("Sessions in 24h", "sessionsLast24h");
+    await expectExplained("Refused at the gate", "refusedAtGate");
+    await expectExplained("Dropped after acceptance", "droppedAfterAcceptance");
+    await expectExplained("Project bytes today", "projectBytesToday");
+    await expectExplained(
+      "This application this month",
+      "applicationBytesThisMonth",
+    );
+
+    expect(
+      within(screen.getByTestId("health-policy")).queryAllByRole("button", {
+        name: INFO_BUTTON_NAME,
+      }),
+    ).toHaveLength(0);
+    expect(
+      within(screen.getByTestId("health-recorder")).queryAllByRole("button", {
+        name: INFO_BUTTON_NAME,
+      }),
+    ).toHaveLength(0);
+  });
+
+  test("each (i) sits in its own stage, list or meter", () => {
+    renderView();
+
+    for (const key of ["recorder", "policy", "uploads", "sessions"]) {
+      const stage: HTMLElement = screen.getByTestId(`health-stage-${key}`);
+
+      expect(
+        within(stage).getByTestId(`health-stage-${key}-info`),
+      ).toBeInTheDocument();
+    }
+
+    for (const testId of [
+      "health-refusals",
+      "health-drops",
+      "health-meter-project-day",
+      "health-meter-app-month",
+    ]) {
+      expect(
+        within(screen.getByTestId(testId)).getByTestId(`${testId}-info`),
+      ).toBeInTheDocument();
+    }
+  });
+
+  test("an unknown counter keeps its (i): the explanation does not depend on the value", () => {
+    renderView(
+      makeStatus({
+        refusalsLast24h: null,
+        projectBytesUsedToday: null,
+        applicationBytesUsedThisMonth: null,
+        monthlyBudgetInGB: null,
+        sessionsLast24h: null,
+        playableSessionsLast24h: null,
+      }),
+    );
+
+    expect(allInfoLabels()).toHaveLength(8);
+  });
+
+  test("the policy page's summary card shows the diagnosis only, with no (i)", () => {
+    render(
+      <MemoryRouter>
+        <RecordingHealthSummaryView
+          rumApplicationId={APP_ID}
+          health={makeSnapshot(makeStatus())}
+        />
+      </MemoryRouter>,
+    );
+
+    expect(screen.getByTestId("health-card")).toBeInTheDocument();
+    expect(allInfoLabels()).toEqual([]);
+  });
+});
+
+describe("the thresholds the texts name are the ones the page colours by", () => {
+  test("Recorder loaded turns amber only past 24 hours", () => {
+    expect(SESSION_REPLAY_RECORDER_ACTIVE_WINDOW_MS).toBe(24 * HOUR_MS);
+    expect(RUM_RECORDING_HEALTH_METRIC_DESCRIPTIONS.recorderLoaded).toContain(
+      "Amber after 24 hours",
+    );
+
+    renderView(makeStatus({ lastConfigFetchAt: iso(23 * HOUR_MS) }));
+    expect(tone("health-stage-recorder")).toBe("ok");
+    cleanup();
+
+    renderView(
+      makeStatus({ lastConfigFetchAt: iso(24 * HOUR_MS + MINUTE_MS) }),
+    );
+    expect(tone("health-stage-recorder")).toBe("warning");
+  });
+
+  test("Chunks received turns amber only past 6 hours", () => {
+    expect(SESSION_REPLAY_STALE_CHUNK_MS).toBe(6 * HOUR_MS);
+    expect(RUM_RECORDING_HEALTH_METRIC_DESCRIPTIONS.chunksReceived).toContain(
+      "amber after 6 hours without one",
+    );
+
+    renderView(makeStatus({ lastChunkReceivedAt: iso(5 * HOUR_MS) }));
+    expect(tone("health-stage-uploads")).toBe("ok");
+    cleanup();
+
+    renderView(
+      makeStatus({ lastChunkReceivedAt: iso(6 * HOUR_MS + MINUTE_MS) }),
+    );
+    expect(tone("health-stage-uploads")).toBe("warning");
+  });
+
+  test("Chunks received shows every refused request once one reason reaches 5", () => {
+    expect(SESSION_REPLAY_REFUSAL_ALERT_THRESHOLD).toBe(5);
+    expect(RUM_RECORDING_HEALTH_METRIC_DESCRIPTIONS.chunksReceived).toContain(
+      "When one refusal reason has 5 or more below",
+    );
+
+    renderView(
+      makeStatus({
+        refusalsLast24h: [
+          { reason: "origin-not-allowed", count: 4 },
+          { reason: "not-sampled", count: 4 },
+        ],
+      }),
+    );
+    // Eight refusals, but no single reason reached the threshold.
+    expect(screen.getByTestId("health-stage-uploads-value")).toHaveTextContent(
+      "12s ago",
+    );
+    cleanup();
+
+    renderView(
+      makeStatus({
+        refusalsLast24h: [
+          { reason: "origin-not-allowed", count: 5 },
+          { reason: "not-sampled", count: 3 },
+        ],
+      }),
+    );
+    // The value is the total across reasons, not the top reason alone.
+    expect(screen.getByTestId("health-stage-uploads-value")).toHaveTextContent(
+      "8 refused",
+    );
+    expect(screen.getByTestId("health-refusals-total")).toHaveTextContent(
+      "8 total",
+    );
+  });
+
+  test("a byte meter turns amber from 80% and red at 100%", () => {
+    expect(USAGE_WARNING_PERCENT).toBe(80);
+    expect(
+      RUM_RECORDING_HEALTH_METRIC_DESCRIPTIONS.projectBytesToday,
+    ).toContain("amber from 80%");
+    expect(
+      RUM_RECORDING_HEALTH_METRIC_DESCRIPTIONS.applicationBytesThisMonth,
+    ).toContain("amber from 80%");
+
+    renderView(
+      makeStatus({
+        projectBytesUsedToday: Math.floor(GB * 0.79),
+        applicationBytesUsedThisMonth: Math.ceil(GB * 0.8),
+      }),
+    );
+    expect(tone("health-meter-project-day")).toBe("ok");
+    expect(tone("health-meter-app-month")).toBe("warning");
+    cleanup();
+
+    renderView(
+      makeStatus({
+        projectBytesUsedToday: GB,
+        applicationBytesUsedThisMonth: GB,
+      }),
+    );
+    expect(tone("health-meter-project-day")).toBe("error");
+    expect(tone("health-meter-app-month")).toBe("error");
+  });
+
+  /*
+   * Which sessions the server calls playable is pinned against its SQL in
+   * App/Tests/Dashboard/RumFlowsUsersHealthTooltipWiring.test.ts; here, the
+   * stage shows the two numbers the text talks about.
+   */
+  test("Sessions in 24h shows the count, with the playable figure beside it", () => {
+    expect(RUM_RECORDING_HEALTH_METRIC_DESCRIPTIONS.sessionsLast24h).toContain(
+      "sessions still recording count as playable",
+    );
+
+    renderView(makeStatus({ sessionsLast24h: 10, playableSessionsLast24h: 7 }));
+
+    expect(screen.getByTestId("health-stage-sessions-value")).toHaveTextContent(
+      "10",
+    );
+    expect(screen.getByTestId("health-stage-sessions")).toHaveTextContent(
+      "7 playable",
+    );
+  });
+});

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

@@ -8,6 +8,8 @@ import { act, fireEvent, render, screen, within } from "@testing-library/react";
 import * as React from "react";
 import { MemoryRouter } from "react-router-dom";
 import { describe, expect, it } from "@jest/globals";
+import fs from "fs";
+import path from "path";
 import { ExceptionGroupSummary } from "../../../../App/FeatureSet/Dashboard/src/Utils/ExceptionCorrelation";
 import getJestMockFunction, { MockFunction } from "../../MockType";
 import SessionReplayMaskingMode from "../../../Types/Rum/SessionReplayMaskingMode";
@@ -17,6 +19,9 @@ import {
 } from "../../../Types/Rum/SessionReplay";
 import ReplayCorrelationPanel, {
   getReplayDetailsExternalUrl,
+  REPLAY_HEADER_EXCEPTION_GROUP_CAP,
+  REPLAY_HEADER_FINAL_TRACE_ID_CAP,
+  REPLAY_HEADER_LIVE_TRACE_ID_CAP,
   ReplayCorrelationPanelProps,
   ReplaySessionDetails,
 } from "../../../../App/FeatureSet/Dashboard/src/Components/SessionReplay/ReplayCorrelationPanel";
@@ -207,11 +212,81 @@ describe("ReplayCorrelationPanel Session tab", () => {
     expect(
       screen.getByText(/Mobile traces and logs reach this rail/),
     ).toHaveTextContent("OneUptimeReplay.onSessionChange()");
+    /*
+     * Issue #3979 made web linking automatic; React Native did not change.
+     * Its SDK instruments no networking, so the manual hook stays, and the
+     * copy says why rather than borrowing the web's "automatic" claim.
+     */
+    expect(
+      screen.getByText(/Mobile traces and logs reach this rail/),
+    ).toHaveTextContent("adds nothing to your app's own requests");
+    expect(
+      screen.queryByTestId("details-correlation-web"),
+    ).not.toBeInTheDocument();
     expect(
       screen.queryByText(/recorder stamps session.id on its own network/),
     ).not.toBeInTheDocument();
   });
 
+  /*
+   * Issue #3979: a web recording links backend telemetry with no code -
+   * same-origin requests carry the session's trace context, ingest stamps
+   * spans, the rail joins logs and exceptions by trace id. The copy used
+   * to say every other signal "must add the same attribute" through
+   * onSessionChange; the hook is optional now.
+   */
+  it("tells a web recording that backend linking is automatic and the session hook optional", () => {
+    renderPanel();
+
+    const copy: HTMLElement = screen.getByTestId("details-correlation-web");
+
+    expect(copy).toHaveTextContent("own origin");
+    expect(copy).toHaveTextContent("stamped with its id at ingest");
+    expect(copy).toHaveTextContent("by trace id");
+    expect(copy).toHaveTextContent("no code needed");
+    expect(copy).toHaveTextContent("Trace propagation origins");
+    expect(copy).toHaveTextContent(
+      "OneUptimeReplay.onSessionChange() is optional",
+    );
+    expect(copy).not.toHaveTextContent("must add");
+    expect(copy).not.toHaveTextContent("Signals are matched using session.id");
+    expect(copy).not.toHaveTextContent(
+      /recorder stamps session.id on its own network/,
+    );
+    expect(
+      screen.queryByText(/Mobile traces and logs reach this rail/),
+    ).not.toBeInTheDocument();
+  });
+
+  /*
+   * Same-origin propagation is a per-application switch, off for anyone
+   * who followed the redirect/download fix. The copy used to state the
+   * automatic link unconditionally, so an operator with the switch off
+   * (or a session recorded with it off) was told something false and
+   * given no reason for an empty rail.
+   */
+  it("qualifies the automatic link on a web recording with the Same-origin trace propagation switch", () => {
+    renderPanel();
+
+    const copy: HTMLElement = screen.getByTestId("details-correlation-web");
+
+    expect(copy).toHaveTextContent(
+      "carry the session's trace context automatically, unless Same-origin trace propagation is turned off in the Replay Policy, so backend spans are stamped",
+    );
+    /* The switch is named the way the Replay Policy page titles it. */
+    expect(
+      within(copy).getByText("Same-origin trace propagation").tagName,
+    ).toBe("EM");
+  });
+
+  it("does not mention the web-only switch on a mobile recording", () => {
+    renderPanel({ details: makeDetails({ recorderKind: "rn-view-tree" }) });
+
+    expect(
+      screen.getByText(/Mobile traces and logs reach this rail/),
+    ).not.toHaveTextContent("Same-origin trace propagation");
+  });
+
   it("organizes metadata into named, semantic sections", () => {
     renderPanel();
 
@@ -701,6 +776,95 @@ describe("ReplayCorrelationPanel Session tab", () => {
     ).toBeInTheDocument();
   });
 
+  /*
+   * The copy under the lists said "capped at 50" long after the header
+   * kept 100 trace ids while live and 200 once finalized. The numbers are
+   * now named constants, pinned below against the server sources.
+   */
+  it("quotes the header caps that apply to a finalized session", () => {
+    renderPanel({
+      details: makeDetails({
+        isFinalized: true,
+        traceIds: ["4bf92f3577b34da6a3ce929d0e0e4736"],
+        exceptionFingerprints: ["fp-1"],
+      }),
+    });
+
+    const caps: HTMLElement = screen.getByTestId("details-correlation-caps");
+
+    expect(caps).toHaveTextContent(
+      "The session header keeps at most 200 trace IDs and 100 exception groups; the rail queries your telemetry directly, so it is not limited to these.",
+    );
+    expect(caps).not.toHaveTextContent("50");
+  });
+
+  it("quotes the live cap, and the final one, while the session is not finalized", () => {
+    renderPanel({
+      details: makeDetails({
+        isFinalized: false,
+        traceIds: ["4bf92f3577b34da6a3ce929d0e0e4736"],
+      }),
+    });
+
+    const caps: HTMLElement = screen.getByTestId("details-correlation-caps");
+
+    expect(caps).toHaveTextContent(
+      "While the session is live its header keeps at most 100 trace IDs (200 once it is finalized, with up to 100 exception groups)",
+    );
+    expect(caps).not.toHaveTextContent("capped at 50");
+  });
+
+  it("says nothing about caps when the header carries no ids", () => {
+    renderPanel({
+      details: makeDetails({ traceIds: [], exceptionFingerprints: [] }),
+    });
+
+    expect(
+      screen.queryByTestId("details-correlation-caps"),
+    ).not.toBeInTheDocument();
+  });
+
+  it("restates the caps the ingest and the finalizer actually enforce", () => {
+    const appRoot: string = path.resolve(__dirname, "../../../../App");
+    const ingest: string = fs.readFileSync(
+      path.join(
+        appRoot,
+        "FeatureSet/Telemetry/Services/SessionReplayIngestService.ts",
+      ),
+      "utf8",
+    );
+    const finalizer: string = fs.readFileSync(
+      path.join(appRoot, "FeatureSet/Workers/Jobs/Rum/FinalizeSessions.ts"),
+      "utf8",
+    );
+
+    const readConstant: (source: string, name: string) => number = (
+      source: string,
+      name: string,
+    ): number => {
+      const match: RegExpMatchArray | null = source.match(
+        new RegExp(`${name}: number = (\\d+);`),
+      );
+
+      expect([name, match !== null]).toEqual([name, true]);
+
+      return Number((match as RegExpMatchArray)[1]);
+    };
+
+    expect(readConstant(ingest, "PROVISIONAL_HEADER_MAX_TRACE_IDS")).toBe(
+      REPLAY_HEADER_LIVE_TRACE_ID_CAP,
+    );
+    expect(readConstant(finalizer, "MAX_TRACE_IDS_PER_SESSION")).toBe(
+      REPLAY_HEADER_FINAL_TRACE_ID_CAP,
+    );
+    expect(
+      readConstant(finalizer, "MAX_EXCEPTION_FINGERPRINTS_PER_SESSION"),
+    ).toBe(REPLAY_HEADER_EXCEPTION_GROUP_CAP);
+
+    /* The provisional header never carries exception groups at all. */
+    expect(ingest).toContain("exceptionFingerprints: [],");
+  });
+
   /*
    * correlation-7: the panel used to render the bare fingerprint hash and
    * link it to a filtered list. It resolves the groups in one lookup now,