Error Maximum call stack size exceeded when using vue.js devtools

[dxvladislavvolkov]

Version

2.6.11

Reproduction link

https://github.com/dxvladislavvolkov/vue-eventbus

Steps to reproduce

1. Clone the repo
2. Open a project and run 'npm i'
3. Then 'npm run serve'
4. Open the project in a browser and then open dev-tools
5. Click on the Vue tab to detect components
6. Click on the checkbox in the project

You will see an error You can see how to get the error here

What is expected?

An app without the error

What is actually happening?

I get the error

[posva]

@dxvladislavvolkov transferred to the correct repository

[nilsriga]

Hello!

I have had this issue for almost a year now.. I got the codebase from another developer.

I've been trying on and off for many times to get the vue-devtools to work on that codebase with no success.

It's the same on Firefox and Chrome.

The issue is:

1. I load the single page app (irregardless if it is in production, production with Vue.config.debug = true, or hot reload).

2. I open browser devtools. If it's in production I see from 300-1000 notifications that vue-devtools are detected.

3. I go to the vue-devtools tab, and after the vue logo loads, both firefox and chrome freeze.. (I can press "Stop Script" notification, but it still is frozen) But if I don't press it, eventually I see the virtual dom.. I scroll to the bottom, the list goes blank, all I see is "Base State" list item.. and it freezes again.

4. If instead I go to vuex tab, in production it says there is no vuex state detected. If it's in hot reload I see the vuex state. But if I click on something everything freezes again.

• if I am in hot reaload, I press on the vue tab, I let it load, and then go to firefox "Memory" tab and take a snapshop without the callstack. Then press a button in my project's UI. And then take another memory snapshot. It eventually loads and the full memory size used has increased from ~50MB to 350MB. And the object count from ~30'000 to over 1 million.

I would really appreciate your help, because vue-devtools are the only way I know how to debug the state of vue.

Would some logs help?

Project dependencies:

Firefox vue-devtools version:

Chrome vue-devtools version:

Chrome task manager for the said project:

[nilsriga]

Any idea how to fix this?

[tremendus]

I have seen this type of experience several times before. That is what I learned - usually it relates to a getter in Vuex or a computed property which on the page you may not be calling ... but when you open devtools, all computed properties + vuex getters are computed and so, if you have flaw in your logic (eg where computed properties or getters depend on each other) which would create an infinite loop, then everything grinds to a halt. Suggest going through all your computed properties and vuex getters and making sure that such an infinitate loop or infinitely recursing callback dependency chain doesn't exist.

[xyj404]

I have same question. I get two errors [Hook] Error in event handler for vuex:mutation with args: and Maximum call stack size exceeded when I have mutation operation in vuex store. It's ok in old version devtools but get error when auto upgrade new version.

[cain]

When opening devtools i get the same as @xyj404 (over 500 times 😭 ) Chrome: 101.0.4951.64 (Official Build) (arm64) Vue devtools: 6.1.4

[Hook] Error in event handler for vuex:mutation with args: (2) [{…}, {…}]
VM114:1 RangeError: Maximum call stack size exceeded

[dennis-damico]

When opening devtools i get the same as @xyj404 (over 500 times 😭 ) Chrome: 101.0.4951.64 (Official Build) (arm64) Vue devtools: 6.1.4

[Hook] Error in event handler for vuex:mutation with args: (2) [{…}, {…}]
VM114:1 RangeError: Maximum call stack size exceeded

I was having the exact same issue as you. Installing the 5.x.x version of the extension here (instead of 6.x.x) solved the problem for me! (FYI the docs mention downloading this here so it's not just some random legacy version someone put up).

[cain]

@dennis-damico thank you! I think i might stick with v6 as nothing is breaking but its filling my console up. I find v6 a lot faster and easier to use. So hopefully there's a solution or we can find out whats causing this...

[cain]

@tremendus thanks for the info. Do you know if there's any nice easy way of tracking which of these computed properties or getters is causing the issue? We have a bigger codebase and its a nightmare going through component by component. Much appreciated

I have seen this type of experience several times before. That is what I learned - usually it relates to a getter in Vuex or a computed property which on the page you may not be calling ... but when you open devtools, all computed properties + vuex getters are computed and so, if you have flaw in your logic (eg where computed properties or getters depend on each other) which would create an infinite loop, then everything grinds to a halt. Suggest going through all your computed properties and vuex getters and making sure that such an infinitate loop or infinitely recursing callback dependency chain doesn't exist.

[dennis-damico]

@cain For me, I think the issue ended up being that my vuex store was circular (figured this out when trying to JSON.stringify(this.$store.state), which results in an error when using a circular object). If that's your issue, you can pretty quickly determine where your circular references are and fix them.

[cain]

@dennis-damico thanks for the help, JSON.stringify(this.$store.state) works fine for me (just tried inside a mounted method).

Im on nuxt 2 (vue 2), I think we just have a heap of computed getters calling each other, which creates these loops when the devtools is open

[jiujiubanban]

waiting for an answer

[xjx0106]

Same with such issue...

[a-bashtannik]

Cmon guys, I'm tired of infinite reports triggered by our frontend developer using devtools 😀😀

[cain]

Can confirm its due to v6 version as @dennis-damico said.

Any idea how we can fix this, am currently looking at the codebase to see a fix? Would love some help if anyone is keen

[tremendus]

@cain I don't know of any other way you can track circular dependencies other than like you say, open the components and stores and work the problem. If you always name consistently, perhaps you might try searching your code base for import {x} from 'store' or store.x references using strings or regexes to help narrow the problem ... but I don't know of any quick fix. I'm certain that a circular dependency is the problem though.

[ShetlandJ]

Hello, I know that this solution will not work for everyone who has encountered this problem, but along with this [Hook] error, I was receiving a 'cloneArrayDeep' error, and it turns out it was related.

I stuck a console log in the offending line, and noticed it was all one store that was causing the problem. Upon further investigation, I realised that it was due to the API call containing duplicate entries. We use JSON-API for out endpoints, which uses this kind of structure:

data: [
    { id: 123, ...}
], 
included: [
    { id: 123, ....}
]

And the problem was caused because the data and included array contained the same elements, so it got caught in this weird insert loop.

[SchDen]

The same problem when the dev tools is open:

[WebGamer]

I have same question. I get two errors [Hook] Error in event handler for vuex:mutation with args: and Maximum call stack size exceeded when I have mutation operation in vuex store. It's ok in old version devtools but get error when auto upgrade new version.

At present, such problems still occur.

[WebGamer]

When opening devtools i get the same as @xyj404 (over 500 times 😭 )

Chrome: 101.0.4951.64 (Official Build) (arm64)

Vue devtools: 6.1.4

[Hook] Error in event handler for vuex:mutation with args: (2) [{…}, {…}]

VM114:1 RangeError: Maximum call stack size exceeded

Have you solved this problem?

[WebGamer]

In fact, I'm changing some code heritage and can't find out the problems in the code. I hope to find the answer here.

[cain]

When opening devtools i get the same as @xyj404 (over 500 times 😭 ) Chrome: 101.0.4951.64 (Official Build) (arm64) Vue devtools: 6.1.4

[Hook] Error in event handler for vuex:mutation with args: (2) [{…}, {…}]

VM114:1 RangeError: Maximum call stack size exceeded

Have you solved this problem?

Nope no fix for me @WebGamer

[akashcheev]

Still having the same problem and there is no cyclic links in my objects. Is shown only when Vue Dev Tools extention is on

[zhuziyi1989]

system environment: macOS × Chrome 127.0.6533.100 (arm64) development tools: Vue.js devtools (beta) 7.0.0 beta 4，

When I open the Pinia option in the Vue.js devtools tool, the web page will be stuck and there will be a stack overflow error (as shown in the figure,Maximum call stack size exceeded). When I delete the code in Pinia getters, it will return to normal. (Please note that when I do not turn on the Pinia option in the Vue.js Devtools tool, the application will not report errors and everything is fine!)

The analysis may be caused by some code flaws in Pinia in the tool that cause infinite endless loops.