Add a Redux dispatch perf analysis panel

[markerikson]

This PR:

• Is stacked on top of Rewrite "React Queued Renders" panel for better perf, and make clear it's experimental #9775 , and also supersedes Analyze React+Redux perf timings using recording analysis #9410
• Adds a new "Redux Dispatch Perf" experimental panel and associated logic
  • Adds caches that find the location of the Redux dispatch method and calls to dispatch. (This heavily overlaps with the existing Redux DevTools panel, but works even if there are no annotations or Redux DevTools integration. It does rely on sourcemaps having a node_modules/redux/redux.js-type file available)
  • Adds caches that fetch hits for specific lines of code within the Redux dispatch method, and uses those to calculate durations for the reducer execution and subscriber notifications
  • Renders a virtual list of Redux dispatch entries
  • Allows selecting a dispatch entry and showing further details in a bottom panel
• The details panel shows:
  • timing breakdowns for the dispatch
  • estimates for how many components we think were queued to re-render by the dispatch, based on calls to scheduleUpdateOnFiber during the subscriber notifications
  • Tries to find a React render that occurred right after the dispatch, and if found, estimates its duration

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:

• Finding all Redux selectors used in an app
• Counting how many selectors got called during a set of subscriber notifications, and calculating their durations
• Showing the red "you are here" line in the list

[vercel]

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:42pm

[replay-io]

E2E Tests

85 replays were recorded for beafee8.

0 Failed

85 Passed

• authenticated/test-suites/library-test-runs
• authenticated/test-suites/library-tests-list
• breakpoints-01: Test basic breakpoint functionality
• breakpoints-02: Test unhandled divergence while evaluating at a breakpoint
• breakpoints-03: Test stepping forward through breakpoints when rewound before the first one
• breakpoints-05: Test interaction of breakpoints with debugger statements
• breakpoints-06: Test log point in a sourcemapped file
• breakpoints-07: rewind and seek using command bar and console messages
• breakpoints-08: should be temporarily disabled
• console_async: support console evaluations in async frames
• console_dock_node: Should show the correct docking behavior for recordings without video
• console_dock: Should show the correct docking behavior for recordings with video
• console_errors: Test that errors and warnings from various sources are shown in the console
• console_eval: support console evaluations
• console_warp-01: should support warping to console messages
• console_warp-02: support pausing, warping, stepping and evaluating console messages
• console-expressions-01: should cache input eager eval and terminal expressions per instance
• cypress-01: Basic Test Suites panel functionality
• cypress-02: Test Step timeline behavior
• cypress-03: Test Step interactions
• cypress-04: Test Step buttons and menu item
• cypress-05: Test DOM node preview on user action step hover
• file-search-01: should search files
• focus_mode-01: should filter messages as regions based on the active focus mode
• highlighter: element highlighter works everywhere
• inspector-computed-01: Basic computed styles can be viewed
• inspector-elements-01: Basic DOM tree node display
• inspector-elements-02_node-picker: element picker and iframe behavior
• inspector-elements-03: Nested node picker and selection behavior
• inspector-elements-04: Keyboard shortcuts should select the right DOM nodes
• inspector-rules-01: Basic CSS rules should be viewed
• inspector-rules-02: Sourcemapped rules should be viewed
• inspector-rules-03: Shorthand CSS rules should be viewed
• jump-to-code-01: Test basic jumping functionality
• logpoints-01: log-points appear in the correct order and allow time warping
• logpoints-02: conditional log-points
• logpoints-03_chromium: should display event properties in the console
• logpoints-03: should display event properties in the console
• logpoints-04: should display exceptions in the console
• logpoints-05: should auto-complete based on log point location
• logpoints-06: should be temporarily disabled
• logpoints-07: should use the correct scope in auto-complete
• logpoints-08: should support jumping directly to a hit point via the capsule input
• logpoints-09: should support pending edits
• logpoints-10: too-many-points-to-find UX
• logpoints-11: too-many-points-to-run-analysis UX
• network-01: should filter requests by type and text
• network-02: should show details for the selected request
• network-03: should sync and display the current time in relation to the network requests
• node_console-01: Basic node console behavior
• node_console-02: uncaught exceptions should show up
• node_logpoint-01: Basic node logpoints
• node_logpoint-02: Node exception logpoints
• node_object_preview: Showing console objects in node
• node_spawn: Basic subprocess spawning
• node_stepping-01: Test stepping in async frames and async call stacks
• node_worker-01: make sure node workers don't cause crashes
• object_preview-01: expressions in the console after time warping
• object_preview-02: should allow objects in scope to be inspected
• object_preview-03: Test previews when switching between frames and stepping
• object_preview-04: Test scope mapping and switching between generated/original sources
• object_preview-05: Should support logging objects as values
• playwright-01: Basic Test Suites panel functionality
• playwright-02: Test Step timeline behavior
• playwright-03: Test Step interactions
• quick_open_modal-01: Test basic searching functionality
• react_devtools 01: Basic RDT behavior (Chromium)
• react_devtools 01: Basic RDT behavior (FF)
• react_devtools 02: RDT integrations (Chromium)
• react_devtools 03: process and display multiple React versions in page
• redux_devtools: Test Redux DevTools.
• fe-1875 :: verify that steps go to the right point in time
• repaint: repaints the screen screen when stepping over code that modifies the DOM
• resizable-panels-01: Left side Toolbar should be collapsible
• restart debugging session
• scopes_rerender: Test that scopes are rerendered
• sourcemap_stacktrace: Test that stacktraces are sourcemapped
• stacking: Element highlighter selects the correct element when they overlap
• stepping-01: Test basic step-over/back functionality
• stepping-02: Test fixes for some simple stepping bugs
• stepping-03: Stepping past the beginning or end of a frame should act like a step-out
• stepping-04: Test stepping in a frame other than the top frame
• stepping-05_chromium: Test stepping in pretty-printed code
• stepping-05: Test stepping in pretty-printed code
• stepping-06: Test stepping in async frames and async call stacks

View test run on Replay ↗︎

Snapshot Tests

100 replays were recorded for beafee8.

0 Failed

100 Passed

• should add true/false keywords to the list of suggestions
• should add this keyword to the list of suggestions
• should be able to toggle side filter menu open and closed
• should be filterable on complex content
• should be filterable
• should be searchable on complex content
• should be searchable
• should display list of messages
• should display toggleable stack for errors
• should display toggleable stack for exceptions
• should display toggleable stack for traces
• should display toggleable stack for warnings
• should escape object expressions in terminal expressions
• should evaluate terminal expressions at an execution point
• should evaluate terminal expressions without an execution point
• should expand and inspect arrays
• should expand and inspect objects
• should hide node_modules (and unpkg) if toggled
• should log events in the console
• should not allow submitting an invalid terminal expression
• should re-focus the search input when CMD+F is used again
• should re-focus the terminal input when search input is hidden
• should refine string tokens to avoid unnecessarily escaping quotation marks
• should remember filter toggle preferences between reloads
• should show a button to clear terminal expressions
• should show error object stacks by default
• should show the context menu on top of other messages and the current time indicator
• should suggest type-ahead options from prototype objects as well
• should support seeking to a message execution point
• should support setting focus range via the context menu
• should support terminal expressions with line breaks
• should render nested, recursive values (as ellipses) without crashing
• should copy arrays
• should copy dates
• should copy deep arrays
• should copy deep objects and their nested properties
• should copy errors
• should copy functions
• should copy html elements and text
• should copy maps
• should copy objects
• should copy primitive client values
• should copy regular expressions
• should copy sets
• should properly bucket properties for an overflowing array
• should render and inspect a Promise
• should render and inspect a Proxy
• should render and inspect arrays
• should render and inspect functions
• should render and inspect HTML elements
• should render and inspect maps
• should render and inspect objects
• should render and inspect regular expressions
• should render and inspect sets
• should render dates
• should render errors
• should render getters and setters correctly
• should render simple values
• should render sections correctly
• should show/hide object and array previews when toggled
• scroll position should be restored when switching between sources
• should allow log point badge colors to be toggled
• should auto-suggestion text based on the current expression
• should disable syntax highlight for long lines
• should expand and contract line height when log points are added and removed
• should gracefully handle invalid remote analysis
• should handle too many points to find
• should handle too many points to run analysis
• should hide results when search is closed, and remember previous search string if re-opened
• should include log points in search results
• should include log points when filtering data
• should not allow saving log points with invalid conditional
• should not allow saving log points with invalid content
• should not erase break point when logging is toggled
• should not erase log point content when breaking is toggled
• should overflow long log point text (without wrapping)
• should remember search results count per source
• should render search results properly for lines with multiple breakable column positions
• should run local analysis for log points
• should run remote analysis for log points
• should scroll to line and column
• should show different background color and edit icon when log point disabled
• should show preview popup for instance properties
• should support break points
• should support conditional log points
• should support continue to next and previous functionality
• should support custom badge styles for log points
• should support fuzzy file search
• should support jumping to a line in the active source file
• should support new lines in log points
• should support text search in the active source file
• should update the current time when the next/previous log point buttons are clicked
• should render headers for complex data correctly
• should render primitive data correctly
• display an overflow message
• should expand and collapse sources
• should find matches in multiple sources
• should include or exclude external modules as requested
• should open a source and scroll to the correct line
• should reset collapsed state if search changes

View test run on Replay ↗︎

[bvaughn]

My personal vote is that we should not land this feature.

1. The list data is very close to the existing Redux panel. I don't think it makes sense to add a new, separate section for it.
2. I don't think the information in the details pane is very useful in its current format. (I know you say it's useful for you Mark, but I don't think it's useful to a wide enough % of our users– and I think the bar for shipping something should be that it's useful for many/most Replay users.)

Given that it's essentially all new code, I think we should just keep it in a fork.

[markerikson]

FWIW I'm not tied to the specific UI location or implementation - most of this was just copy-pasting the setup and layout logic from the "React Render" panel because they're both experimental and it was the easiest way to get something on screen.

I still absolutely think there is value in this info, but I can understand the argument that not enough people would care about it for now.

[replay-delta]

2 snapshot changes from primary branch

[markerikson]

Okay, I've rebased this on top of main as of landing #9775 . The preview branch is here:

https://devtools-git-feature-fe-1631-redux-perf-panel-recordreplay.vercel.app/

I'll go ahead and close this.