search

vuejs / devtools-v6

⚙️ Browser devtools extension for debugging Vue.js applications.
https://devtools-v6.vuejs.org/
MIT License
24.62k stars 4.15k forks source link

Vuex records mutations despite recording being disabled #1003

Open senritsu opened 5 years ago

senritsu commented 5 years ago

Version

5.1.0

Browser and OS info

Chrome 74 / Windows 10

Steps to reproduce

What is expected?

No mutations are being recorded.

What is actually happening?

Recording is still disabled (grey circle), but mutations are being recorded and state snapshots are made.

Turning it on and off again works (yes, really). No mutations are being recorded afterwards.

The issue is exacerbated by the fact that with recording happening our application instantly crashes due to out of memory exception, since the initial mutations when lots of data is being fetched and the UI is constructed, combined with the whole (huge) state being snapshotted every time, are enough to nuke the page. Fortunately i can work around it at the moment by refreshing the page on a different route with less stuff going on, open devtools, turn on and off mutation recording, and then go to the actual route i am working on. Still very annoying.

senritsu commented 5 years ago

To provide some additional info, after scanning the sources i checked the corresponding local storage key when inspecting the dev tools via localStorage.getItem('shared-data:recordVuex') and got "false" both before reloading the page (when mutations were correctly paused) and after (when it displayed as paused, but did actually record).

When cycling the setting in the devtools, on enable the localStorage value correctly changed to "true" and on disabled it changed back to "false".

So it seems the persistence mechanism works just fine (at least the persisted value is always correct), but the initialization of the devtools does not correctly pull the persisted value into the application state.

Seeing as the component (correctly according to localStorage) displays recording as off after reload, at the very least the UI has the correct persisted state, so there might be a discrepancy between $sharedState used for the UI and whatever the bridge uses to actually handle the vuex events. Will investigate further when i find the time.

senritsu commented 5 years ago

Made a recording of a quick reproduction of the issue with a fresh @vue/cli scaffolded project (default settings plus vuex) using a simple increment mutation driving a state-based counter.

https://gfycat.com/madhollowhawk

I reload the page using ctrl-r in the beginning (can be seen when the devtools flash and recording log resets), afterwards mutations are still recording despite the recording button being disabled. Enable/Disable cycle fixes the issue.