oslabs-beta / react-query-rewind

DevTool for TanStack Query
https://reactqueryrewind.com/
Other
56 stars 1 forks source link

Cannot read properties of undefined #61

Open Thinkscape opened 4 months ago

Thinkscape commented 4 months ago

Description

Right after installation, adding into the app, it showed for a second or two, then the pane went all white. Console says:

Unchecked runtime.lastError: Cannot create item with duplicate id block_element
main.js:1 Main._createAppUI: 3.93505859375 ms
main.js:1 Main._showAppUI: 56.43896484375 ms
main.js:1 Main._initializeTarget: 11.657958984375 ms
main.js:1 Main._lateInitialization: 3.85400390625 ms
panel.js:2 TypeError: Cannot read properties of undefined (reading 'queryHash')
    at TouchRipple.js:119:1
    at Array.map (<anonymous>)
    at TouchRipple.js:119:1
    at os (panel.js:2:284834)
    at Su (panel.js:2:304956)
    at panel.js:2:301560
    at k (panel.js:2:332259)
    at MessagePort.Z (panel.js:2:332791)
fl @ panel.js:2
panel.js:2 TypeError: Cannot read properties of undefined (reading 'queryHash')
    at TouchRipple.js:119:1
    at Array.filter (<anonymous>)
    at Xi (TouchRipple.js:119:1)
    at TouchRipple.js:119:1
    at os (panel.js:2:284834)
    at Su (panel.js:2:304956)
    at panel.js:2:301560
    at k (panel.js:2:332259)
    at MessagePort.Z (panel.js:2:332791)
fl @ panel.js:2
panel.js:2 Uncaught TypeError: Cannot read properties of undefined (reading 'queryHash')
    at TouchRipple.js:119:1
    at Array.map (<anonymous>)
    at TouchRipple.js:119:1
    at os (panel.js:2:284834)
    at Su (panel.js:2:304956)
    at panel.js:2:301560
    at k (panel.js:2:332259)
    at MessagePort.Z (panel.js:2:332791)
legacy.js:1 Uncaught Error: No location name for view with id chrome-extension://jfljppnfglpckkgkpmdpgagnffloboelReactQueryRewind
    at Fn.locationNameForViewId (legacy.js:1:171218)
    at Jn.onContextMenu (legacy.js:1:193547)
    at fn.tabContextMenu (legacy.js:1:166083)

Reproduction

  1. Install chrome extension https://chromewebstore.google.com/detail/react-query-rewind/jfljppnfglpckkgkpmdpgagnffloboel
  2. Add <ReactQueryRewind /> to an app
  3. Open app in browser,
  4. F12
  5. Open the react query rewind dev tools tab

System information

  System:
    OS: macOS 14.4.1
    CPU: (16) arm64 Apple M3 Max
    Memory: 15.02 GB / 128.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.0.0 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 10.5.1 - /opt/homebrew/bin/npm
    pnpm: 8.3.1 - /opt/homebrew/bin/pnpm
    bun: 1.1.8 - /opt/homebrew/bin/bun
  Browsers:
    Chrome: 125.0.6422.60
    Edge: 124.0.2478.105
    Safari: 17.4.1
  npmPackages:
    @tanstack/react-query: ^5.28.0 => 5.36.0
    react: ^18.2.0 => 18.2.0
    react-query-rewind: ^2.0.2 => 2.0.2

Additional information

No response

πŸ‘¨β€πŸ‘§β€πŸ‘¦ Contributing

johnwdunn20 commented 4 months ago

Thanks for submitting this with all this detail. We're looking into this and will reach back out shortly if we have any additional questions.

austin-cavanagh commented 4 months ago

Thank you for this @Thinkscape , looking into this now and will get back to you.

johnwdunn20 commented 4 months ago

@Thinkscape We released an updated version of both the npm package and extension to handle errors more gracefully. The pane should not crash in the scenario you've described. We'd appreciate it if you try it out and let us know how it works for you.

However, we weren't able to replicate your exact error in any of our testing. Do you have any additional information you could share about the Query methods you're using, particularly when your app first loads?