allow devtool integration with SSR Vuex events

[gplusdotgr]

Committing mutations within a fetch() hook results in the mutation not logged in the Vue/Vuex dev tools. The state is properly updated, the content is there, but the mutation isn't logged in the dev tools. I assume this is because its SSRed, but I wanted to see if there's workarounds, if this is intended behaviour, and above all, if doing Vuex stuff inside fetch() is the recommended practice.

reproduction URL: https://5m5uq.sse.codesandbox.io/ (open dev tools)

[thidzz]

I'm having the same issue. I use fetch A LOT to mutate vuex but lately i'm facing this message when trying to dispatch in the fetch hook:

"The resource http://localhost:3000/_nuxt/app.0043415e1c0868179964.hot-update.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally."

When I try the same operation in mounted hook, I get my mutation normally.

[gplusdotgr]

I'd like to add to the issue above that adding a breakpoint to any server-side HTTP request (for example an Axios GET inside a component or a page in fetch() or asyncData() doesn't cause the breakpoint to trigger. I'm assuming one needs to bind to a different port to debug the Server Side requests/code. I tried 9229 and 3000 so far, none of them worked.

[danielroe]

@gkatsanos This is working as intended. See https://codesandbox.io/s/awesome-chaplygin-4n9wl?file=/pages/index.vue for an example. You shouldn't expect to see logs in your devtools for actions carried out on server, although that might be worth a feature request as I think it might be possible to implement if you thought it would be particularly valuable.

[gplusdotgr]

One of the main advantages of using a state management store is time travel debugging via the dev tools. Therefore I think it's essential. We had several cases where there were server side request issues and we were unable to debug them. (no way to see what's happening, with step debugging being a challenge to implement and mutations not logged..)

[atinux]

I think this is mostly a feature for the Vue Devtools to support SSR, since Nuxt is not the only framework doing SSR for Vue. Would love to have @akryum take on this :)

[gplusdotgr]

I think I'd go back and classify this as a bug-report of the docs. Working in a universal JS app does give the developer the impression that all code that lives in components will behave similarly. There is no specific mention in the documentation, and specifically in https://nuxtjs.org/docs/2.x/features/data-fetching/ about how there's no client-side logging of mutations inside asyncData or fetch. I'd set this issue together with an overall Debugging How-To document that goes into client-side debugging / server-side debugging as well.

[atinux]

Thank you for your feedback @gkatsanos

If you see how the documentation could be improved, I highly suggest to open a draft PR, as maintainers, we often miss some opportunities to improve the documentation.

[gplusdotgr]

Gladly!, but before making a documentation PR I'd be need to have a pretty good understanding of how this works, which is not the case currently (hence my original github issue). If you can confirm my assumptions below, I'll gladly make the doc PR :) Is the sentence below factual? :

"Client-side logging and Vuex debugging is currently not possible in code that runs within the asyncData() and fetch() hooks because the browser environment doesn't have access to them. (they run server-side)"

[pi0]

Vuex in addition to devtool plugin has a Built-in Logger Plugin (src) we can register it when making store that also logs ssr/fetch. (see demo and sandbox). It might be also possible to do via a nuxt plugin or reusable nuxt module. Also custom logger is possible via store.subscribe

Moving issue to docs since functionality already possible by vuex but example would be nice in docs :)

[gplusdotgr]

@pi0 hey ! any news on how to do this quickly and painlessly? btw I opened your demo link and nothing is logged on Vuex/Mutations.

[danielroe]

@gkatsanos Seems to be working for me.

[gplusdotgr]

it didnt appear on the Devtools Vuex tab...

[gplusdotgr]

Hello to everyone, is there some update on this one in terms of Nuxt 3 / Documentation? still not possible to see Mutations on SSR with Vue Dev tools. Even just a bulletpoint list of steps to follow in order to achieve it would be enough/cool ! thank you in advance

[gplusdotgr]

PS: what I tried:

1. into one vuex module
2. imported import { createLogger } from 'vuex'
3. exported export const plugins = [createLogger()]
4. added commit(MUTATIONS.SET_FAVOURITES_COUNT, count, { ssr: process.server }) to one of the commits