Nuxt.js: 504 Gateway Time-out because nuxt app is hanging

[kalenjordan]

Version

v2.4.0

Reproduction link

Backend:
https://github.com/kalenjordan/pros.global

Frontend:
https://github.com/kalenjordan/nuxt-test

Steps to reproduce

It's happening right now on my app, but I will probably restart the app shortly so that it's functional again. It seems to happen every 2 to 8 hours, and I'm not sure why, but the app simply stops responding.

Going to https://pros.global/ gives a 504 Gateway Time-out from nginx. If I access the nuxt app directly by going to http://pros.global:3000, it simply hangs forever.

What is expected ?

The nuxt app would respond with something, at least an error message of some kind.

What is actually happening?

There is no response from the Nuxt app, it just hangs forever, causing nginx to 504 timeout.

Additional comments?

Also there isn't anything being logged into sentry. This seems to be correlated with the axios 500 error that I posted about here: https://cmty.app/nuxt/nuxt.js/issues/c8707

_{This bug report is available on Nuxt community (#c8708)}

[manniL]

@kalenjordan That reason could be anything. As there is no frontend code in your repo one could only guess what's wrong.

[kalenjordan]

@manniL sorry about that - I just updated the ticket with the link to the frontend code - https://github.com/kalenjordan/nuxt-test

[Atinux]

Hi!

Could we reproduce this issue by calling the production serveur? (Pros.global)

So we could reproduce this bug on localhost without running the Api server.

[pimlie]

Doesnt this code trigger a memory leak in ssr? https://github.com/kalenjordan/nuxt-test/blob/master/plugins/vue-inject.js

Probably you should add an if statement to only set values on Vue's prototype if they dont exist yet (eg first time it runs).

[kalenjordan]

Nice thanks @pimlie! I'll check that. Is there a way to monitor memory usage in general?

[Atinux]

It’s plan to be integrated soon ☺️

[kalenjordan]

@pimlie I think I'm already doing it as per the docs though?
https://nuxtjs.org/guide/plugins/#inject-into-vue-instances

[pimlie]

Yeah, actually I was trying to trigger a memory leak with your code this morning and couldnt trigger it. So I guess the answer to my question is _No, it doesnt_ ;)

[sonnh58]

Same issue v2.4.5. Node server increases ram when have requests then hangs forever

[manniL]

@sonnh58 this is caused by a memory leak in userland code.

[lichunshan]

my code return error Error: Request failed with status code 504, when use npm run dev sometime。
And I find that nuxtServerInit runs many times all the time, and this problem only occurs in development mode.I want to know why？

[manniL]

Closing here as it's a userland issue.

If someone can verify it's not, feel free to ping me here.

[zinwalin]

hard to debug it .

[sonnh58]

hard to debug it .

check your plugins
dont wrap Vue.use() or Vue.mixin() in function

[oluomotoso]

@kalenjordan , were you able to resolve this issue? I'm currently faced with the same issue. Works well in SPA mode but hangs and timeout on universal refresh. Kindly guide if you were able to fix this earlier

[kalenjordan]

No I wasn't :(

On Mon, Jul 6, 2020 at 3:41 PM Olumide Omotoso [e-mail]
wrote:

@kalenjordan https://github.com/kalenjordan , were you able to resolve
this issue? I'm currently faced with the same issue. Works well in SPA mode
but hangs and timeout on universal refresh. Kindly guide if you were able
to fix this earlier

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/nuxt/nuxt.js/issues/5090#issuecomment-654454476, or
unsubscribe
https://github.com/notifications/unsubscribe-auth/AALYQNIYGL5NLJFHOVYGSYTR2IZG5ANCNFSM4GZB5HSQ
.

--
Kalen
[email protected]

[DengSihan]

For me，use customed router will cause this issue.

Nuxt v2.14.6

nuxt.config.js

    buildModules: [
        '@nuxtjs/router'
    ],

router.js

import Vue from 'vue';
import VueRouter from 'vue-router';

/****** remove this can avoid 504 time-out*******/
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err);
}
/*****************************************/

Vue.use(VueRouter);

const page = path => () => import(`~/pages/${path}`).then(m => m.default || m);
const routes = [
    {
        path: '/',
        name: 'index',
        component: page('index.vue')
    }
];

export function createRouter(){
    return new VueRouter({
        routes,
        mode: 'history'
    });
}