@oneuptime/common 14.0.8 → 14.0.9

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

@@ -1,6 +1,7 @@
 import { describe, expect, it } from "@jest/globals";
 import {
   MAX_SESSION_REPLAY_CHUNKS_PER_READ,
+  MAX_SESSION_REPLAY_READ_BYTES,
   SessionReplayChunkManifestEntry,
 } from "../../../Types/Rum/SessionReplay";
 import { MAX_PREFETCH_PAGES_AHEAD } from "../../../../App/FeatureSet/Dashboard/src/Components/SessionReplay/ReplayPlaybackIntent";
@@ -184,6 +185,206 @@ function makeLoader(
 }
 
 describe("ChunkLoader frame decoding", () => {
+  /*
+   * github.com/OneUptime/oneuptime/issues/4119: the replay now loads the
+   * recorded page's images, so what the page itself says about referrers,
+   * relative addresses and tracking pixels has to be taken out before any
+   * Replayer builds from a chunk - decoding is the one place every chunk
+   * passes through, once.
+   */
+  it("hands over every chunk prepared for playback", () => {
+    const page: Array<unknown> = [
+      {
+        type: 4,
+        timestamp: 1,
+        data: {
+          href: "https://shop.example.com/checkout",
+          width: 1200,
+          height: 760,
+        },
+      },
+      {
+        type: 2,
+        timestamp: 2,
+        data: {
+          node: {
+            type: 0,
+            id: 1,
+            childNodes: [
+              {
+                type: 2,
+                id: 2,
+                tagName: "html",
+                attributes: {},
+                childNodes: [
+                  {
+                    type: 2,
+                    id: 3,
+                    tagName: "head",
+                    attributes: {},
+                    childNodes: [
+                      {
+                        type: 2,
+                        id: 4,
+                        tagName: "meta",
+                        attributes: { name: "referrer", content: "unsafe-url" },
+                        childNodes: [],
+                      },
+                    ],
+                  },
+                  {
+                    type: 2,
+                    id: 5,
+                    tagName: "body",
+                    attributes: {},
+                    childNodes: [
+                      {
+                        type: 2,
+                        id: 6,
+                        tagName: "img",
+                        attributes: {
+                          src: "https://cdn.shop.example.com/logo.png",
+                          referrerpolicy: "no-referrer-when-downgrade",
+                        },
+                        childNodes: [],
+                      },
+                      {
+                        type: 2,
+                        id: 7,
+                        tagName: "video",
+                        attributes: { poster: "/media/poster.jpg" },
+                        childNodes: [],
+                      },
+                      {
+                        type: 2,
+                        id: 8,
+                        tagName: "img",
+                        attributes: {
+                          width: "1",
+                          height: "1",
+                          src: "https://tracker.example/sale.png?order=1001",
+                        },
+                        childNodes: [],
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+          initialOffset: { top: 0, left: 0 },
+        },
+      },
+    ];
+
+    const frames: Array<{
+      chunkIndex: number;
+      events: Array<SessionReplayRecordedEvent>;
+    }> = ChunkLoader.decodeFrames(
+      encodeFrames([{ chunkIndex: 0, body: JSON.stringify(page) }]),
+    );
+    const decoded: string = JSON.stringify(frames[0]!.events);
+
+    expect(decoded).not.toContain("referrerpolicy");
+    expect(decoded).not.toContain('"name":"referrer"');
+    expect(decoded).toContain('"data-oneuptime-recorded-name":"referrer"');
+    expect(decoded).toContain(
+      '"poster":"https://shop.example.com/media/poster.jpg"',
+    );
+    expect(decoded).not.toContain("tracker.example/sale.png");
+    expect(decoded).toContain('"src":"https://cdn.shop.example.com/logo.png"');
+  });
+
+  it("resolves a relative poster in a chunk with no Meta of its own against the tab's page, across responses", async () => {
+    /*
+     * A Meta comes only with a full snapshot (a checkout a minute) while a
+     * chunk is cut every 15 seconds, so most chunks have no page address of
+     * their own. The loader keeps the last one it decoded for the tab.
+     */
+    const withMeta: string = JSON.stringify([
+      {
+        type: 4,
+        timestamp: 1,
+        data: {
+          href: "https://shop.example.com/checkout",
+          width: 1200,
+          height: 760,
+        },
+      },
+      {
+        type: 2,
+        timestamp: 2,
+        data: {
+          node: { type: 0, id: 1, childNodes: [] },
+          initialOffset: { top: 0, left: 0 },
+        },
+      },
+    ]);
+    const withoutMeta: string = JSON.stringify([
+      {
+        type: 3,
+        timestamp: 3,
+        data: {
+          source: 0,
+          texts: [],
+          attributes: [],
+          removes: [],
+          adds: [
+            {
+              parentId: 1,
+              nextId: null,
+              node: {
+                type: 2,
+                id: 9,
+                tagName: "video",
+                attributes: { poster: "/media/poster.jpg" },
+                childNodes: [],
+              },
+            },
+          ],
+        },
+      },
+    ]);
+    const fetcher: RecordingFetcher = makeFetcher({
+      payloadFor: (chunkIndex: number): string => {
+        return chunkIndex === 0 ? withMeta : withoutMeta;
+      },
+    });
+    /* A first chunk as big as a read, so each chunk is its own response. */
+    const loader: ChunkLoader = makeLoader(
+      [
+        makeEntry(0, {
+          hasFullSnapshot: true,
+          payloadBytes: MAX_SESSION_REPLAY_READ_BYTES,
+        }),
+        makeEntry(1),
+      ],
+      fetcher,
+    );
+
+    await loader.loadPage(0);
+    await loader.loadPage(1);
+
+    expect(fetcher.requests).toEqual([[0], [1]]);
+    expect(JSON.stringify(loader.getDecodedChunk(1))).toContain(
+      '"poster":"https://shop.example.com/media/poster.jpg"',
+    );
+
+    /* A loader that never saw a Meta drops it rather than guess. */
+    const alone: ChunkLoader = makeLoader(
+      [makeEntry(1)],
+      makeFetcher({
+        payloadFor: (): string => {
+          return withoutMeta;
+        },
+      }),
+    );
+
+    await alone.loadPage(1);
+
+    expect(JSON.stringify(alone.getDecodedChunk(1))).not.toContain("poster");
+  });
+
   it("decodes concatenated frames in wire order", () => {
     const buffer: ArrayBuffer = encodeFrames([
       { chunkIndex: 3, body: bodyFor(3) },

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

@@ -207,3 +207,57 @@ describe("getSealedReasonCopy", () => {
     expect(unknown.severity).toBe("info");
   });
 });
+
+/*
+ * github.com/OneUptime/oneuptime/issues/4119: playback loads a stylesheet
+ * the recorder could not read, and the page's web fonts, from their
+ * original addresses. The notes must not go on promising an unstyled
+ * replay or a system font as though the player never fetched them, and
+ * the fix they offer must not break the customer's own page.
+ */
+describe("fidelity copy for assets playback loads from their original address", () => {
+  it("says an unreadable stylesheet is loaded from where it lives, and how to have it recorded", () => {
+    const copy: FidelityNoticeCopy = getFidelityNoticeCopy(
+      SessionReplayFidelityNotice.StylesheetInaccessible,
+    );
+
+    expect(copy.description).toContain(
+      "playback loads it from its original address instead",
+    );
+    expect(copy.description).toContain(
+      "If that address does not load in your browser",
+    );
+    /*
+     * crossorigin alone makes the customer's own page refuse the sheet;
+     * it only works together with the server's CORS header.
+     */
+    expect(copy.description).toContain("Access-Control-Allow-Origin");
+    expect(copy.description).toContain('crossorigin="anonymous"');
+  });
+
+  it("says web fonts load when their server allows other sites, and only otherwise fall back", () => {
+    const copy: FidelityNoticeCopy = getFidelityNoticeCopy(
+      SessionReplayFidelityNotice.FontsOmitted,
+    );
+
+    expect(copy.description).toContain(
+      "playback loads them from their original addresses",
+    );
+    /* A masked replay refuses remote fonts (REPLAY_MASKED_DOCUMENT_CSP). */
+    expect(copy.description).toContain(
+      "a recording made under Mask all text loads none",
+    );
+    expect(copy.description).toContain("Access-Control-Allow-Origin");
+    expect(copy.description).toContain("otherwise text falls back");
+    expect(copy.description).not.toContain("playback uses a system font stack");
+  });
+
+  it("does not promise video or audio a labelled placeholder that nothing draws", () => {
+    const copy: FidelityNoticeCopy = getFidelityNoticeCopy(
+      SessionReplayFidelityNotice.MediaNotReplayable,
+    );
+
+    expect(copy.description).not.toContain("labelled placeholder");
+    expect(copy.description).toContain("do not play in the replay");
+  });
+});

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

@@ -1178,6 +1178,78 @@ describe("ReplayCorrelationPanel Fidelity tab", () => {
     expect(section).toHaveTextContent("app.css");
   });
 
+  /*
+   * github.com/OneUptime/oneuptime/issues/4119: the player now feeds this
+   * list with the recorded images and stylesheets that did not load in the
+   * viewer's browser, and a viewer looking at one needs to know why and
+   * what the site's owner can change.
+   */
+  it("says the missing assets did not load in this browser, and links to why", () => {
+    renderPanel({
+      activeTabId: "fidelity",
+      missingAssets: ["https://wbdynprod.powerappsportals.com/logo.png"],
+    });
+
+    const section: HTMLElement = screen.getByTestId(
+      "details-section-missing-assets",
+    );
+
+    expect(section).toHaveTextContent("did not load in your browser");
+
+    /*
+     * Found by the words on screen (WCAG 2.5.3, label in name): a voice
+     * control user says what they see, and an aria-label with other words
+     * would leave them nothing to say.
+     */
+    const docs: HTMLElement = within(section).getByRole("link", {
+      name: /^Why they go missing, and how to allow them \(opens in a new tab\)$/,
+    });
+
+    expect(docs).toHaveAttribute(
+      "data-testid",
+      "replay-details-missing-assets-docs",
+    );
+    expect(docs).not.toHaveAttribute("aria-label");
+    expect(docs.getAttribute("href")).toMatch(
+      /\/rum\/session-replay-troubleshooting#images-icons-or-styles-are-missing-in-the-replay$/,
+    );
+    expect(docs).toHaveAttribute("target", "_blank");
+    expect(docs).toHaveAttribute("rel", "noopener noreferrer");
+    expect(
+      screen.queryByTestId("replay-details-missing-assets-truncated"),
+    ).not.toBeInTheDocument();
+  });
+
+  it("says when more failed than the list holds", () => {
+    renderPanel({
+      activeTabId: "fidelity",
+      missingAssets: [
+        "https://h0.flood.example/x.png",
+        "https://h1.flood.example/x.png",
+      ],
+      areMissingAssetsTruncated: true,
+    });
+
+    expect(
+      screen.getByTestId("replay-details-missing-assets-truncated"),
+    ).toHaveTextContent("More failed than this; only the first 2 are listed.");
+  });
+
+  it("counts missing assets on the Fidelity tab with the gaps and notices", () => {
+    renderPanel({
+      activeTabId: "session",
+      fidelityNotices: [SessionReplayFidelityNotice.StylesheetInaccessible],
+      missingAssets: [
+        "https://content.powerapps.com/img/web.png",
+        "https://content.powerapps.com/img/close.png",
+      ],
+    });
+
+    expect(
+      within(screen.getByRole("tab", { name: /^Fidelity/ })).getByText("3"),
+    ).toBeInTheDocument();
+  });
+
   it("explains why the recording ended from the sealed reason", () => {
     renderPanel({
       activeTabId: "fidelity",