Merge remote-tracking branch 'origin/main' into PRO-655

docs/codebase-notes/replay-preferences-implementations.md

@@ -134,7 +134,6 @@
 export type ExperimentalUserSettings = {
   apiKeys: ApiKey[];
   defaultWorkspaceId: null | string;
-  disableLogRocket: boolean;
   enableTeams: boolean;
   enableLargeText: boolean;
 };
@@ -164,7 +163,6 @@ export type CombinedExperimentalUserSettings = ExperimentalUserSettings &
 
 - `ui/actions/session.ts`: `disableCache`,  `listenForMetrics`
 - `ui/components/DevTools.tsx`: `sidePanelSize`
-- `ui/components/Redacted.tsx`: `showRedactions`
 - `ui/components/SkeletonLoader.tsx`: `sidePanelSize`
 - `ui/components/Viewer.tsx`: `secondaryPanelHeight`,  `sidePanelSize`,  `toolboxSize`
 - `ui/hooks/settings.ts`: all,  passed as key to `useStringPref` and `useBoolPref`

packages/e2e-tests/helpers/pause-information-panel.ts

@@ -243,6 +243,21 @@ export async function stepOver(page: Page): Promise<void> {
   await clickCommandBarButton(page, "Step Over");
 }
 
+export function waitForAllFramesToLoad(page: Page) {
+  return waitFor(async () => {
+    expect(await page.locator('[data-test-name="FramesLoading"]').count()).toBe(0);
+  });
+}
+
+export function getAsyncParentCount(page: Page) {
+  return page.locator('[data-test-name="AsyncParentLabel"]').count();
+}
+
+export async function isAsyncParentUnavailable(page: Page) {
+  const asyncParentUnavailable = page.locator('[data-test-name="AsyncParentUnavailable"]');
+  return (await asyncParentUnavailable.count()) > 0;
+}
+
 export async function verifyFramesCount(page: Page, expectedCount: number) {
   const framesPanel = getFramesPanel(page);
   return waitFor(async () => {

packages/e2e-tests/helpers/source-panel.ts

@@ -442,6 +442,35 @@ export async function getSelectedLineNumber(
   return parseInt(textContent, 10);
 }
 
+export async function verifyJumpToCodeResults(
+  page: Page,
+  filename: string,
+  lineNumber: number,
+  expectedHits?: { current: number; total: number }
+) {
+  await waitForSelectedSource(page, filename);
+  // Should highlight the line that ran
+  await waitFor(async () => {
+    const lineNumber = await getSelectedLineNumber(page, true);
+    expect(lineNumber).toBe(lineNumber);
+  });
+
+  if (expectedHits) {
+    // Should also have jumped in time. Since this can vary (slightly different progress %
+    // based on timing differences), we'll add a log statement and verify _which_ hit we're at.
+    await addLogpoint(page, {
+      url: filename,
+      lineNumber,
+    });
+
+    const { current, total } = expectedHits;
+
+    // Should have paused on the handler for the first valid keystroke
+    await verifyLogpointStep(page, `${current}/${total}`, { url: filename, lineNumber });
+    await removeLogPoint(page, { url: filename, lineNumber });
+  }
+}
+
 export function getSourceLocator(page: Page, sourceId: string): Locator {
   return page.locator(getSourceSelector(sourceId));
 }

packages/e2e-tests/tests/async-stack.test.ts

@@ -0,0 +1,34 @@
+import { openDevToolsTab, startTest } from "../helpers";
+import { warpToMessage } from "../helpers/console-panel";
+import {
+  getAsyncParentCount,
+  isAsyncParentUnavailable,
+  waitForAllFramesToLoad,
+} from "../helpers/pause-information-panel";
+import { setFocusRange } from "../helpers/timeline";
+import test, { expect } from "../testFixture";
+
+test.use({ exampleKey: "doc_async_stack.html" });
+
+test(`async-stack: should detect async stacks outside the focus window`, async ({
+  pageWithMeta: { page, recordingId, testScope },
+  exampleKey,
+}) => {
+  await startTest(page, recordingId, testScope);
+  await openDevToolsTab(page);
+
+  await warpToMessage(page, "Starting", 7);
+  await waitForAllFramesToLoad(page);
+  expect(await getAsyncParentCount(page)).toBe(0);
+  expect(await isAsyncParentUnavailable(page)).toBe(false);
+
+  await warpToMessage(page, "ExampleFinished", 9);
+  await waitForAllFramesToLoad(page);
+  expect(await getAsyncParentCount(page)).toBe(1);
+  expect(await isAsyncParentUnavailable(page)).toBe(false);
+
+  await setFocusRange(page, { startTimeString: "00:01" });
+  await waitForAllFramesToLoad(page);
+  expect(await getAsyncParentCount(page)).toBe(1);
+  expect(await isAsyncParentUnavailable(page)).toBe(true);
+});

packages/e2e-tests/tests/jump-to-code-01_basic.test.ts

@@ -10,6 +10,7 @@ import { openSourceExplorerPanel } from "../helpers/source-explorer-panel";
 import {
   addLogpoint,
   getSelectedLineNumber,
+  verifyJumpToCodeResults,
   verifyLogpointStep,
   waitForSelectedSource,
 } from "../helpers/source-panel";
@@ -71,7 +72,7 @@ test(`jump-to-code-01: Test basic jumping functionality`, async ({
   const queryParams = new URLSearchParams();
   // Force this test to always re-run the Event Listeners (and other) routines
   // See pref names in packages/shared/user-data/GraphQL/config.ts
-  // queryParams.set("features", "backend_rerunRoutines");
+  queryParams.set("features", "backend_rerunRoutines");
 
   await startTest(page, recordingId, testScope, undefined, queryParams);
   await openDevToolsTab(page);
@@ -140,22 +141,11 @@ test(`jump-to-code-01: Test basic jumping functionality`, async ({
 
   debugPrint(page, "Checking that the first keypress J2C jumps to the correct line");
   await firstValidKeypressJumpButton.click();
-  await waitForSelectedSource(page, "Header.tsx");
-  // Should highlight the line that ran
-  await waitFor(async () => {
-    const lineNumber = await getSelectedLineNumber(page, true);
-    expect(lineNumber).toBe(12);
-  });
 
+  // Should have paused on the handler for the first valid keystroke.
   // Should also have jumped in time. Since this can vary (slightly different progress %
   // based on timing differences), we'll add a log statement and verify _which_ hit we're at.
-  await addLogpoint(page, {
-    url: "Header.tsx",
-    lineNumber: 12,
-  });
-
-  // Should have paused on the handler for the first valid keystroke
-  await verifyLogpointStep(page, "1/22", { url: "Header.tsx", lineNumber: 12 });
+  await verifyJumpToCodeResults(page, "Header.tsx", 12, { current: 1, total: 22 });
 
   // the next clicks were on real buttons, so there is a handler
   debugPrint(page, "Checking for an enabled click 'Jump' button");
@@ -164,24 +154,6 @@ test(`jump-to-code-01: Test basic jumping functionality`, async ({
 
   debugPrint(page, "Checking that the first click J2C jumps to the correct line");
   await firstValidClickJumpButton.click();
-  await waitForSelectedSource(page, "TodoListItem.tsx");
-  // Should highlight the line that ran
-  await waitFor(async () => {
-    const lineNumber = await getSelectedLineNumber(page, true);
-    expect(lineNumber).toBe(22);
-  });
 
-  // Should also have jumped in time
-  // Should also have jumped in time. Since this can vary (slightly different progress %
-  // based on timing differences), we'll add a log statement and verify _which_ hit we're at.
-  await addLogpoint(page, {
-    url: "TodoListItem.tsx",
-    lineNumber: 22,
-  });
-
-  // Should have paused on the handler for the first valid click
-  await verifyLogpointStep(page, "1/2", {
-    url: "TodoListItem.tsx",
-    lineNumber: 22,
-  });
+  await verifyJumpToCodeResults(page, "TodoListItem.tsx", 22, { current: 1, total: 2 });
 });

packages/e2e-tests/tests/jump-to-code-02_redux-j2c.test.ts

@@ -0,0 +1,97 @@
+import { Locator, Page, expect } from "@playwright/test";
+
+import { openDevToolsTab, startTest } from "../helpers";
+import { getEventJumpButton } from "../helpers/info-event-panel";
+import { getReduxActions, openReduxDevtoolsPanel } from "../helpers/redux-devtools-panel";
+import { closeSource, verifyJumpToCodeResults } from "../helpers/source-panel";
+import { getByTestName, waitFor } from "../helpers/utils";
+import test from "../testFixture";
+
+// trunk-ignore(gitleaks/generic-api-key)
+test.use({ exampleKey: "breakpoints-01" });
+
+async function checkForJumpButton(actionListItem: Locator, shouldBeEnabled: boolean) {
+  const jumpButton = getEventJumpButton(actionListItem);
+  expect(await jumpButton.isVisible()).toBe(true);
+  await jumpButton.hover();
+
+  await waitFor(async () => {
+    const buttonText = await getByTestName(jumpButton, "JumpToCodeButtonLabel").innerText();
+    const expectedText = shouldBeEnabled ? "Jump to code" : "No results";
+    expect(buttonText).toBe(expectedText);
+  });
+
+  return jumpButton;
+}
+
+async function clickReduxActionJumpButton(page: Page, actionListItem: Locator) {
+  await actionListItem.scrollIntoViewIfNeeded();
+  await actionListItem.hover();
+  const jumpButton = await checkForJumpButton(actionListItem, true);
+  await jumpButton.click();
+}
+
+async function jumpToReduxDispatch(page: Page, actionType: string, index = 0) {
+  const reduxListItemsLocator = getReduxActions(page);
+  const reduxSearchInput = page.locator("#redux-searchbox");
+
+  await reduxSearchInput.fill(actionType);
+  const actionListItem = reduxListItemsLocator.filter({ hasText: actionType }).nth(index);
+  await clickReduxActionJumpButton(page, actionListItem);
+}
+
+test(`jump-to-code-02: Redux J2C functionality`, async ({
+  pageWithMeta: { page, recordingId, testScope },
+  exampleKey,
+}) => {
+  await startTest(page, recordingId, testScope);
+  await openDevToolsTab(page);
+
+  await openReduxDevtoolsPanel(page);
+
+  const reduxListItemsLocator = getReduxActions(page);
+
+  await waitFor(async () => {
+    const numListItems = await reduxListItemsLocator.count();
+    expect(numListItems).toBeGreaterThan(0);
+  });
+
+  // Inside of a thunk
+  await jumpToReduxDispatch(page, "app/setRecordingId");
+  await verifyJumpToCodeResults(page, "session.ts", 170, { current: 1, total: 1 });
+  await closeSource(page, "session.ts");
+
+  // Inside of the same thunk, after several awaits
+  await jumpToReduxDispatch(page, "app/setRecordingTarget");
+  await verifyJumpToCodeResults(page, "session.ts", 363, { current: 1, total: 1 });
+  await closeSource(page, "session.ts");
+
+  // Inside of one of the bootstrapping functions that receives the store
+  // should be "debugger/src/client/index.ts"
+  await jumpToReduxDispatch(page, "sources/allSourcesReceived");
+  await verifyJumpToCodeResults(page, "index.ts", 13, { current: 1, total: 1 });
+  await closeSource(page, "index.ts");
+
+  // Inside of an RTK listener middleware effect
+  jumpToReduxDispatch(page, "tabs/tabsRestored");
+  await verifyJumpToCodeResults(page, "newSources.ts", 43, { current: 1, total: 1 });
+  await closeSource(page, "newSources.ts");
+
+  // Inside of a `useEffect`
+  jumpToReduxDispatch(page, "set_selected_primary_panel");
+  await verifyJumpToCodeResults(page, "SidePanel.tsx", 57, { current: 1, total: 1 });
+  await closeSource(page, "SidePanel.tsx");
+
+  // Inside of a `connect()`ed class component, with `this.props.setExpandedState()`.
+  // Note that this appears to be one or two execution ticks off, so the line hit won't
+  // line up perfectly, but it should still _display_ as "1/4"
+  jumpToReduxDispatch(page, "SET_EXPANDED_STATE");
+  await verifyJumpToCodeResults(page, "SourcesTree.tsx", 196, { current: 1, total: 4 });
+  await closeSource(page, "SourcesTree.tsx");
+
+  // Inside of an adapter that passes dispatch-wrapped actions to <QuickOpenModal>
+  // This is also one tick off, but should still _display_ as "1/3"
+  jumpToReduxDispatch(page, "quickOpen/setQuickOpenQuery");
+  await verifyJumpToCodeResults(page, "QuickOpenModal.tsx", 551, { current: 1, total: 3 });
+  await closeSource(page, "QuickOpenModal.tsx");
+});

packages/e2e-tests/tests/react_devtools-02-integrations.test.ts

@@ -32,10 +32,7 @@ test("react_devtools-02: RDT integrations (Chromium)", async ({
 
   await openDevToolsTab(page);
 
-  await warpToMessage(
-    page,
-    "Waiting for breakpoint at doc_rr_basic_chromium.html:21 (waitForBreakpoint)"
-  );
+  await warpToMessage(page, "Waiting for breakpoint at doc_rr_basic.html:21 (waitForBreakpoint)");
 
   // If the "React" tab shows up, we know that the routine ran
   await openReactDevtoolsPanel(page);
@@ -79,14 +76,14 @@ test("react_devtools-02: RDT integrations (Chromium)", async ({
     "SystemProvider",
     "Head",
     "SideEffect",
-    "Auth0Provider",
-    "Auth0Provider",
+    // Tough transpiled variable, apparently: `export var ApolloProvider = function (_a) {`
+    "c",
+    "ApolloContext.Consumer",
+    "ApolloContext.Provider",
+    "ConfirmProvider",
     "Context.Provider",
-    "Context.Consumer",
-    "SSRRecordingPage",
-    "RecordingHead",
-    "Head",
-    "SideEffect",
+    "Routing",
+    "Provider",
   ];
 
   debugPrint(page, "Checking list of rewritten component names");
@@ -143,7 +140,7 @@ test("react_devtools-02: RDT integrations (Chromium)", async ({
   await searchComponents(page, "Anonymous"); // Search and select 1st result
   await verifySearchResults(page, {
     currentNumber: 1,
-    totalNumber: 15,
+    totalNumber: 16,
   });
 
   await componentSearchInput.focus();
@@ -152,7 +149,7 @@ test("react_devtools-02: RDT integrations (Chromium)", async ({
   await componentSearchInput.press("Enter");
   await verifySearchResults(page, {
     currentNumber: 4,
-    totalNumber: 15,
+    totalNumber: 16,
   });
 
   await viewSourceButton.click();
@@ -161,7 +158,7 @@ test("react_devtools-02: RDT integrations (Chromium)", async ({
   await waitForSelectedSource(page, "SourcesTreeItem.tsx");
   await waitFor(async () => {
     const lineNumber = await getSelectedLineNumber(page, false);
-    expect(lineNumber).toBe(133);
+    expect(lineNumber).toBe(132);
   });
 
   list.evaluate(el => (el.scrollTop = 0));

packages/replay-next/components/AvatarImage.tsx

@@ -47,7 +47,6 @@ export default function AvatarImage({ className, name, src, title, ...rest }: Pr
       <img
         {...rest}
         className={`${styles.Image} ${className}`}
-        data-private
         onError={onError}
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}

packages/replay-next/components/SyntaxHighlighter/SyntaxHighlighter.tsx

@@ -39,7 +39,7 @@ export const SyntaxHighlighter = memo(function SyntaxHighlighter({
   );
 
   return (
-    <div className={`${styles.SyntaxHighlighter} ${className}`} title={code} {...rest} data-private>
+    <div className={`${styles.SyntaxHighlighter} ${className}`} title={code} {...rest}>
       {formattedTokens.map((tokens, index) =>
         lineRenderer({
           className: lineClassName,