Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use new React-specific DepGraph queries to improve React Component Stack display #10605

Merged
merged 4 commits into from
Jul 8, 2024

Conversation

markerikson
Copy link
Collaborator

This PR:

  • Updates ReplayClient.getDependences() to accept the new mode option from the backend protocol method
  • Reworks the DepGraph Panel component to extract the UI for formatting a DG response into its own component
  • Makes two separate DG queries when you click "Load Deps", one normal and one with the new "react" mode option, and displays both of those formatted
    • Reverses the item orders so that the timestamps are descending, call-stack style
  • Reworks the React Component Stack logic:
    • determines both the parent and the child component details
    • uses the React-specific DG result to determine the real ancestor chain, even if the parent component didn't render in this render pass (ie, "jump me back to when my parent last rendered me")
  • Updates the RCS display:
    • shows ParentComponent -> <ChildComponent> in the list, to be clear where we're jumping to (the parent, in the process of rendering the child)
    • shows the current component we're paused in so that we know where we are can get back to that point

image

Copy link

vercel bot commented Jul 8, 2024

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 Jul 8, 2024 8:43pm

Copy link

replay-io bot commented Jul 8, 2024

E2E Tests

Status Complete ↗︎
Commit be2d8c0
Results
109 Passed
  • async-stack: should detect async stacks outside the focus window
  • authenticated/comments-01: Test add, edit, and delete comment functionality
  • authenticated/comments-02: Test shared comments and replies (Replay 1, Replay 2)
  • authenticated/comments-03: Comment previews
  • authenticated/logpoints-01: Shared logpoints functionality (Replay 1, Replay 2)
  • authenticated/passport-01: Time travel
  • authenticated/passport-02: Infrared inspection
  • authenticated/passport-03: Swiss army knife
  • authenticated/passport-04: Multiplayer
  • 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-04: catch, finally, generators, and async/await
  • 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: 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
  • deleted-recording: Show error message for deleted recording
  • elements-search: Element panel should support basic and advanced search modes
  • fe-1875 :: verify that steps go to the right point in time
  • 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-computed-02: Complex 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-elements-05_search: element picker and iframe behavior
  • inspector-rules-01: Basic CSS rules should be viewed
  • inspector-rules-03: Shorthand CSS rules should be viewed
  • jump-to-code-01: Test basic jumping functionality
  • jump-to-code-02: Redux J2C functionality
  • logpoints-01: log-points appear in the correct order and allow time warping
  • logpoints-02: conditional log-points
  • 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
  • logpoints-12: should auto save when removing conditions
  • 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_dock: Should show the correct docking behavior for recordings without video
  • node_console-01: Basic node console behavior
  • node_console-02: uncaught exceptions should show up
  • node_control_flow: catch, finally, generators, and async/await
  • node_logpoint-01: Basic node logpoints
  • node_object_preview: Showing console objects in node
  • node_quick_open_modal-01: Test basic searching functionality
  • 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
  • object_preview-06: HTML elements
  • object_preview-07: inspect objects in the console while paused somewhere else
  • object_preview-08: should render ellipsis for collapsed objects with truncated properties
  • playwright-01: Basic Test Suites panel functionality
  • playwright-02: Test Step timeline behavior
  • playwright-03: Test Step interactions
  • playwright-04: Test Step buttons and menu item
  • playwright-05: Test DOM node previews on user action step hover
  • react_devtools-01: Basic RDT behavior
  • react_devtools-02: RDT integrations (Chromium)
  • react_devtools-03: process and display multiple React versions in page
  • react_devtools-04: Component selection is maintained when seeking to a new point
  • redux_devtools: Test Redux DevTools.
  • repaint-01: repaints the screen screen when stepping over code that modifies the DOM
  • repaint-02: repaints on hover
  • repaint-03: repaints on seek
  • repaint-04: prefers nearest (<=) paint when seeking between paints
  • repaint-05: prefers current time if pause creation failed outside of the focus window
  • repaint-06: repaints the screen screen when stepping over code that modifies the DOM
  • resizable-panels-01: Left side Toolbar and Video should be collapsible
  • restart-session: restart debugging session
  • scopes_rerender: Test that scopes are rerendered
  • session-destroyed: errors caused by session failure should bubble to the root
  • source-line-highlights: Test source line highlighting
  • 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: Test stepping in pretty-printed code
  • stepping-06: Test stepping in async frames and async call stacks
  • stepping-07: Test quick stepping using the keyboard
  • @markerikson markerikson merged commit ff53251 into experimental Jul 8, 2024
    21 of 23 checks passed
    @markerikson markerikson deleted the feature/PRO-738-more-depgraph-experiments branch July 8, 2024 20:49
    Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
    Labels
    None yet
    Projects
    None yet
    Development

    Successfully merging this pull request may close these issues.

    1 participant