onMounted triggering twice? (WebSocket establishing issues)
Hey everyone, long time Nuxter, first time writing in the Nuxt Discord.
I've come across a very interesting bug in a Nuxt app I'm making:
If I attempt to create a WebSocket connection in the
onMounted() hook, it's actually triggered twice and it fires the WebSocket creation twice.
It's causing a very interesting race condition that prevents the WebSocket from establishing consistently.
Watching a WireShark trace to the WebSocket server shows that it communicates to the server to initialise a connection, then immediately closes it and then attempts to re-create it when it the page silently reloads.
I've only been able to isolate the issue of the Websocket refusing to establish mainly to Safari on macOS and iOS, but Chrome and Firefox do send close signals to the WebSocket server, but manage to connect.
Refreshing the page within a second allows the WebSocket to connect successfully (Safari)
I have a repo where I can get it to occur, but it happens more consistently if the WebSocket server is external (not Nitro)
This issue appeared a couple of months ago for me, but I only tracked down what was going today.
Anyone have any pointers for me? Or should I possibly make a GitHub issue for it?3 Replies
Hi @sebbykaz. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the knowledge sources provided, there is no explicit documentation or issue directly describing
There is no direct mention in the knowledge sources of
onMounted being triggered twice in Nuxt, nor a specific mention of WebSocket connection issues caused by this behavior. However, there are some related insights and best practices that may help you troubleshoot and decide on next steps:
1. Hydration and Lifecycle: Nuxt's hydration process can sometimes cause unexpected client-side behavior if there is a mismatch between server and client state, or if certain hooks are triggered in ways you don't expect. The documentation emphasizes the importance of ensuring consistency between server and client data, especially during hydration. If your WebSocket connection logic is in onMounted, and hydration is somehow being retriggered (e.g., due to a page reload or hot module replacement in dev mode), this could explain the double connection attempt. This is especially plausible if you see different behavior across browsers, as hydration and lifecycle nuances can vary slightly between them. See more about hydration and lifecycle in the Nuxt docs: Nuxt Lifecycle: Mount Vue Application and Hydration<source>https://nuxt.com/docs/4.x/guide/concepts/nuxt-lifecycle#step-3-execute-nuxt-app-middleware</source.>
2. Browser-Specific Issues: Your observation that Safari is more affected aligns with some known quirks in how Safari handles reloads and WebSocket connections, but there is no Nuxt-specific workaround documented in the sources.
3. Reporting Bugs: Since you have a reproducible repo and the issue seems to be consistent, the Nuxt documentation recommends creating a minimal reproduction and opening a GitHub issue if you suspect a bug in Nuxt itself. This is especially encouraged if you have already searched for similar issues and not found a match. The process is outlined here: Reporting Bugs<source>https://nuxt.com/docs/4.x/community/reporting-bugs</source.>
4. Getting Help: If you want more immediate feedback or to discuss the issue before filing a bug, you can also open a discussion on the Nuxt GitHub or ask in the Discord, as suggested in the docs: Getting Help<source>https://nuxt.com/docs/4.x/community/getting-help</source.>
Summary:There is no direct mention in the knowledge sources of
onMounted being triggered twice in Nuxt, nor of a built-in workaround for your WebSocket issue. Since you have a reproducible case and the problem seems browser-specific, you are encouraged to create a minimal reproduction and open a GitHub issue, as this will help the Nuxt team and community investigate further.
If you need help narrowing down the cause, try to isolate whether the double trigger happens only in development (possibly due to hot module replacement or hydration quirks), or also in production builds. This information will be valuable when reporting the issue.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@626691576005132298> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
I've uploaded the repo to here: https://github.com/sebkacz/ws-test
GitHub
GitHub - sebkacz/ws-test
Contribute to sebkacz/ws-test development by creating an account on GitHub.