Hacker News Reader

Comment by ramraj07 | Hacker News Reader

I used vue for a project and encountered a gnarly bug - I have a component which can embed itself recursively, and I pass some variables through the stack to communicate to the root. But if I nest 3 components deep, it actually hangs the tab and crashes chrome! Can’t even debug! Not sure how to even recreate it in a way that’s not proprietary and hence can’t file a bug as well.

View on HN

I'd be interested in seeing your code for this. I'm 99% certain it's something in your code rather than in Vue itself. I've done recursive nesting myself plenty of times and as long as you limit the depth so it doesn't go infinite you're fine.

Absolutely sure I’m doing something wrong but why would vue allow any case that hangs the entire tab? I’ve never seen that in any website ever!

Are you expecting vue to prevent you from doing something wrong?

Imagine if you write a java program and you execute it to get BSOD on windows, is that reasonable?

I've written C# code that deadlocked a webserver, C++ code that crashed a computer lab, JavaScript code that made the browser unresponsive, a SQL migration that accidentally deleted too much data. I don't really know what point you're trying to make, but bad code typically behaves badly.

You can write a program that locks up your computer in most any language, it's called a fork bomb. Of course, there are guards against the most basic versions these days, but the point still stands that there's nothing stopping you from writing an endless loop that takes up more and more resources.

You can open the browser dev tools on this very page, write in `while(1);`, hit enter and watch the tab freeze up.

In that case you should blame Windows not Java.

Correct. And in this case, Chrome seems to be working as intended. Crashing the tab when bad code is written sounds like the correct behavior.

If it could help, I have a demo project that has recursive components (comments) [1]. It can be seen in action on GitHub Pages [2].

The only issue I encountered is that recursive components must be named since they can't import themselves. This is covered in the official Vue docs [3]

[1] https://github.com/AlbinoDrought/vue-dit/blob/master/src/com...

[2] https://albinodrought.github.io/vue-dit/#/sub/technology/uom...

[3] https://v2.vuejs.org/v2/guide/components-edge-cases.html#Rec...

That sounds like a bug in your code, honestly. Recursive components have been around in Vue since 0.x and they're used in many, many projects.

Why can’t you debug?

Because it doesn’t throw an error, and it hands deep inside the vue code when an even to add one more nested component is triggered.

Maybe try console logging?

But what if the component is a recursively nested logging tool?

They might even become part of the next YC batch. A recursively nested logging platform - quite a novel idea. Possibly even possible to patent.

iirc Chrome sometimes handles stack-overflows and/or out of memory conditions badly. If you have any function there that is called try making an entry/exit counter and log/throw if it goes above some threshold.

Why not just debug on component creation? Or maybe on DOM subtree modification [0]? Or maybe modify the compiled JS to add log or trace statements?

It’s all in your browser. You have a debugger at your fingertips.

Why doesn’t Vue stop this from happening? Because it assumes whatever you’re telling it to do is what you want it to do.

0: https://developer.chrome.com/docs/devtools/javascript/breakp...

Reply on news.ycombinator.com