Vue-devtools: Extension crashes when a large number of events

[anisart]

I use Vue 2.5.3 vith Mapbox GL component in Chrome 61.0.3163.100. This component sends all events from map (map-mousemove, map-mousedrag, etc.) and if devtools is recording events then map starts to lag and devtools after a while crashes.

[posva]

Hey, can you boil down the error and provide a repro using this template or providing a simple HTML page?
Thanks!

[aguingand]

I've encounter the same issue with Vue2Leaflet. I guess the size of event objects increases very fast and eats Chrome memory. Seems to appear in Vue maps libs because all events are recorded like 'mousemove', 'zoom', 'tileload', etc...
Here is a repro, or even the official library demo
Workaround for me was to reset the $emit method of Maps components with Vue.prototype one on runtime to prevent DevTools recording, which seems dirty ...

I don't know how this bug could be resolved, maybe debounce when a huge amount of the same event is emitted during a short time period ?

[posva]

Thanks for the repro!
it looks like it's emitting too many events, the solution is to stop recording them if you don't need it (that's why you can stop recording them)

[fnoop]

Seeing the same thing with openlayers (vue-layers). vue-devtools hangs and crashes within seconds to a minute or two and needs a restart of the entire browser (chrome 65) to recover. I do get that a lot of events are fired by these mapping tools but devtools should be able to cope without crashing. Perhaps some kind of filtering or auto throttling?

[heygambo]

that's why you can stop recording them

@posva how can you stop recording certain events when the app loads?

[awulkan]

Also experiencing this with MapBox GL. I'm limiting the events to be sent 2 times per second at most, but already after the first 3 events the whole devtools extension stops responding and eventually crashes after trying to display a few more events.

This only happens if I'm watching the events, otherwise it works fine.

[Akryum]

This should be fixed on dev.

[awulkan]

@Akryum Awesome, and thanks for the fast response.
I'll wait for the release and then check it out.

[ethan-deng]

It is not fixed for the current version "4.1.5 beta".

[awulkan]

@ethan-deng Ye, this is a bit confusing to me. I don't understand why they never released the non-beta 4.1.5 version. Or at least the Chrome webstore says "4.1.5 beta".

[Akryum]

4.1.5 is the stable release which had a typo in the chrome manifest version name. 🐈

[awulkan]

@Akryum If that's the case then events still has serious performance problems for me.

It crashes in all of my Vue applications if I start recording events.
The image shows the result of sending about 10 events with pretty low amount of data, just an integer.

This is in the latest Chrome version on a PC with an i7 8700k and 16GB of RAM, so it's not a slow PC at all.

[fnoop]

Yes unfortunately that's the case for me as well - Chrome on MacOS. I've got it permanently disabled because it grinds to a halt and hangs on any page that I'm developing on a vue/vue-apollo app. I suspect it's because vue-apollo continuously generates events for graphql subscriptions and the devtools can't cope with it.

[Akryum]

Did you try 5.x beta?

[ethan-deng]

For 5.x beta installation, I got "Vue.js devtools (extension ID "ljjemllljcmogpfapbkkighbhhppjdbg") is blocked by the administrator. "

[fnoop]

@Akryum Yes same problem with 5.0.0beta3, it hangs as soon as the page loads and crashes shortly after

[Akryum]

We would need a reproduction at this point.

[3zzy]

@Akryum Having the same issue using https://github.com/phegman/vue-mapbox-gl. Just using it as-is without any changes cause devtools to crash, however, if I remove the emits it doesn't crash.