Rewrite "React Queued Renders" panel for better perf, and make clear it's experimental #9775

markerikson · 2023-09-28T16:05:49Z

This PR:

supersedes the original work in Analyze React+Redux perf timings using recording analysis #9410
- splits the changes in that PR into two halves. The <ReactPanel> changes are in this PR. The <ReactReduxPerfPanel> changes will go in a follow-up stacked PR.
Scaffolds a new packages/replay-experimental folder by configuring TS and import sorting
Rewrites the existing <ReactPanel> to improve loading perf and rendering behavior:
- Rewrites the API calls to use getPointStack instead of getAllFrames for faster stack trace data
- Adds logic to format point stack frames with source information
- Adds Suspense interval caches for hits to React internal methods like scheduleUpdateOnFiber
- Uses a virtualized list to render the list items
Improves the existing logic for formatting function details:
- Fully switches to using the sourcesById cache instead of Redux sources state
- Handles formatting anonymous functions by looking at the parent function name if available (common with Redux thunks)
- Copies support for formatting methods in classes such as render() from the backend routines logic
Moves both the <ReactPanel> component and all associated Suspense caches over to replay-experimental, to clarify that this logic is not production-ready yet

Future Work

There's a lot of things I've proved that I can do that are not in the current version of this PR:

Counting how many function components and class components rendered in a given render pass
Showing list items for React render commits in the React panel (ie, alternating calls to queue a render vs commits)
Showing the red "you are here" line in the list

vercel · 2023-09-28T16:05:54Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
devtools	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 12, 2023 9:08pm

replay-io · 2023-09-28T16:11:11Z

E2E Tests

85 replays were recorded for 9a60782.

0 Failed

85 Passed

View test run on Replay ↗︎

Snapshot Tests

100 replays were recorded for 9a60782.

0 Failed

100 Passed

View test run on Replay ↗︎

bvaughn · 2023-09-28T16:33:18Z

packages/replay-next/src/suspense/SourcesCache.ts

@@ -187,6 +188,18 @@ export const sourcesByIdCache = createSingleEntryCache<
  },
 });

+export const sourcesByPartialUrlCache: Cache<


Kind of a nit: This cache feels a bit unnecessary. Seems like we could useMemo or in some other way cache the result of this filter action without adding a whole new cache for it. We're really only using it to look for a single file anyway (react-dom).

It's being used for react-dom, but the call is inside of a couple different caches, and I've got a spot in the follow-up PR that I just noticed ought to be using this for Redux files as well.

bvaughn · 2023-09-28T16:34:55Z

src/ui/actions/eventListeners/eventListenerUtils.ts

-  updateMappedLocation(sources, functionLocation);
-
-  const location = getPreferredLocation(sourcesState, functionLocation);
+  // const { functionLocation } = fnPreview;


Suggested change

// const { functionLocation } = fnPreview;

bvaughn · 2023-09-28T16:36:45Z

packages/replay-experimental/src/components/ReactPanel.tsx

+import { useAppDispatch, useAppSelector } from "ui/setup/hooks";
+
+import cardsListStyles from "ui/components/Comments/CommentCardsList.module.css";
+import styles from "ui/components/Events/Event.module.css";


Seems pretty fragile for this component to import styles from other packages. We don't have TypeScript checking us there so it seems we're likely to "break" the React styles by changes made in these other CSS files.

Yep. This was me trying to get something that looked passably decent, as quickly as possible (and an example of why I was saying we could start extracting some reusable components or styles).

I think we should copy/fork the styles for now.

bvaughn · 2023-09-28T16:37:03Z

src/ui/components/ReactReduxPanels.module.css

+  flex-direction: column;
+  padding: 0;
+  overflow: auto;
+}


Can we delete this file? Seems like nothing is referencing it.

It gets used in the follow-on PR - got accidentally included here as I was trying to split up the code.

Kill it from this PR?

src/ui/suspense/frameCache.ts

packages/replay-experimental/src/suspense/reactInternalsCaches.ts

src/ui/suspense/frameCache.ts

- Fixed duplicate state update entries - Removed unused-in-this-PR CSS file - Copied needed styles to a new file - Added fetching of function details to each frame

replay-delta · 2023-10-12T20:45:27Z

1 snapshot changes from primary branch

markerikson requested review from bvaughn, jasonLaster and hbenl September 28, 2023 16:05

replay-soc2 bot approved these changes Sep 28, 2023

View reviewed changes

markerikson changed the title ~~Rewrite "React Queued Renders" panel and make clear it's experimental~~ Rewrite "React Queued Renders" panel for better perf, and make clear it's experimental Sep 28, 2023

markerikson force-pushed the feature/FE-1631-react-perf-panel branch from ad43bc2 to 6b6a8ec Compare September 28, 2023 16:07

vercel bot had a problem deploying to Preview September 28, 2023 16:09 Failure

markerikson force-pushed the feature/FE-1631-react-perf-panel branch from 6b6a8ec to 1fc9fd8 Compare September 28, 2023 16:13

vercel bot deployed to Preview September 28, 2023 16:18 View deployment

markerikson mentioned this pull request Sep 28, 2023

Add a Redux dispatch perf analysis panel #9776

Closed

bvaughn reviewed Sep 28, 2023

View reviewed changes

vercel bot deployed to Preview September 28, 2023 18:04 View deployment

bvaughn reviewed Sep 29, 2023

View reviewed changes

src/ui/suspense/frameCache.ts Outdated Show resolved Hide resolved

packages/replay-experimental/src/suspense/reactInternalsCaches.ts Show resolved Hide resolved

src/ui/suspense/frameCache.ts Outdated Show resolved Hide resolved

markerikson added 10 commits October 12, 2023 15:02

Scaffold replay-experimental folder

270744e

Genericize function formatting logic and add classes support

35659ef

Add logic to format point stack frames with source data

f60471d

Rewrite React renders panel with better caches and virtual list

fecc830

Move ReactPanel to replay-experimental

418f131

Address PR review issues

177b2d3

- Fixed duplicate state update entries - Removed unused-in-this-PR CSS file - Copied needed styles to a new file - Added fetching of function details to each frame

Consolidate point stack logic

3aef77d

Handle another CommandError in focus interval cache

c7533d6

Don't render React panel as offscreen

e2fc372

Fetch all render point stacks in parallel

5bafddf

markerikson force-pushed the feature/FE-1631-react-perf-panel branch from 4201898 to 5bafddf Compare October 12, 2023 20:15

vercel bot deployed to Preview October 12, 2023 20:19 View deployment

vercel bot deployed to Preview October 12, 2023 20:40 View deployment

markerikson force-pushed the feature/FE-1631-react-perf-panel branch from a2e31a6 to e94541d Compare October 12, 2023 20:50

vercel bot deployed to Preview October 12, 2023 20:53 View deployment

Simplify getByTestName

9a60782

markerikson force-pushed the feature/FE-1631-react-perf-panel branch from e94541d to 9a60782 Compare October 12, 2023 21:05

vercel bot deployed to Preview October 12, 2023 21:08 View deployment

markerikson merged commit f914678 into main Oct 12, 2023
34 of 35 checks passed

markerikson deleted the feature/FE-1631-react-perf-panel branch October 12, 2023 21:21

markerikson mentioned this pull request Oct 12, 2023

Analyze React+Redux perf timings using recording analysis #9410

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Rewrite "React Queued Renders" panel for better perf, and make clear it's experimental #9775

Rewrite "React Queued Renders" panel for better perf, and make clear it's experimental #9775

markerikson commented Sep 28, 2023 •

edited

Loading

vercel bot commented Sep 28, 2023 •

edited

Loading

replay-io bot commented Sep 28, 2023 •

edited

Loading

bvaughn Sep 28, 2023

markerikson Sep 28, 2023

bvaughn Sep 28, 2023

bvaughn Sep 28, 2023

markerikson Sep 28, 2023

bvaughn Sep 28, 2023

bvaughn Sep 28, 2023

markerikson Sep 28, 2023

bvaughn Sep 28, 2023

replay-delta bot commented Oct 12, 2023 •

edited

Loading

Rewrite "React Queued Renders" panel for better perf, and make clear it's experimental #9775

Rewrite "React Queued Renders" panel for better perf, and make clear it's experimental #9775

Conversation

markerikson commented Sep 28, 2023 • edited Loading

Future Work

vercel bot commented Sep 28, 2023 • edited Loading

replay-io bot commented Sep 28, 2023 • edited Loading

E2E Tests

Snapshot Tests

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

replay-delta bot commented Oct 12, 2023 • edited Loading

markerikson commented Sep 28, 2023 •

edited

Loading

vercel bot commented Sep 28, 2023 •

edited

Loading

replay-io bot commented Sep 28, 2023 •

edited

Loading

replay-delta bot commented Oct 12, 2023 •

edited

Loading