Developer tool for time travel debugging and performance monitoring in React applications.
MIT License
Bot releases are visible (Hide)
Reactime 24.0 Release Highlights:
New Accessibility Debugging Feature
Fixes/Updates
Published by leebology 9 months ago
Reactime 23.0 Release Highlights:
Dependency Updates
UI / Theme Updates
Loading Error Page
More information can be found in the readme. We hope these v23 changes make a more enjoyable user experience and set the stage for more seamless development from future developers. Thanks for using Reactime!
Published by kelvinmirhan 12 months ago
Reactime 22.0 Release Highlights:
Core Enhancements:
Tech Stack Modernization:
User Experience Improvements:
These enhancements in Reactime 22.0 aim to offer users a more stable and feature-rich experience while ensuring the application is set for easier maintenance and scalability in the future.
Published by AndrewByun 12 months ago
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.
Under the Hood
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.
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.
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.
Published by j-mccoll over 1 year ago
Reactime 20.0 includes several key improvements under the hood to improve performance and resolve existing bugs, as well as a revamped UX/UI to achieve WCAG compatibility.
Under the Hood:
UX/UI Updates:
Published by minzo-kim over 1 year ago
Updates in 19.0:
Reactime 19.0 comes with UI changes to enhance the developer’s experience, as well as a revamping of the codebase to reflect current industry standards and better maintainability for future contributors.
UI Updates:
Under the Hood:
Here are the release notes for v17 and v18!
Updates in v18:
Updates in v17:
Published by eminthrv almost 2 years ago
Under The Hood Updates:
We found that as of the way the Reactime stood at version 15, although the program ran, the codebase is difficult to understand and work with, along with other problems. This could discourage future open source product enthusiasts from further working on Reactime and pushing updates, putting reactime in danger of depreciation. In order to prevent the chances of depreciation, we began tackling the following problems.
Problem: Confusing code; Solution: Refactoring
Within Reactime’s codebase, we found that there was a lot going on and often without comments to help guide iterators through understanding the code. Often, bits of code that should take about 30 mins to understand took our team up to 3 hours to understand. Our team has simplified the current codebase, added detailed comments, and removed a considerable amount of unused code in order to clear clutter, allowing future iterators to more quickly understand the code.
Problem: Disorganized files and code; Solution: Modularization
Another significant issue with the codebase was the way the code and the files were organized; for example, the individual components on the front end, 20+ files, were all thrown into one folder without any respect to what other components they connect to or how they relate to the overall functionality of Reactime. We solved this by creating aptly named folders, and organizing files based on their functionality and their connectivity with respect to other files.
Updated front end diagram:
Problem: 42% of files in Reactime are not tested; Solution: Implementing 100% test coverage
Our team utilized Jest, React Testing Library and Supertest in order to implement testing coverage to 100%
Problem: typescript is only partially integrated into the code; Solution: fully converted codebase to typescript
Throughout the codebase, our team found that although there was some typescript integration, most variables were untyped and many files had @ts-nocheck implemented due to various typescript bugs. Our team further fleshed out the codescript in order to include typing for all variables, and fixed the errors resulting from removing @ts-nocheck.
Problem: Unclear user instructions; Solution: Clarified instructions for end users
Although Reactime has a website and multiple READme’s, 40% of issues on github are related to not being able to install and run the application. We have clarified the instructions as to how to run and use the program in order to remove a major barrier in Reactime’s end user’s experience.
Published by christinaor about 2 years ago
Reactime now not only allows users to access multiple snapshots, but take a specific snapshot and view it more granularly through a visualization consisting of its individual components. These graphs are rendered directly in the same Performance tab in Reactime and provide details for each component when the user hovers over them, providing a new visual comparison of components across a single chosen state.
Published by RobbyTipton over 2 years ago
Reactime is now compatible with React Router applications! Prior to Reactime 14.0, recording state snapshots as the user navigated across various routes was possible, but time travel debugging was only possible for the current route (i.e. jumping back to a prior state at a different route was not possible). In order to streamline debugging of applications with multiple routes, Reactime 14.0 added functionality that allows the user to time-travel back to different routes, including live updating in the browser to reflect the state of their application at that previously visited route.
The list of state snapshots in the Reactime dashboard is now classified by route to give the developer visual cues of the snapshot-route relationship and make time travel debugging of various routes easier.
The Reactime dashboard includes a stacked bar graph showing render times for each component, with a separate bar stack for each snapshot. With Reactime 14.0, this composite bar graph can now be filtered by route to allow the developer to review detailed performance data by route.
Published by caitlinchan23 almost 4 years ago
Compatibility with Gatsby and Next.js
Runs on single and multi-page applications
Brand new minimalist and intuitive design for UI
Improved algorithm in terms of time-complexity for the performance tab
Works in development mode only, and doesn’t affect the speed of your app
With the new latest version, we have expanded its functionality and increased its accuracy. Now, Reactime 7.0 is a performance tool for React applications, including frameworks like Gatsby and Next.js. Not only does it help manage and understand the state of your application, but you can now also visualize the rendering frequency of your components. Additionally, Reactime now only runs in development mode which allows us to enhance its speed without slowing down your applications.
Published by dubalol over 4 years ago
Features in this latest release:
Optimizations & Bug fixes in this latest release:
Published by rydang about 5 years ago
Temporary release until Chrome Extension is published on Web Store.
Unzip this build file.
Then go into your chrome://extensions/
Enable developer mode at the top right.
Load unpacked, and select the build folder.
Published by rydang about 5 years ago
Temporary release until Chrome Extension is published on Web Store.
Unzip this build file.
Then go into your chrome://extensions/
Enable developer mode at the top right.
Load unpacked, and select the build folder.