Memory leak with V7.1.1

jcmakesense commented 3 years ago

Version

@nuxtjs/firebase: 7.1.1 firebase: 8.1.1 nuxt: 2.14.9

Hi !

I tried to update the module but I have a memory leak problem as soon as I switch to 7.1.1 that I don't have by staying in 6.1.1.

Steps to reproduce

Package.json

"dependencies": {
    "@nuxt/babel-preset-app": "^2.14.7",
    "@nuxt/components": "^1.0.7",
    "@nuxtjs/axios": "^5.12.2",
    "@nuxtjs/firebase": "^7.1.1",
    "@nuxtjs/prismic": "^1.2.4",
    "@nuxtjs/pwa": "^3.0.0-beta.20",
    "@nuxtjs/robots": "^2.4.2",
    "@nuxtjs/sitemap": "^2.4.0",
    "@nuxtjs/style-resources": "^1.0.0",
    "algoliasearch": "^4.3.0",
    "axios": "^0.21.0",
    "camelcase": "^6.0.0",
    "cookie-universal-nuxt": "^2.1.4",
    "core-js": "^2.6.11",
    "cors": "^2.8.5",
    "cross-env": "^5.2.0",
    "dayjs": "^1.8.29",
    "express": "^4.16.4",
    "firebase": "^8.1.1",
    "firebase-admin": "^8.13.0",
    "glob": "^7.1.6",
    "hot-formula-parser": "^3.0.2",
    "isomorphic-unfetch": "^3.0.0",
    "lodash.debounce": "^4.0.8",
    "lodash.groupby": "^4.6.0",
    "lodash.orderby": "^4.6.0",
    "lodash.sortby": "^4.7.0",
    "mime": "^2.4.6",
    "nuxt": "^2.0.0",
    "nuxt-i18n": "^6.12.2",
    "nuxt-lazy-load": "^1.2.4",
    "nuxt-matomo": "^1.2.3",
    "nuxt-stripe-module": "^2.1.0",
    "nuxt-svg-loader": "^1.2.0",
    "prismic-dom": "^2.2.4",
    "query-string": "^6.13.1",
    "redirect-ssl": "^2.0.0",
    "string-template": "^1.0.0",
    "uniqid": "^5.2.0",
    "vue-google-autocomplete": "^1.1.0",
    "vue-js-modal": "^2.0.0-rc.6",
    "vue-stripe-checkout": "^3.3.2",
    "vue-toasted": "^1.1.28",
    "vue2-google-maps": "^0.10.7",
    "vuefire": "^2.2.2",
    "vuelidate": "^0.7.5",
    "vuexfire": "^3.2.2",
    "whatwg-fetch": "^3.2.0"
  },
  "devDependencies": {
    "@nuxtjs/svg": "^0.1.11",
    "jsdoc-loader": "0.0.2",
    "node-sass": "^4.14.1",
    "nodemon": "^1.18.9",
    "path": "^0.12.7",
    "sass-loader": "^8.0.2"
  }

What is actually happening?

With each new nuxt request, the memory does not seem to be emptied, which gradually leads to a server crash.

For example memory profile after 30 requests : Image of Yaktocat

Do you have any idea of an incompatibility with another module?

Thank you for everything ! JC

lupas commented 3 years ago

Hey @jcmakesense

I am not aware of any incompatibility leading to memory leaks... I'll keep my eye open to see if I can spot similar behaviour, but that will probably be hard to reproduce.

If you happen to be able to pinpoint which module leads to the memory leak or create a minimal example on codesandbox where the memory leak happens I could do further investigations.

One question though: You are analyzing the browsers (client) memory but taking about a server crash - are you sure the browsers memory accumulating is leading to a server crash? That seems a bit weird to me. Do you mean that the browser crashes?

If so - can you also share how your nuxt app is configured?

br, Pascal

BobbieGoede commented 3 years ago

I am experiencing a memory leak as well, haven't used 6.1.1 myself, using 7.1.1. @lupas I think @jcmakesense is inspecting the node process using chrome, I am seeing the same increase in memory usage as requests come and go.

The leak does cause nuxt to crash on the server side. At the moment I am only using the auth module, let me know if I can provide more details.

jcmakesense commented 3 years ago

this is exactly that @BobbieGoed, I inspect the node process from chrome via --inspect at the time of the start server.

I have the same behavior with the auth / firestore and storage modules enabled.

impossible for me to migrate for the moment the server crash regularly with this new version.

BobbieGoede commented 3 years ago

I created an empty project using

nuxt 2.14.6
firebase 8.2.1
@nuxtjs/firebase 7.1.2

It looks like memory usage keeps going up when either a mutation or action is set in the services.auth.initialize object. The following is enough to make the memory increase with each request.

services: {
    auth: {
        initialize: {
            onAuthStateChangedMutation: "ON_AUTH_STATE_CHANGED_MUTATION"
        }
    }
}

When just using auth: true there is no memory issue. Seems like the issue is related to vuex?

BobbieGoede commented 3 years ago

By setting subscribeManually: true and using a client side plugin to subscribe I am not experiencing the issue. Maybe this workaround could work for you as well @jcmakesense?

Note that the issue persists if plugin mode is unset or set to "server".

// nuxt.config.js
plugins: [{ src: "~/plugins/authSubscribe.js", mode: "client" }],

// authSubscribe.js
export default async context => {
  context.$fireAuthStore.subscribe();
};

lupas commented 3 years ago

Hey guys

Thank you all for the investigations so far - this is indeed an issue in the module that needs to be be addressed.

In the auth-plugin setup by this module we setup an onAuthStateChanged listener that listens for the auth state to change. This should only be done on client side. However it seems like we do this also on the server side since v7.0.0 - which creates a new listener for every new page visit -> memory leak.

@BobbieGoede Your subscribe mode "client" solution pointed straight towards the issue, thanks for the tip!

Will find a way to fix it asap and let you know - good catch guys.

lupas commented 3 years ago

Hey guys

Should be fixed with v7.2.2. Let me know if all is good & if the issue still persists feel free to re-open this issue.

Thanks for the investigations - appreciate it!

Have a wonderful Christmas! Pascal

nuxt-community / firebase-module