open-source-labs/reactime

Developer tool for time travel debugging and performance monitoring in React applications.

reactime's Issues

Reactime v7.0.0 (repo) vs v8.0.0 (Chrome web store)?

The latest tag in the repo is 7.0.0 (Oct 30, 2020) but the Chrome web store advertises 8.0.0 (Feb 6, 2021).

Where did the published v8.0.0 come from?

Please and thanks.

TypeError: Cannot read property 'object' of null in backend.bundle.js

Hi there

I just installed the extension and I got this error when I open my React application in development mode.

More details:

• Redux v4.0.5
• Redux-Saga v1.1.3
• React-Redux v7.1.3
• React v17.0.1

Console logs

The extension contains a console log that is probably not intended:
https://github.com/open-source-labs/reactime/blob/master/src/backend/index.ts#L47

Chrome Debugger Still Running

Description

Reactime offers the ability to enable and disable its accessibility feature to prevent the persistent Chrome Debugger notification from appearing when accessibility is not wanted by the developer.

If a developer closes the application without disabling the accessibility tree, the Chrome Debugger will continue to run. If a new tab is opened and the developer navigates to Reactime, Reactime will show the accessibility features are being disabled.

If the developer forgets to disable the accessibility tree before closing the tab, the current workaround to disable the accessibility feature requires the developer to refresh Reactime from the Chrome Extension panel or close out of all Google Chrome tabs and windows.

Reproduction

Follow all the normal steps to set up and run Reactime and run the demo app.

• Navigate to the Accessibility tab and click "enable".
• While other tabs are open, close the Chrome tab that is running the demo app*.
• Open a new tab and navigate back to the demo app.

The Chrome Debugger will notify the developer that Reactime has started debugging the browser.

*If the developer has no other tabs open, Reactime will automatically refresh itself when opening again.

System information

System:
OS: macOS 14.3.1
CPU: (8) arm64 Apple M2
Memory: 59.77 MB / 8.00 GB
Shell: 3.6.1 - /opt/homebrew/bin/fish
Binaries:
Node: 18.18.2 - ~/Desktop/codesmith/reactime-v24/node_modules/.bin/node
npm: 10.2.4 - /opt/homebrew/bin/npm
Browsers:
Chrome: 122.0.6261.69
Safari: 17.3.1
npmPackages:
@emotion/react: ^11.11.1 => 11.11.3
@emotion/styled: ^11.11.0 => 11.11.0
@mui/icons-material: ^5.15.1 => 5.15.5
@mui/material: ^5.15.1 => 5.15.5
@mui/system: ^5.15.1 => 5.15.5
@reduxjs/toolkit: ^2.0.1 => 2.0.1
@testing-library/jest-dom: ^6.1.5 => 6.2.0
@testing-library/react: ^14.1.2 => 14.1.2
@testing-library/user-event: ^14.5.1 => 14.5.2
@types/chrome: ^0.0.254 => 0.0.254
@types/jest: ^29.5.11 => 29.5.11
@types/node: ^20.10.5 => 20.11.5
@typescript-eslint/eslint-plugin: ^6.15.0 => 6.19.0
@visx/axis: ^3.5.0 => 3.5.0
@visx/event: ^3.3.0 => 3.3.0
@visx/gradient: ^3.3.0 => 3.3.0
@visx/grid: ^3.5.0 => 3.5.0
@visx/group: ^3.3.0 => 3.3.0
@visx/hierarchy: ^3.3.0 => 3.3.0
@visx/responsive: ^3.3.0 => 3.3.0
@visx/scale: ^3.5.0 => 3.5.0
@visx/shape: ^3.5.0 => 3.5.0
@visx/text: ^3.3.0 => 3.3.0
@visx/tooltip: ^3.3.0 => 3.3.0
copy-webpack-plugin: ^11.0.0 => 11.0.0
cross-env: ^7.0.3 => 7.0.3
css-loader: ^6.8.1 => 6.9.1
d3: ^7.8.5 => 7.8.5
d3-scale-chromatic: ^3.0.0 => 3.0.0
d3-shape: ^3.2.0 => 3.2.0
dotenv: ^16.3.1 => 16.3.2
eslint-plugin-jest: ^27.6.0 => 27.6.3
eslint-plugin-jest-dom: ^5.1.0 => 5.1.0
eslint-plugin-react: ^7.33.2 => 7.33.2
eslint-plugin-react-hooks: ^4.6.0 => 4.6.0
eslint-plugin-testing-library: ^6.2.0 => 6.2.0
express: ^4.18.2 => 4.18.2
html-react-parser: ^5.0.11 => 5.1.1
html-webpack-plugin: ^5.5.4 => 5.6.0
identity-obj-proxy: ^3.0.0 => 3.0.0
intro.js: ^7.2.0 => 7.2.0
intro.js-react: ^1.0.0 => 1.0.0
jsdom: ^23.0.1 => 23.2.0
jsondiffpatch: ^0.5.0 => 0.5.0
lodash: ^4.17.21 => 4.17.21
node: ^18.12.1 => 18.18.2
prettier: ^3.1.1 => 3.2.4
rc-slider: ^10.5.0 => 10.5.0
rc-tooltip: ^6.1.3 => 6.1.3
react: ^18.2.0 => 18.2.0
react-apexcharts: ^1.4.1 => 1.4.1
react-dom: ^18.2.0 => 18.2.0
react-hover: ^3.0.1 => 3.0.1
react-json-tree: ^0.18.0 => 0.18.0
react-redux: ^9.0.4 => 9.1.0
react-router-dom: ^6.21.1 => 6.21.3
react-select: ^5.8.0 => 5.8.0
react-spinners: ^0.13.8 => 0.13.8
redux: ^5.0.0 => 5.0.1
regenerator-runtime: ^0.14.1 => 0.14.1
sass: ^1.69.5 => 1.70.0
sass-loader: ^13.3.2 => 13.3.3
style-loader: ^3.3.3 => 3.3.4
styled-components: ^6.1.2 => 6.1.8
ts-loader: ^9.5.1 => 9.5.1
typedoc: ^0.25.4 => 0.25.7
typescript: ^5.3.3 => 5.3.3
web-vitals: ^3.5.0 => 3.5.1
webpack: ^5.89.0 => 5.89.0
webpack-cli: ^5.1.4 => 5.1.4

Additional information

No response

👨‍👧‍👦 Contributing

• 🙋‍♂️ Yes, I'd love to make a PR to fix this bug!

When using Hooks, Unhandled Rejection (TypeError): Cannot read property 'match' of undefined

Concurrent Mode: False

package.json(freshly created create-react-app)

  "name": "sagas",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-scripts": "3.3.1",
    "reactime": "^3.0.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

First off, awesome tool.

Using reactime with a new create-react-app and hooks produces the following dismissible error.

This error displays immediately, but does not break the app.

After dismissing the error the following displays in devtools.

Uncaught (in promise) TypeError: Cannot read property 'match' of undefined
    at 0.chunk.js:43501
    at Array.forEach (<anonymous>)
    at 0.chunk.js:43500
    at Array.forEach (<anonymous>)
    at push../node_modules/reactime/astParser.js.module.exports (0.chunk.js:43488)
    at createTree (0.chunk.js:43705)
    at createTree (0.chunk.js:43716)
    at updateSnapShotTree (0.chunk.js:43736)
    at 0.chunk.js:43754
    at Module../src/index.js (main.chunk.js:164)
    at __webpack_require__ (bundle.js:786)
    at fn (bundle.js:151)
    at Object.1 (main.chunk.js:177)
    at __webpack_require__ (bundle.js:786)
    at checkDeferredModules (bundle.js:46)
    at Array.webpackJsonpCallback [as push] (bundle.js:33)
    at main.chunk.js:1

React time does not find the app and no debugging is available.

This only seems to be happening with hooks.

The error is thrown as soon as useState is called to set the initial value.

Refactoring the counter to a class based component resolves the issue and reactime works as expected.

See code below.

https://github.com/mannyhagman/hooks-counter/blob/master/src

Reactime not working

Hi there

I open my React application in development mode.

Details:
"core-js": "3.6.5",
"prop-types": "15.7.2",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-router-dom": "5.2.0"

Does it work with hooks?

Would be nice to put this info in the readme

Accessor not supported

With this extension enabled in Chrome 86.0.4240.111 on Windows 10 1903, Youtube (for example, it may also happen on other sites) throws an "Accessor not supported" error repeatedly, making the site nearly unusable. No idea whats going on, but I suspect reactime isn't correctly identifying the page as angular and not react.

Apologies for the less than ideal issue.

Unhandled runtime errors in NextJS projects using TypeScript

"s.getFiberRoots is not a function"

Reactime seems like a great extension; please fix this if possible. NextJS is the de facto standard for doing SSR with React, and I'm sure others are hoping for proper NextJS support too. Thanks for your consideration.

False parsing of ArrayPattern

https://github.com/open-source-labs/reactime/blob/37ae68c5615f44a977fb08137adedf709b472353/src/backend/helpers.ts#L107-L114

The above code breaks for the following case:

const [, setState] = useFoo();

because hook.id.elements[0] is null with the above pattern match. hook.name will crash.

missing instructions on how to develop with this extension?!

Hi there,

Thanks a lot for this really impressive looking extension! I say "impressive looking" rather than just "impressive" because unfortunately I have not been able to use it yet. On the first attempt I immediately ran into #250. So then I thought, OK maybe I can fix this myself, so I forked the repo, and cloned it locally. What next though? The README says that I can install from the provided build.zip:

Use src/extension/build/build.zip for manual installation in [Developer mode] (https://developer.chrome.com/extensions/faq#faq-dev-01). Turn on 'Allow access to file URLs' in extension details page if testing locally.

but as far as I can see, it doesn't give any explanation at all about how to build and test Reactime directly from the source.

I find this fairly astonishing, because clearly a great deal of effort has gone into trying to make it as easy as possible for developers to contribute. Indeed, the Developer README starts by saying

Our mission at Reactime is to maintain and iterate constantly, but never at the expense of future developers.
We know how hard it is to quickly get up to speed and onboard in a new codebase.
So, here are some helpful pointers to help you hit the ground running. 🏃🏾💨

and then goes on to provide gloriously helpful descriptions of the internals, which is absolutely fantastic!

But unfortunately all this effort seems mostly neutered by two crucial but simple and easily fixed flaws:

1. There is no link from the main README to the developer README, so I would expect that most developers will simply not even notice it exists.
2. There is no explanation of how to test any modifications to the source.

The first point is trivially fixed, so I guess I will submit a PR.

The second point seems a lot less obvious, but I think I have found the solution:

1. If you have already installed Reactime from the Chrome Web Store, disable or uninstall it.
2. Run yarn to install all dependencies. (I guessed this is preferred to yarn due to the presence of a yarn.lock file and the absence of a package-lock.json file. I also found that npm i actually failed the first time for me.)
3. Run yarn dev. I guessed this by spotting it in package.json, and I can see that the --watch parameter there means that as soon as any source files are modified, it automatically rebuilds the webpack bundles under src/extension/build.
4. Go to chrome://extensions
5. Ensure Developer mode is enabled
6. Click Load unpacked
7. Select the src/extension/build directory

This seems to be working for me, so it would be great if someone could confirm that it's the correct procedure.

.cargo/config

.cargo/config

Play Button No Longer Functions

Description

When clicking on Play, Reactime will jump to the first snapshot and fail to travel through the snapshots. Previously, Reactime played snapshots back starting with the snapshot that the user selected.

Reproduction

• Produce a snapshot by making any state change
• Click on the Jump button next to the snapshot
• Click on the Play button

System information

System:
OS: macOS 14.3.1
CPU: (8) arm64 Apple M2
Memory: 59.77 MB / 8.00 GB
Shell: 3.6.1 - /opt/homebrew/bin/fish
Binaries:
Node: 18.18.2 - ~/Desktop/codesmith/reactime-v24/node_modules/.bin/node
npm: 10.2.4 - /opt/homebrew/bin/npm
Browsers:
Chrome: 122.0.6261.69
Safari: 17.3.1
npmPackages:
@emotion/react: ^11.11.1 => 11.11.3
@emotion/styled: ^11.11.0 => 11.11.0
@mui/icons-material: ^5.15.1 => 5.15.5
@mui/material: ^5.15.1 => 5.15.5
@mui/system: ^5.15.1 => 5.15.5
@reduxjs/toolkit: ^2.0.1 => 2.0.1
@testing-library/jest-dom: ^6.1.5 => 6.2.0
@testing-library/react: ^14.1.2 => 14.1.2
@testing-library/user-event: ^14.5.1 => 14.5.2
@types/chrome: ^0.0.254 => 0.0.254
@types/jest: ^29.5.11 => 29.5.11
@types/node: ^20.10.5 => 20.11.5
@typescript-eslint/eslint-plugin: ^6.15.0 => 6.19.0
@visx/axis: ^3.5.0 => 3.5.0
@visx/event: ^3.3.0 => 3.3.0
@visx/gradient: ^3.3.0 => 3.3.0
@visx/grid: ^3.5.0 => 3.5.0
@visx/group: ^3.3.0 => 3.3.0
@visx/hierarchy: ^3.3.0 => 3.3.0
@visx/responsive: ^3.3.0 => 3.3.0
@visx/scale: ^3.5.0 => 3.5.0
@visx/shape: ^3.5.0 => 3.5.0
@visx/text: ^3.3.0 => 3.3.0
@visx/tooltip: ^3.3.0 => 3.3.0
copy-webpack-plugin: ^11.0.0 => 11.0.0
cross-env: ^7.0.3 => 7.0.3
css-loader: ^6.8.1 => 6.9.1
d3: ^7.8.5 => 7.8.5
d3-scale-chromatic: ^3.0.0 => 3.0.0
d3-shape: ^3.2.0 => 3.2.0
dotenv: ^16.3.1 => 16.3.2
eslint-plugin-jest: ^27.6.0 => 27.6.3
eslint-plugin-jest-dom: ^5.1.0 => 5.1.0
eslint-plugin-react: ^7.33.2 => 7.33.2
eslint-plugin-react-hooks: ^4.6.0 => 4.6.0
eslint-plugin-testing-library: ^6.2.0 => 6.2.0
express: ^4.18.2 => 4.18.2
html-react-parser: ^5.0.11 => 5.1.1
html-webpack-plugin: ^5.5.4 => 5.6.0
identity-obj-proxy: ^3.0.0 => 3.0.0
intro.js: ^7.2.0 => 7.2.0
intro.js-react: ^1.0.0 => 1.0.0
jsdom: ^23.0.1 => 23.2.0
jsondiffpatch: ^0.5.0 => 0.5.0
lodash: ^4.17.21 => 4.17.21
node: ^18.12.1 => 18.18.2
prettier: ^3.1.1 => 3.2.4
rc-slider: ^10.5.0 => 10.5.0
rc-tooltip: ^6.1.3 => 6.1.3
react: ^18.2.0 => 18.2.0
react-apexcharts: ^1.4.1 => 1.4.1
react-dom: ^18.2.0 => 18.2.0
react-hover: ^3.0.1 => 3.0.1
react-json-tree: ^0.18.0 => 0.18.0
react-redux: ^9.0.4 => 9.1.0
react-router-dom: ^6.21.1 => 6.21.3
react-select: ^5.8.0 => 5.8.0
react-spinners: ^0.13.8 => 0.13.8
redux: ^5.0.0 => 5.0.1
regenerator-runtime: ^0.14.1 => 0.14.1
sass: ^1.69.5 => 1.70.0
sass-loader: ^13.3.2 => 13.3.3
style-loader: ^3.3.3 => 3.3.4
styled-components: ^6.1.2 => 6.1.8
ts-loader: ^9.5.1 => 9.5.1
typedoc: ^0.25.4 => 0.25.7
typescript: ^5.3.3 => 5.3.3
web-vitals: ^3.5.0 => 3.5.1
webpack: ^5.89.0 => 5.89.0
webpack-cli: ^5.1.4 => 5.1.4

Additional information

No response

👨‍👧‍👦 Contributing

• 🙋‍♂️ Yes, I'd love to make a PR to fix this bug!

Port Disconnection

Description

After an undetermined amount of time of idling, Reactime will disconnect from Chrome's port. Upon disconnection from Chrome's port, Reactime will no longer be able to communicate with background scripts and will no longer respond to any user inputs or record state changes.

Hitting reconnect will notify the user that Reactime already appears to be connected. Accepting the reload of the extension will fail to detect the React Dev Tools.

The current workaround is to refresh Reactime within the Chrome Extension tab, refresh the page, and then reload the frame within the Chrome Dev Tools. Clicking on the Reconnect button will occasionally result in Reactime failing to find a target application, requiring the above steps to guarantee a connection.

Reproduction

Currently, there is no way to consistently reproduce this bug, however, it appears to happen after allowing Reactime to idle for some time.

System information

System:
OS: macOS 14.3.1
CPU: (8) arm64 Apple M2
Memory: 97.17 MB / 8.00 GB
Shell: 3.6.1 - /opt/homebrew/bin/fish
Binaries:
Node: 18.18.2 - ~/Desktop/codesmith/reactime-v24/node_modules/.bin/node
npm: 10.2.4 - /opt/homebrew/bin/npm
Browsers:
Chrome: 122.0.6261.57
Safari: 17.3.1
npmPackages:
@emotion/react: ^11.11.1 => 11.11.3
@emotion/styled: ^11.11.0 => 11.11.0
@mui/icons-material: ^5.15.1 => 5.15.5
@mui/material: ^5.15.1 => 5.15.5
@mui/system: ^5.15.1 => 5.15.5
@reduxjs/toolkit: ^2.0.1 => 2.0.1
@testing-library/jest-dom: ^6.1.5 => 6.2.0
@testing-library/react: ^14.1.2 => 14.1.2
@testing-library/user-event: ^14.5.1 => 14.5.2
@types/chrome: ^0.0.254 => 0.0.254
@types/jest: ^29.5.11 => 29.5.11
@types/node: ^20.10.5 => 20.11.5
@typescript-eslint/eslint-plugin: ^6.15.0 => 6.19.0
@visx/axis: ^3.5.0 => 3.5.0
@visx/event: ^3.3.0 => 3.3.0
@visx/gradient: ^3.3.0 => 3.3.0
@visx/grid: ^3.5.0 => 3.5.0
@visx/group: ^3.3.0 => 3.3.0
@visx/hierarchy: ^3.3.0 => 3.3.0
@visx/responsive: ^3.3.0 => 3.3.0
@visx/scale: ^3.5.0 => 3.5.0
@visx/shape: ^3.5.0 => 3.5.0
@visx/text: ^3.3.0 => 3.3.0
@visx/tooltip: ^3.3.0 => 3.3.0
copy-webpack-plugin: ^11.0.0 => 11.0.0
cross-env: ^7.0.3 => 7.0.3
css-loader: ^6.8.1 => 6.9.1
d3: ^7.8.5 => 7.8.5
d3-scale-chromatic: ^3.0.0 => 3.0.0
d3-shape: ^3.2.0 => 3.2.0
dotenv: ^16.3.1 => 16.3.2
eslint-plugin-jest: ^27.6.0 => 27.6.3
eslint-plugin-jest-dom: ^5.1.0 => 5.1.0
eslint-plugin-react: ^7.33.2 => 7.33.2
eslint-plugin-react-hooks: ^4.6.0 => 4.6.0
eslint-plugin-testing-library: ^6.2.0 => 6.2.0
express: ^4.18.2 => 4.18.2
html-react-parser: ^5.0.11 => 5.1.1
html-webpack-plugin: ^5.5.4 => 5.6.0
identity-obj-proxy: ^3.0.0 => 3.0.0
intro.js: ^7.2.0 => 7.2.0
intro.js-react: ^1.0.0 => 1.0.0
jsdom: ^23.0.1 => 23.2.0
jsondiffpatch: ^0.5.0 => 0.5.0
lodash: ^4.17.21 => 4.17.21
node: ^18.12.1 => 18.18.2
prettier: ^3.1.1 => 3.2.4
rc-slider: ^10.5.0 => 10.5.0
rc-tooltip: ^6.1.3 => 6.1.3
react: ^18.2.0 => 18.2.0
react-apexcharts: ^1.4.1 => 1.4.1
react-dom: ^18.2.0 => 18.2.0
react-hover: ^3.0.1 => 3.0.1
react-json-tree: ^0.18.0 => 0.18.0
react-redux: ^9.0.4 => 9.1.0
react-router-dom: ^6.21.1 => 6.21.3
react-select: ^5.8.0 => 5.8.0
react-spinners: ^0.13.8 => 0.13.8
redux: ^5.0.0 => 5.0.1
regenerator-runtime: ^0.14.1 => 0.14.1
sass: ^1.69.5 => 1.70.0
sass-loader: ^13.3.2 => 13.3.3
style-loader: ^3.3.3 => 3.3.4
styled-components: ^6.1.2 => 6.1.8
ts-loader: ^9.5.1 => 9.5.1
typedoc: ^0.25.4 => 0.25.7
typescript: ^5.3.3 => 5.3.3
web-vitals: ^3.5.0 => 3.5.1
webpack: ^5.89.0 => 5.89.0
webpack-cli: ^5.1.4 => 5.1.4

Additional information

No response

👨‍👧‍👦 Contributing

• 🙋‍♂️ Yes, I'd love to make a PR to fix this bug!

Calculator example is down

The link for the calculator example is down http://reactime-demo1.us-east-1.elasticbeanstalk.com/

PS: thanks for this awesome extension 💯 👏

within electron app: 'No React application found. Please install our npm package in your app.'

I am trying to use this awesome extension within an electron app.
It seems that the extension is successfully added to the devtools (I can see the "reactime" tab), but I can see nothing but the message "No React application found. Please install our npm package in your app."

The renderer process is launching my react application this way (tsx, transpiled and bundled with webpack with a simple ts-loader):

import ReactDom from 'react-dom';
import React from 'react';
import { ConfigSelection } from './config-selection';
import { RecoilRoot } from 'recoil';

const App = () => (
    <RecoilRoot>
        <ConfigSelection/>
    </RecoilRoot>
)

ReactDom.render(<App/>, document.getElementById('root'));

I am using the version 3.1.1 from the github release (https://github.com/open-source-labs/reactime/releases), I have read in the description that the npm package was not needed since 3.0 version.

I have however tried the npm package (npm i reactime -D)

import ReactDom from 'react-dom';
import React from 'react';
import { ConfigSelection } from './config-selection';
import { RecoilRoot } from 'recoil';
import reactime from 'reactime';

const App = () => (
    <RecoilRoot>
        <ConfigSelection/>
    </RecoilRoot>
)

const rootElement = document.getElementById('root');
ReactDom.render(<App/>, rootElement);
reactime(rootElement);

Same message in devtools and an error occured on the renderer process:

acorn.mjs:2921 Uncaught (in promise) SyntaxError: Unexpected token (1:9)
at Object../node_modules/reactime/node_modules/acorn/dist/acorn.mjs.pp$4.raise (acorn.mjs:2921)
at Object../node_modules/reactime/node_modules/acorn/dist/acorn.mjs.pp.unexpected (acorn.mjs:692)
at Object../node_modules/reactime/node_modules/acorn/dist/acorn.mjs.pp$3.parseIdent (acorn.mjs:2872)
at Object../node_modules/reactime/node_modules/acorn/dist/acorn.mjs.pp$1.parseFunction (acorn.mjs:1269)
at Object../node_modules/reactime/node_modules/acorn/dist/acorn.mjs.pp$1.parseFunctionStatement (acorn.mjs:986)
at Object../node_modules/reactime/node_modules/acorn/dist/acorn.mjs.pp$1.parseStatement (acorn.mjs:833)
at Object../node_modules/reactime/node_modules/acorn/dist/acorn.mjs.pp$1.parseTopLevel (acorn.mjs:749)
at Object.parse (acorn.mjs:549)
at Function.parse (acorn.mjs:572)
at ./node_modules/reactime/astParser.js.module.exports (astParser.js:11)

Did I miss something? Or maybe the extension is not compatible with electronjs?

Thanks a lot

Cannot read property 'match' of undefined using array destructuring

This code

const [a,{b}] useState([0,{}])

fails with Cannot read property 'match' of undefined. It's because of the somewhat simplistic AST traversal in src/backend/helpers.ts, line 128. This line:

if (el.match(/_use/)) hooksNames[el] = statements[i + 1];

I could a submit a PR, but don't fully understand the code, and thought you'd probably do it better.

Thanks anyhow!

differences with redux dev-tools?

sorry for non-tech issue, but it might improve your install funnel if you could be clear about the differences vs. redux devtools, which a lot of people use already?
at first glance they look pretty similar, time-travel debugging etc.

https://github.com/zalmoxisus/redux-devtools-extension

and they have various fancy features like state 'chart'

also why does this require an NPM package to be installed, as opposed to just working as a chrome extension?

Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src github.githubassets.com".

This unsafe-eval error appears repeatedly in the logs of our Reactime package in the extensions manager.

The only place in the codebase I could find relating to unsafe-eval was in our manifest.json, reproduced below:

Using Reactime in a React + Electron App

I am working on a react + electron app and for the longest time have been using an extension called Recoilize to debug recoil state within my application. Issue is, with a recent update, that tool has stopped working.

After looking for a new tool I found reactime and have been trying to get it to work. I have the react dev tools extension loaded in my app (One of the requirements I read in the README), but am getting errors trying to load reactime. The issues I am having are as follows:

• I get the "Checking if content script has been launched on current tab" error and the launch process doesn't progress.
• When I try to manually click the "launch" button nothing happens.
• In my terminal I get the following error:

[6428:0715/045024.338:ERROR:extensions_browser_client.cc(67)] Extension Error:
[1]   OTR:     false
[1]   Level:   2
[1]   Source:  chrome-extension://cgibknllccemdnfhfpmjhffpjfeidjga/bundles/background.bundle.js
[1]   Message: Uncaught TypeError: Cannot read properties of undefined (reading 'addListener')
[1]   ID:      cgibknllccemdnfhfpmjhffpjfeidjga
[1]   Type:    RuntimeError
[1]   Context: chrome-extension://cgibknllccemdnfhfpmjhffpjfeidjga/bundles/background.bundle.js
[1]   Stack Trace:
[1]     {
[1]       Line:     3
[1]       Column:   1
[1]       URL:      chrome-extension://cgibknllccemdnfhfpmjhffpjfeidjga/bundles/background.bundle.js
[1]       Function: (anonymous function)
[1]     }
[1] [6428:0715/045024.338:ERROR:extensions_browser_client.cc(67)] Extension Error:
[1]   OTR:     false
[1]   Level:   1
[1]   Source:  manifest.json
[1]   Message: Service worker registration failed. Status code: 15
[1]   ID:      cgibknllccemdnfhfpmjhffpjfeidjga
[1]   Type:    ManifestError

Does anyone have reactime working in an Electron app? Is there any help I can have to get this working?

Thank you.

If you need any extra information, please let me know.

Does not seem to work with react-router

When following the set up instructions provided in the README this tool breaks the application if the app has react-router-dom. Currently using react-router-dom v5.1.2.

I see this error when attempting to include in my project.

Seems like acorn is choking on something in router... I am unsure if acorn was pulled in as a dependency of reactime or another one of the packages i have in my project... regardless, when i comment out the router code reactime works, when i have it in the code it breaks.

Cannot read property '_internalRoot' of undefined

I get this error in the console:

The add on tab on the dev tools says it doesn't find any active react project

Time travel seems broken

If I try to go back in time, the web page in questions goes blank (white) and I get errors like this:

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    at TransitionGroup (webpack://@my/app/../node_modules/react-transition-group/esm/TransitionGroup.js?:53:30)
    at span
    at eval (webpack://@my/app/../node_modules/@emotion/react/dist/emotion-element-1c22787f.browser.esm.js?:54:66)
    at TouchRipple (webpack://@my/app/../node_modules/@mui/material/ButtonBase/TouchRipple.js?:154:83)
    at button
    at eval (webpack://@my/app/../node_modules/@emotion/react/dist/emotion-element-1c22787f.browser.esm.js?:54:66)
    at ButtonBase (webpack://@my/app/../node_modules/@mui/material/ButtonBase/ButtonBase.js?:111:82)
    at eval (webpack://@my/app/../node_modules/@emotion/react/dist/emotion-element-1c22787f.browser.esm.js?:54:66)
    at Button (webpack://@my/app/../node_modules/@mui/material/Button/Button.js?:233:83)
    at div
    at div
    at div
    at div
    at CheckRegistration (webpack://@my/app/./src/components/CheckRegistration/index.tsx?:21:27)
    at div

It comes from timeJump.ts:16, which corresponds to the breakpointed line in this source fragment:

Cannot read property 'nodeToNodeSubscriptions' of undefined

Hey guys !

Just trying to get the extension to work on one of my project... keep getting a
Cannot read property 'nodeToNodeSubscriptions' of undefined even tho I got the ReactDevTool installed.

Is there anything I need to do make it work ?
Thanks !

This extension causes a lot of slugginess with real time data (a relatively big amount)

I thought we had a memory leak at work but after trying in incognito the problem was gone.

I remembered i installed this extension on saturday and when i got to work today(yes we work sundays) the app felt really sluggish.

When i disabled the extension everything was back to normal.

There were memory spikes e.g from 80mb to 250mb and down again.

Time Travel With Conditional State Fields

When time-jumping to a snapshot that no longer contains a state field that was conditionally initialized, the application does not remove the data from the UI.

E.g.

1. On button click: render a new component that shows a second counter tracking # button clicks
2. Time travel back to when the component was not rendered
3. The component does not get removed from the UI

Uncaught RangeError: Maximum call stack size exceeded in backend.bundle.js

Hi recently I got this error when I open my react app in development mode:

It seems this function S has been called in an infinity loop

Perfomace record:

More details:

React v17.0.2
Redux v4.0.4
redux-thunk v2.3.0
React-Redux v7.1.0

TypeError: Cannot read property 'key' of undefined

If I activate REACTIME at my nextjs Page, I got this and REACTIME doesn't work.

If I deactivate it, page work like expected like before.

Getting this error on our App

Hi,

Is this supposed to 'just work out of box' like react-dev-tools?
I am getting the following error message on our app. Your demo calculator works fine.
Any ideas about this? We are using react-redux and I've started to experiment with recoil and the stuff I've converted to recoil work fine but Reactime doesn't show anything.

And the extension looks like this:

Devtools not detected

I have the react devtools extension installed, but reacttime is showing:

Is there anything needed to be done for the extensions to see each other?

Uncaught puppeteer error on `npm run test`

Error reproduced in red below:

I just started looking into this, so updates on what I think might be causing this issue to come.

Uncaught DOMException ... could not be cloned.

pacakge.json

"react": "^16.11.0",
"react-dom": "^16.11.0",
"reactime": "^3.0.2"

Setup exactly like the docs specify with reactime(rootContainer) I throw this error:

Uncaught DOMException: Failed to execute 'postMessage' on 'Window': client => {
      this.setState({
        client
      });
    } could not be cloned.
    at sendSnapshot (http://localhost:3000/static/js/1.chunk.js:98591:12)
    at http://localhost:3000/static/js/1.chunk.js:98734:46
sendSnapshot @ linkFiber.js:29
(anonymous) @ linkFiber.js:172
postMessage (async)
282 @ content.bundle.js:1
n @ content.bundle.js:1
(anonymous) @ content.bundle.js:1
(anonymous) @ content.bundle.js:1

When I remove reactime(rootContainer) all is well.

"Map" tab view only works on Recoil-based target applications

Does not work on vanilla react app:

Works on codesmith homepage:

Add support for Next.js

Hey, I really like the idea of this library. Sadly I am using Next.js for all my projects, so I am not sure how to set it up/if it's posssible

Unchecked runtime.lastError: The message port closed before a response was received.

This error (pictured above) shows up on the main browser console (not the Reactime extension console) occasionally, not always.
Still not sure what causes it, or what functionality exactly is affected, if any at all.

The previous iteration team seemed to attempt solving this issue by returning true at the end of the port.onMessage and chrome.runtime.onMessage event handlers in our background.js script file.
One of these attempts is reproduced in screenshot-form, below:

Why it might be happening?
Issue #206 : an uncaught error in our extension that breaks the chrome runtime connection.

Not able to switch back to previous state after persisting

When i do persist my current snapshot of the state, and when i do refresh, the snapshot shows in the reacttime panel, but I am not able to Jump to that particular state in time. I can only see my previous states but can't jump back to them.

TypeError: Cannot read property 'length' of undefined

Reactime works for some of my React projects but one errors out upon startup:

...which is this:

This is with:
├─ [email protected]
└─ [email protected]

The projects that do work are older versions using React 16.13.1 and without Recoil.

Blackness

After unpacking the archive and installing the extension in chrome, in devtools the extension looks just black, but for the first 2-3 seconds it works fine