Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Memory Leak with Vuex store

See original GitHub issue

Hello guys, I have a problem with ssr

I receive data in vuex on the server in advance from the api and give the ready html to the user. To store data I use vuex and get data in serverPrefetch. Everything works fine, as time passes on production, errors of such a plan appear

<--- Last few GCs --->

[24:0x561eb1912cc0] 19808637 ms: Scavenge 486.7 (490.7) -> 486.7 (490.9) MB, 93.5 / 0.0 ms  (average mu = 0.313, current mu = 0.230) allocation failure
[24:0x561eb1912cc0] 19809941 ms: Mark-sweep 487.2 (491.5) -> 484.5 (490.3) MB, 1302.7 / 0.0 ms  (+ 46.1 ms in 10 steps since start of marking, biggest step 21.6 ms, walltime since start of marking 1599 ms) (average mu = 0.330, current mu = 0.348) allocati

<--- JS stacktrace --->

==== JS stack trace =========================================

    0: ExitFrame [pc: 0x561eafc37b39]
Security context: 0x19a07d6c08d1 <JSObject>
    1: add [0x19a07d6d4509](this=0x12e575cf05c1 <Set map = 0x2f02599c2509>,0x259a14a09bf1 <JSFunction reactiveEffect (sfi = 0x3767de807db1)>)
    2: /* anonymous */(aka /* anonymous */) [0x12e575cf0619] [/usr/src/app/node_modules/@vue/reactivity/dist/reactivity.cjs.prod.js:~113] [pc=0x6023cc12637](this=0x236589ac04b1 <undefined>,0x259a14a09bf1 <JSFunction re...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! ads-client@0.0.0 server:prod: `cross-env --max_old_space_size=8192 NODE_ENV=production node ./server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the ads-client@0.0.0 server:prod script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2021-06-04T02_17_19_362Z-debug.log

Please help me figure it out, it seems that Vieks caches and when you receive other data, the previous ones are saved and, accordingly, the memory is full

serverPrefetch() {
    this.setHi()
}

import { renderToString } from '@vue/server-renderer'
import { html } from 'vite-plugin-ssr'
import { createApp } from '../src/main'
import meta from './meta'

export { render }
export { addContextProps }
export { setPageProps }

async function render({ contextProps }) {
  const { appHtml, INITIAL_STATE } = contextProps
  let metaTag = null
  metaTag = meta(contextProps)

  return html`<!DOCTYPE html>
    <html lang="ru">
      <head>
        <title>${metaTag ? metaTag.title : ''}</title>
        <link href="/loading.min.css" rel="stylesheet">
        <link rel="icon" type="image/ico" href="/favicon.ico">
        <meta name="msapplication-TileColor" content="#da532c">
        <meta name="theme-color" content="#ffffff">
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=5.0">
        <link rel="canonical" href="${metaTag.canonical}" />
        <meta name="description" content="${metaTag ? metaTag.description : ''}" />
        <meta name="keywords" content="${metaTag ? metaTag.keywords : ''}">
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
        <style>*{font-family: 'Nunito', 'Arial', sans-serif;}</style>
      </head>
      <body>
        <div id="app">${html.dangerouslySetHtml(appHtml)}</div>
      </body>
    </html>`
}

async function addContextProps({ Page, contextProps }) {
  const { app, store, router } = createApp({ Page })

  router.push(contextProps.url)
  await router.isReady()

  app.provide('contextProps', contextProps)

  const appHtml = await renderToString(app)

  const INITIAL_STATE = store.state

  return {
    INITIAL_STATE,
    appHtml
  }
}

function setPageProps({ contextProps }) {
  const { INITIAL_STATE } = contextProps
  return { INITIAL_STATE }
}

Issue Analytics

State:
Created 2 years ago
Comments:7 (4 by maintainers)

Top GitHub Comments

2reactions

brilloutcommented, Jun 5, 2021

Shouldn’t const store = createStore() be called anew for each page request?

0reactions

brilloutcommented, Jun 5, 2021

No worries 😃, there is a vite-plugin-ssr discord chat btw.

Top Results From Across the Web

Vuex - Memory Leak/ JS heap size when polling a big chunk ...

There are multiple store modules I have at the root and every 5 seconds, I pull a big chunk of data and push...

Memory leak on a trivial app · Issue #1934 · vuejs/vuex - GitHub

If I'm reading this right, it seems the memory leak is caused by Vue Devtools chrome extension retaining a reference to the array....

Avoiding Memory Leaks - Vue.js

Memory leaks in Vue applications do not typically come from Vue itself, rather they can happen when incorporating other libraries into an application....

Vuex - Memory Leak/ JS heap size when polling a big chunk ...

Coding example for the question Vuex - Memory Leak/ JS heap size when polling a big chunk of data in every 5 seconds-Vue.js....

vue-avoiding-memory-leak-example - CodePen

To see the memory leak occur, open the Chrome Task Manager and then click the hide/show button 50 or so times. You should...