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
@@ -85,7 +85,18 @@ Download the recorded snapshots as a JSON file and upload them to access state t
85
85
<br>
86
86
87
87
<palign="center">
88
-
<imgsrc="./assets/gifs/importExport_v21.gif" />
88
+
<imgsrc="./assets/gifs/importExport_v22.gif" />
89
+
</p>
90
+
<br>
91
+
92
+
### 🔹 Reconnect and Status
93
+
94
+
If Reactime loses its connection to the tab you're monitoring, simply click the "reconnect" button to resume your work. You'll notice a circle located to the right of the button, which will appear as either red (indicating disconnection) or green (signifying a successful reconnection).
95
+
<br>
96
+
<br>
97
+
98
+
<palign="center">
99
+
<imgsrc="./assets/gifs/ReconnectGif22.gif" />
89
100
</p>
90
101
<br>
91
102
@@ -94,35 +105,47 @@ Download the recorded snapshots as a JSON file and upload them to access state t
94
105
One of the most common issues that affects performance in React is unnecessary
95
106
render cycles. This problem can be fixed by checking your renders in the
96
107
Performance tab in Chrome DevTools under the Reactime panel.
108
+
<br>
109
+
<br>
97
110
98
111
### 🔹 Jumping
99
112
100
113
Using the actions sidebar, a user can jump to any previously recorded snapshots.
101
114
Hitting the jump button on any snapshot will allow a user to view state data at
102
115
any point in the history of the target application.
116
+
<br>
117
+
<br>
103
118
104
119
### 🔹 Gatsby
105
120
106
121
Reactime offers full support for Gatsby applications. You would be able to
107
122
identify unnecessary renders, duration of each rendering, travel-debugging
108
123
features and visual representation of the tree components.
124
+
<br>
125
+
<br>
109
126
110
127
### 🔹 Next.js
111
128
112
129
Reactime offers debugging and performance tools for Next.js apps: time-traveling
113
130
debugging, preventing unnecessary component re-renders and making your
114
131
application faster.
132
+
<br>
133
+
<br>
115
134
116
135
### 🔹 Remix
117
136
118
137
Reactime offers debugging and performance tools for Remix apps (in beta). Support still
119
138
needs to be added for multi-route time traveling. Every other feature works.
139
+
<br>
140
+
<br>
120
141
121
142
### 🔹 TypeScript Support
122
143
123
144
Reactime offers support for TypeScript applications using stateful class
124
145
components and functional components. Further testing and development is
125
146
required for custom hooks and Concurrent Mode.
147
+
<br>
148
+
<br>
126
149
127
150
### 🔹 Documentation
128
151
@@ -131,6 +154,7 @@ root level and serve the dynamically generated `/docs/index.html` file on a
131
154
browser. Doing so will provide a readable, extensible, and interactive GUI view
132
155
of the structure and interfaces of the codebase.
133
156
<br>
157
+
<br>
134
158
135
159
### <b>Additional Features</b>
136
160
@@ -144,15 +168,16 @@ of the structure and interfaces of the codebase.
144
168
145
169
<h1>What's New!</h1>
146
170
147
-
Reactime 21.0 focuses on several key performance issues to improve application stability and reliability, bug fixes, a revamped UI, and the inclusion of a state export and import feature.
171
+
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.
172
+
173
+
<i>Taking a deeper look</i>
148
174
149
-
<i>Under the Hood</i>
175
+
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.
150
176
151
-
We have resolved several persistent bugs that would result in a black screen during regular application use. One of the major causes of Reactime’s black screen bug was related to the use of deprecated packages, such as an outdated Material UI package. Another source of black screens and poor user experience appeared to be related to the application frequently terminating ports. This prevented Reactime’s contentScript.ts, background.js, and MainContainer.tsx from communicating with the developer’s application. Through the implementation of a ‘keepAlive’ function, we allow the connection to stay long-lived for longer. Updating the current Material UI package from v4 to v5 and implementing keepAlive connections have resulted in a drastic decrease in port disconnects.
177
+
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.
152
178
153
-
In an effort to improve maintainability and application longevity, there were several engineering interventions that were implemented. One of the goals for Reactime 21.0 was to decrease the dependency on external libraries and packages, which we have done by updating or removing packages. While the documentation for the backend and extension was adequate, there was a severe lack of documentation of all the front-end components. Reactime 21.0 has changed this with documentation covering more than 90% of front-end component logic. We have also added new images and charts so future developers can understand how components are interconnected. These improvements should lead to faster development of features in the future.
179
+
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.
154
180
155
-
For user experience, we focused on several major goals. The new download and upload feature allows developers to download their current state history so that developers may share their findings or review them later down the road. Another focus was to remove features that did not meet Reactime’s standards for user experience. The “Compare Actions” option has been removed until the feature becomes more concrete. The initial application load screen has had timings loosened to allow developers with slower computers to allow better connection between Reactime and their application. Loading error messages have been improved to allow easier initial troubleshooting to decrease frustration. Last but not least, while we have now migrated to Material UI v5, we have started the slow transition to convert various components into Material UI. Along with a new take on Reactime’s logo, this has resulted in a cleaner and more modern appearance.
156
181
157
182
If you would like to read more about previous releases, click <ahref="https://github.com/open-source-labs/reactime/releases">here!</a>
158
183
@@ -228,7 +253,7 @@ Node v16.16.0, please use script 'npm run devlegacy' | 'npm run buildlegacy'
228
253
229
254
## <b>Read More</b>
230
255
231
-
-[Cheers to Reactime, Version 21!](https://medium.com/@brok3turtl3/cheers-to-reactime-version-21-fa4dafa4bc74)
0 commit comments