3 ms·

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 co

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.

__ryan__ 4y ago
Why can’t you debug?
- ramraj07 4y ago
  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.
  - skybrian 4y ago
    Maybe try console logging?
    - aabhay 4y ago
      But what if the component is a recursively nested logging tool?
      - sgt 4y ago
        They might even become part of the next YC batch. A recursively nested logging platform - quite a novel idea. Possibly even possible to patent.
  - whizzter 4y ago
    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.
  - __ryan__ 4y ago
    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/breakpoints/#dom https://developer.chrome.com/docs/devtools/javascript/breakp...
Etheryte 4y ago
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.
pmx 4y ago
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.
- ramraj07 4y ago
  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!
  - DJBunnies 4y ago
    Are you expecting vue to prevent you from doing something wrong?
    - ramraj07 4y ago
      Imagine if you write a java program and you execute it to get BSOD on windows, is that reasonable?
      - badthingfactory 4y ago
        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.
      - Etheryte 4y ago
        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.
      - 4y ago
AlbinoDrought 4y ago
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/components/Comment.vue#L14 https://github.com/AlbinoDrought/vue-dit/blob/master/src/com... [2] https://albinodrought.github.io/vue-dit/#/sub/technology/uombzo https://albinodrought.github.io/vue-dit/#/sub/technology/uom... [3] https://v2.vuejs.org/v2/guide/components-edge-cases.html#Recursive-Components https://v2.vuejs.org/v2/guide/components-edge-cases.html#Rec...

__ryan__ 4y ago

Why can’t you debug?

ramraj07 4y ago
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.
- skybrian 4y ago
  Maybe try console logging?
  - aabhay 4y ago
    But what if the component is a recursively nested logging tool?
    - sgt 4y ago
      They might even become part of the next YC batch. A recursively nested logging platform - quite a novel idea. Possibly even possible to patent.
- whizzter 4y ago
  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.
- __ryan__ 4y ago
  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/breakpoints/#dom https://developer.chrome.com/docs/devtools/javascript/breakp...

Etheryte 4y ago

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.

pmx 4y ago

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.

ramraj07 4y ago
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!
- DJBunnies 4y ago
  Are you expecting vue to prevent you from doing something wrong?
  - ramraj07 4y ago
    Imagine if you write a java program and you execute it to get BSOD on windows, is that reasonable?
    - badthingfactory 4y ago
      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.
    - Etheryte 4y ago
      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.
    - 4y ago

AlbinoDrought 4y ago

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/components/Comment.vue#L14 https://github.com/AlbinoDrought/vue-dit/blob/master/src/com... [2] https://albinodrought.github.io/vue-dit/#/sub/technology/uombzo https://albinodrought.github.io/vue-dit/#/sub/technology/uom... [3] https://v2.vuejs.org/v2/guide/components-edge-cases.html#Recursive-Components https://v2.vuejs.org/v2/guide/components-edge-cases.html#Rec...