You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
You can view your application's file structure and click on a snapshot to view
43
42
your app's state. State can be visualized in a Component Graph, JSON Tree, or
44
-
Performance Graph. Snapshots can be compared with the previous snapshot, which can
45
-
be viewed in Diff mode.
43
+
Performance Graph. Snapshot history can be visualized in the History tab.
44
+
The Web Metrics tab provides some useful metrics for site performance.
45
+
Snapshots can be compared with the previous snapshot, which can be viewed in Diff mode.
46
46
<br>
47
47
<br>
48
48
@@ -167,15 +167,17 @@ of the structure and interfaces of the codebase.
167
167
168
168
<h1>What's New!</h1>
169
169
170
-
Reactime 22.0 heralds significant enhancements, addressing core performance issues and fortifying the overall application's stability and reliability. In our pursuit of consistent evolution, we've updated outdated packages and transitioned state management to Redux Toolkit. This strategic shift not only modernizes our tech stack but also ensures our application is positioned for easier maintenance and scalability in the future. Complementing these upgrades, this release also mends various bugs. The debut of features like the reconnection button, a status icon, and the integration of key web metrics – Cumulative Layout Shift (CLS) and Interaction To Next Paint (INP) – amplifies its functionality and offers users a more refined experience.
170
+
Reactime 23.0 brings a new look to the UI, completely updates all outdated packages, and significantly improves stability by solving loading bugs.
171
171
172
172
<i>Taking a deeper look</i>
173
173
174
174
Addressing the persistent disconnection/black screen issues that occasionally affected users during regular application use, we made decisive improvements by removing the "keepAlive" function and implementing robust logic to fix the core issue. This enabled us to refine the communication protocol between our application and the Chrome extension API, delivering a more consistent and stable connection. To further enhance the user experience and foster resilience, we introduced a user-friendly reconnection feature. This not only offers users a swift recovery route but also acts as an added layer of protection against any unexpected disconnections in the future.
175
175
176
-
In an effort to improve maintainability, scalability, and longevity, we updated and phased out certain dependencies. To name a few, we moved away from the Immer library and transitioned our state management to use Redux Toolkit, while upgrading the Web Vitals API from version 1.1.2 to 3.5.0, allowing us to harness a broader range of web metrics. As part of this transition, we also converted all of the existing tests to work with the updated state management system, while further expanding testing suites to increase overall testing coverage. Lastly, we achieved a notable increase in TypeScript coverage, strengthening code quality and early detection of potential development issues.
176
+
UI
177
177
178
-
For an improved user experience, we set our sights on several impactful enhancements. First on our list is the reconnection feature, designed as a protective measure for those unexpected moments when a user gets disconnected. In such events, an intuitive pop-up dialog will instantly emerge, offering users a seamless way to dive right back into their session, while also offering the option to download recorded snapshots of state as a JSON file. Complementing this, we've integrated a dynamic status indicator that transparently displays a user's current app status, highlighting whether they're online or offline. But that's not all. We've enriched the application with two vital web performance metrics: Cumulative Layout Shift (CLS) and Interaction to Next Paint (INP). These metrics are pivotal, providing developers with insights into layout stability and responsiveness, empowering them to optimize user interactions with precision.
178
+
Dependencies
179
+
180
+
Loading stability
179
181
180
182
If you would like to read more about previous releases, click <ahref="https://github.com/open-source-labs/reactime/releases">here!</a>
181
183
@@ -211,14 +213,16 @@ locally.
211
213
212
214
<i>Please refer to Developer Install for a detailed guide:</i>
213
215
214
-
Refer [DEVELOPER README](src/README.md) for more info on the project, and
216
+
Refer to the [DEVELOPER README](src/DEVELOPER_README.md) for more info on the project, and
215
217
instructions on building from source.
216
218
217
219
### <b>How to Use</b>
218
220
219
221
After installing the Chrome extension, just open up your project in the browser.
220
222
221
-
Then open up your Chrome DevTools and navigate to the Reactime panel.
223
+
Then right click on your application and choose the 'Reactime' context menu item to open up a Reactime panel.
224
+
225
+
Alternatively, you can open up your Chrome DevTools and navigate to the Reactime panel.
222
226
223
227
## <b>Troubleshooting</b>
224
228
@@ -240,7 +244,7 @@ clicking the right mouse button “Reload frame”.
240
244
### ❓ <b>I found a bug in Reactime</b>
241
245
242
246
Reactime is an open-source project, and we'd love to hear from you about
243
-
improving the user experience. Please read [DEVELOPER README](src/README.md),
247
+
improving the user experience. Please read [DEVELOPER README](src/DEVELOPER_README.md),
244
248
and create a pull request (or issue) to propose and collaborate on changes to Reactime.
245
249
246
250
### ❓ <b>Node version compatibility</b>
@@ -351,6 +355,10 @@ Node v16.16.0, please use script 'npm run devlegacy' | 'npm run buildlegacy'
If ‘npm install –legacy-peer-deps’ doesn’t work, install dependencies using ‘npm install --force’
26
-
27
25
With release of Node v18.12.1 (LTS) on 11/4/22, the script has been updated to 'npm run dev' || 'npm run build' for backwards compatibility.<br/>
28
26
For version Node v16.16.0, please use script 'npm run devlegacy' || 'npm run buildlegacy'
29
27
@@ -56,6 +54,12 @@ _Before_ beginning development, especially on teams, make sure to configure your
56
54
57
55
Here are some notes on the current state of Reactime and considerations for future development.
58
56
57
+
## Repair Jest Testing Library
58
+
59
+
## Repair Diff Route
60
+
61
+
##
62
+
59
63
## Including Support for Hooks Beyond useState
60
64
61
65
Reactime currently shows data stored via useState, but does not show data stored via other hooks such as useContext or useReducer. While showing this data would be simple, maintaining the time travel functionality of Reactime with these hooks would not. _Please see file demo-app/src/client/Components/ButtonsWithMoreHooks.jsx for more details._
@@ -90,7 +94,7 @@ Can Reactime functionality be extended so applications using Redux can track sta
90
94
91
95
Yes, but it would be very time-consuming and not the most feasible option while Redux devtools exists already. With how Redux devtools is currently set up, a developer is unable to use Redux devtools as a third-party user and integrate its functionality into their own application, as Redux devtools is meant to be used directly on an application using Redux for state-tracking purposes. Since the devtools do not appear to have a public API for integrated use in an application or it simply does not exist, Redux devtools would need to be rebuilt from the ground up and then integrated into Reactime, or built into Reactime directly still from scratch.
92
96
93
-
## Main Slice Modularity
97
+
## Main Slice Modularity
94
98
95
99
Currently, Reactime employs Redux Toolkit for state management. At present, all actions are housed within the mainSlice.ts file. As this file has expanded significantly, it would be beneficial to modularize it, creating separate slices for distinct components.
96
100
@@ -106,12 +110,11 @@ In the _src_ folder, there are three directories we care about: _app_, _backend_
106
110
src/
107
111
├── app/ # Frontend code
108
112
│ ├── __tests__/ # React Testing Library
109
-
│ ├── actions/ # Redux action creators
110
113
│ ├── components/ # React components
111
-
│ ├── constants/ #
112
114
│ ├── containers/ # More React components
113
115
│ ├── slices/ # Redux Toolkit mechanism for updating state
114
116
│ ├── styles/ #
117
+
| ├── App.tsx
115
118
│ ├── FrontendTypes.ts # Library of typescript interfaces
116
119
│ ├── index.tsx # Starting point for root App component
117
120
│ ├── module.d.ts #
@@ -179,7 +182,7 @@ The general flow of data is described in the following steps:
179
182
180
183
1. When the background bundle is loaded by the browser, it executes a script injection into the dom. (see section on _backend_). This script uses a technique called [throttle](https://medium.com/@bitupon.211/debounce-and-throttle-160affa5457b) to send state data from the app to the content script every specified milliseconds (in our case, this interval is 70ms).
181
184
182
-
2. The content script (now contentScript.ts) always listens for messages being passed from the extension's target application. Upon receiving data from the target app, the content script will immediately forward this data to the background script which then updates an object called `tabsObj`. Each time `tabsObj` is updated, its latest version will be passed to Reactime, where it is processed for displaying to the user by the _app_ folder scripts.
185
+
2. The content script always listens for messages being passed from the extension's target application. Upon receiving data from the target app, the content script will immediately forward this data to the background script which then updates an object called `tabsObj`. Each time `tabsObj` is updated, its latest version will be passed to Reactime, where it is processed for displaying to the user by the _app_ folder scripts.
183
186
184
187
3. Likewise, when Reactime emits an action due to user interaction -- a "jump" request for example -- a message will be passed from Reactime via the background script to the content script. Then, the content script will pass a message to the target application containing a payload that represents the state the user wants the DOM to reflect or "jump" to.
185
188
- One important thing to note here is that this jump action must be dispatched in the target application (i.e. _backend_ land), because only there do we have direct access to the DOM.
@@ -262,8 +265,10 @@ Once you are ready for launch, follow these steps to simplify deployment to the
262
265
4. Update the Store Listing and that’s it! Click “Submit for review” and wait for the Chrome store to process your request
0 commit comments