[DRAFT] Initial Redux DevTools integration POC #6601

markerikson · 2022-04-29T20:32:59Z

This PR:

Adds a dependency on the @redux-devtools/app package, which has the prebuilt Redux DevTools UI components and logic
Adds a new "Redux" panel to the toolbox pane
Renders the RDT UI
Actually manages to feed in actual Redux actions received via annotations from the backend
Actually manages to use timeline updates to reset the list of actions and feed in just the ones that were dispatched up to that point in time
Uses next-global-css to work around Next throwing errors due to the RDT <Editor> component importing CSS from within node_modules

Status

Totally a draft POC and absolutely not ready to ship in any way :)

At the moment, looks like a bunch of the supporting code I copy-pasted from the RDT "extension app" codebase is not compiling because it's missing other pieces. Not surprising! I will fix that stuff up on Monday so this at least builds clean.

Things that this needs for minimum productionization:

Consideration of how we actually want to handle annotations between React and Redux integration
The Redux panel should likely only import the RDT UI (and it should be lazy-loaded, too) if we actually have Redux-related annotations. (Possibly the same for the React panel later?). There's a bunch of bundle size here, and we shouldn't pay that if it's not relevant.
For that matter, showing the "Redux" panel should also be an experimental setting
The current "tie displayed actions to the timeline progress" technique is hacky. But it does seem to work!
The RDT UI theme should be controlled by Replay's own theme selection
The RDT logic has a bunch of "feature" settings. We should probably turn off a bunch of options, at least for now. (Like, "skip" doesn't make sense atm.)
Probably need to correctly handle "instances" - there can be many "stores" connected to the DevTools in one page
Should test this against other frameworks that use the RDT, like Zustand, Jotai, and NgRx
Should test this with some really large or frequent actions. (Like, say.... Replay itself! :) )

This is also entirely dependent on the FF content script changes sitting over in replayio/gecko-dev#831 - you've got to use an FF build with those to make the recording, which also means you can't even try this PR out because our prod backend doesn't recognize this FF build! We may need to just go merge in those changes and release a new FF build first to unblock the chicken/egg issue here.

Preview

Since you can't actually see or try this out atm, here's a Loom showing it off:

https://www.loom.com/share/738c236b13cf41fb902335d30c085edb

vercel · 2022-04-29T20:33:01Z

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

Name	Status	Preview	Updated
devtools	✅ Ready (Inspect)	Visit Preview	May 4, 2022 at 3:43PM (UTC)

The @redux-devtools/ui `<Editor>` component imports CSS directly, so Next is erroring. I've temporarily hand-edited my code locally, but this is just a hack workaround that needs to be fixed. On the bright side... rendering this component shows the whole Redux DevTools UI immediately! So that's great.

qa-wolf · 2022-05-02T17:13:55Z

Previously, all annotations were fetched in `actions/reactDevTools`. We can only have one `ThreadFront.getAnnotations()` call, as `socket.ts` throws errors if you try to add another subscription. That logic was kicked off from `devtools.ts` as part of the initial setup sequence. But, that meant that annotations were coming in even before the rest of the React component tree mounts. Our React annotations are kept in the Redux store (hah!), but since Redux actions data can be _very_ large, we don't want to keep those in our own app's Redux store. The simplest option is adding a context provider component whose sole job is to keep the Redux annotations in state. To make things more complicated, the entire "DevTools" panel will unmount if you switch over to the "Viewer" tab. So, we can't just store Redux annotations down low in the component tree. After discussion with Brian Vaughn, I've addressed these issues by refactoring how we handle annotations: - There is now a `<ReduxAnnotationsProvider>` component that is rendered in the `<Body>` component and wrapped around both panels - That component is responsible for running the `getAnnotations()` subscription request. Since React's "Strict Effects" can cause effects to run twice in dev, we have to use a ref flag to make sure it only runs once. - It still dispatches all the React-specific annotations to the Redux store, same as before. - But, Redux-specific annotations are pre-processed to be in the form that we need, added to its own state, and passed down via a React context provider. Additionally, I've done some "productionization" of how the Redux DevTools tab gets loaded: - `<SecondaryToolbox>` reads the annotations list and only show the "Redux" tab if there are Redux annotations available - The `<ReduxDevToolsPanel>` component lazy-imports the actual `@redux-devtools/app` lib, so that we don't pay that bundle cost up front - The "reload actions into the DevTools store" code uses `batch()` to both minimize re-renders and avoid a data inconsistency crash that I was seeing

markerikson · 2022-05-03T00:26:32Z

src/ui/actions/reactDevTools.ts

-  return async dispatch => {
-    dispatch({ type: "set_protocol_fail" });
-  };
+export function setProtocolCheckFailed(): SetProtocolCheckFailedAction {


💬 This action creator really didn't need to be a thunk anyway, since it's just dispatching a single basic action.

markerikson · 2022-05-03T00:53:13Z

Status update:

We've published a Firefox build that should capture Redux data. Unfortunately, it doesn't seem to be doing that :( We're going to have to investigate further.
I've updated this PR to do a few of the "productionization" items:
- The "Redux" tab only shows up if there are Redux annotations loaded into the client
- The @redux-devtools/app package is lazy-imported on demand when you switch over to that tab for the first time
I've run this against a Jotai CodeSandbox, and confirmed that A) this does work with other non-Redux packages, and B) it does work okay with multiple "instances" in one page:

First instance - a single Jotai "count" atom:

Second instance - a "combined atoms" view:

markerikson · 2022-05-03T17:28:16Z

I've updated this to keep the RDT theme in sync with the Replay app theme. Also tried passing down some flags to mark all of the RDT "features" as disabled, in the hopes that its UI would turn off buttons like "Jump" and "Skip", but doesn't seem to be doing what I want.

That said, I think this is basically working at a v1 level at this point.

Caveats:

I have not tried it with a larger-scale recording with many actions, ie, a recording of Replay itself
We don't yet know why the latest browser build does not appear to be capturing Redux actions as annotations properly, and this PR is kinda useless until we get that figured out

jasonLaster

🚀

replay-soc2 bot approved these changes Apr 29, 2022

View reviewed changes

markerikson marked this pull request as draft April 29, 2022 20:33

markerikson force-pushed the feature/6583-redux-devtools-ui branch from c42fd07 to 194b4ab Compare April 29, 2022 21:09

vercel bot had a problem deploying to Preview April 29, 2022 21:11 Failure

markerikson added 10 commits May 2, 2022 11:19

Add @redux-devtools/app + styled-components

1a7bf90

Add empty "Redux" panel to toolbox tabs

569c8df

Hack together an initial prototype of feeding data into Redux DT

cc8e93d

Handle multiple received Redux annotations over time

e3708f0

Hack together showing only actions up to the current pause point

747e07c

Add next-global-css

6225fc6

Ignore Next build errors from packages importing CSS

d1a9d45

Clean up some dead code in Redux DevTools POC

26c8205

Clean up unused copy-pasted Redux DevTools types

0a7117c

markerikson force-pushed the feature/6583-redux-devtools-ui branch from 194b4ab to 0a7117c Compare May 2, 2022 17:09

vercel bot deployed to Preview May 2, 2022 17:13 View deployment

Fix lint warnings

f041e40

vercel bot deployed to Preview May 2, 2022 17:21 View deployment

markerikson commented May 3, 2022

View reviewed changes

vercel bot deployed to Preview May 3, 2022 00:27 View deployment

vercel bot had a problem deploying to Preview May 3, 2022 16:09 Failure

Add local setting to toggle Redux DevTools feature

c60fbdc

markerikson force-pushed the feature/6583-redux-devtools-ui branch from 2aa9552 to c60fbdc Compare May 3, 2022 16:15

vercel bot deployed to Preview May 3, 2022 16:18 View deployment

markerikson added 2 commits May 3, 2022 12:50

Force Redux DevTools theme to stay in sync with Replay app theme

53597e3

Try marking RDT features as "disabled", since Replay won't use them

45afdf0

vercel bot deployed to Preview May 3, 2022 17:12 View deployment

markerikson marked this pull request as ready for review May 3, 2022 17:23

jasonLaster approved these changes May 3, 2022

View reviewed changes

Merge branch 'master' into feature/6583-redux-devtools-ui

e6d20c7

jasonLaster merged commit ac248bd into master May 4, 2022

vercel bot deployed to Preview May 4, 2022 15:43 View deployment

jcmorrow deleted the feature/6583-redux-devtools-ui branch June 8, 2022 06:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[DRAFT] Initial Redux DevTools integration POC #6601

[DRAFT] Initial Redux DevTools integration POC #6601

Uh oh!

markerikson commented Apr 29, 2022 •

edited

Loading

Uh oh!

vercel bot commented Apr 29, 2022 •

edited

Loading

Uh oh!

qa-wolf bot commented May 2, 2022 •

edited

Loading

Uh oh!

markerikson May 3, 2022

Uh oh!

markerikson commented May 3, 2022

Uh oh!

markerikson commented May 3, 2022

Uh oh!

jasonLaster left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

[DRAFT] Initial Redux DevTools integration POC #6601

[DRAFT] Initial Redux DevTools integration POC #6601

Uh oh!

Conversation

markerikson commented Apr 29, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Status

Preview

Uh oh!

vercel bot commented Apr 29, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

qa-wolf bot commented May 2, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ QA Wolf - Deploy PR

Uh oh!

markerikson May 3, 2022

Choose a reason for hiding this comment

Uh oh!

markerikson commented May 3, 2022

Uh oh!

markerikson commented May 3, 2022

Uh oh!

jasonLaster left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

markerikson commented Apr 29, 2022 •

edited

Loading

vercel bot commented Apr 29, 2022 •

edited

Loading

qa-wolf bot commented May 2, 2022 •

edited

Loading