ssr: memory and cpu problem

[xsbchen]

Version

2.7.0

Reproduction link

https://github.com/vuejs/vue-hackernews-2.0

Steps to reproduce

1. git clone https://github.com/vuejs/vue-hackernews-2.0
2. npm i
3. add beforeRouteEnter event to src/views/CreateListView.js:

  beforeRouteEnter(to, from, next) {
    next((vm) => {
      console.log('before enter user view');
    });
  }

4. add console.log to vue-router.common.js line 2058:

function poll (
  cb, // somehow flow cannot infer this is a function
  instances,
  key,
  isValid
) {
  if (instances[key]) {
    cb(instances[key]);
  } else if (isValid()) {
    setTimeout(function () {
      console.log('vue-router poll');
      poll(cb, instances, key, isValid);
    }, 16);
  }
}

5. npm run dev
6. open http://127.0.0.1:8080/

What is expected?

memory can be gc collected

What is actually happening?

memory and cpu grow up, and it keeps printing vue-router poll

---

[Mart-Bogdan]

@xsbchen @tangyue0924
I just had simmilar issue, fixed it, by using runInNewContext: false in createBundleRenderer call, from server entry point (server.js)

https://ssr.vuejs.org/en/api.html#runinnewcontext

Without it. VueRouter's Mixin was added to Vue multiple times!

[xsbchen]

@Mart-Bogdan it seems that newest version had fixed this problm

[Mart-Bogdan]

@xsbchen I was at 3.0.1

[xsbchen]

@Mart-Bogdan how to reproduce？

[Mart-Bogdan]

in case of SSR

  return createBundleRenderer(bundle, Object.assign(options, {
    cache: LRU({
      max: 1000,
      maxAge: 1000 * 60 * 15
    }),
    basedir: resolve('./dist'),
    runInNewContext: true // HERE!!!!
  }))

I'm not user if it would reproduce on heackenews https://github.com/vuejs/vue-hackernews-2.0/
But I've good memory leak. Vue instance was same, and mixin was regeistered multiple times.

Perhaps bug of SSR team.

Just letting this info here, in case someone would have same bug, and find this post in Google.

Perhaps add some mention to disable context in readme, don't know :-)

[posva]

A boiled down repro instead of a whole app would help to identify the problem, thanks

[ryouaki]

I got the same issue, and no idea.........

[Mart-Bogdan]

@ryouaki
Have you tried disabling creation of new context each time on ssr?

[ryouaki]

no，this way chould fix this problem？ but，in my app ，i have a lot of request in one time from client side。if run in new context it will cost more cpu。
and i try fix by modify the code of axios。axios pr. this way fix this issue。but axios team no response。this can kill the block event.
i think the reason is not from axios。but this way help fix this issue。

[ryouaki]

@posva I think thie issue should be reopen. I got the reason of this issue.

This issue will appear only on ssr application. In my project ,I got this issue. I add beforeRouteEnter fouction on my Vue component which render on server side . and got Infinite loop with function poll.

[posva]

A boiled down repro instead of a whole app would help to identify the problem, thanks

if you have an infinite loop, it's probably next not being called without arguments

[ryouaki]

@posva You could do the change as above xsbchen did.

Before you open the page on your browser , you should disable your network first ,and then open the link http://localhost:8080/top, and then enable the network.

You will get infinite loop.

[Mart-Bogdan]

@ryouaki sorry for late reply.
I mean disable new context. By default it was creting cotexts, as a result higher CPU and ram issue, but less problems with Store.

I've disabled new context and all started working fine. I dunno if that's your case of issue.

[Mart-Bogdan]

my config in server.js

function createCustomRenderer (bundle, template) {
  // https://github.com/vuejs/vue/blob/dev/packages/vue-server-renderer/README.md#why-use-bundlerenderer
  return require('vue-server-renderer').createBundleRenderer(bundle, {
    runInNewContext: false, // recommended
    template,
    cache: require('lru-cache')({
      max: 1000,
      maxAge: 1000 * 60 * 15
    })
  })
}

[ryouaki]

@Mart-Bogdan currently， I had set runInNewContext to false before....... (T_T)

[ryouaki]

I have got the reason of this issues,

The poll will exit until beforeRouteEnter finished, but on nodejs, if the socket connect does not response ,and the library did not resolve or reject the error which socket hang on. the nodejs will still wait for that. so we should stop wait response when socket hang up and code ECONNRESET

and the poll will not be stop.....

I post a blog on juejin.im how to fixed this issue. but only chinese.

https://juejin.im/post/5b8d31d3f265da43594407e2

[Kingwl]

Hi @posva. long time no see.
I have the same feedback offline today (enter guard and poll), And IMO that is not correct behavior.

Could we break out the poll if the loading is failed?

[posva]

hey @Kingwl I will take a look if a boiled down repro is provided but just to make sure, isn't #2606 the issue you are looking for?

[Kingwl]

@posva I'm not 100% sure but they look very similar 🙋🏻‍♂️.

Seems the fix should be kind of simple, but maybe we need care about about the behavior after the breakout

[posva]

what do you mean with breakout?

[ryouaki]

what do you mean with breakout?

because this below:

The poll will exit until beforeRouteEnter finished, but on nodejs, if the socket connect does not response ,and the library did not resolve or reject the error which socket hang on. the nodejs will still wait for that. so we should stop wait response when socket hang up and code ECONNRESET

[Kingwl]

"stops the poll"😂

[ryouaki]

"stops the poll"😂

I do not think stop the poll can fix this issue, But it is true ,we should stop it at right time.

[Kingwl]

@ryouaki Maybe we should track at #2606 thread