webpack-dev-server: Websocket server disconnects clients too early causing reload loop

This is a bug
This is a modification request

Code

No code available for this issue, see description further down for details.

Please paste the results of `npx webpack-cli info` here, and mention other relevant information

System: OS: macOS 11.4 CPU: (16) x64 Intel® Core™ i9-9980HK CPU @ 2.40GHz Memory: 22.59 GB / 64.00 GB Binaries: Node: 14.17.5 - ~/.nvm/versions/node/v14.17.5/bin/node Yarn: 1.19.1 - ~/.yvm/.yarn/shim/yarn npm: 6.14.14 - ~/.nvm/versions/node/v14.17.5/bin/npm Browsers: Chrome: 93.0.4577.63 Firefox: 91.0.2 Safari: 14.1.1 Monorepos: Yarn Workspaces: 1.19.1 Packages: compression-webpack-plugin: 8.0.1 => 8.0.1 css-minimizer-webpack-plugin: 3.0.2 => 3.0.2 html-webpack-harddisk-plugin: ^2.0.0 => 2.0.0 html-webpack-plugin: 5.3.2 => 5.3.2 terser-webpack-plugin: 5.2.3 => 5.2.3 webpack: 5.52.0 => 5.52.0 webpack-bundle-analyzer: 4.4.2 => 4.4.2 webpack-cli: 4.7.2 => 4.7.2 webpack-dev-middleware: 5.0.0 => 5.0.0 webpack-dev-server: 4.2.0 => 4.2.0 workbox-webpack-plugin: 6.2.4 => 6.2.4

Expected Behavior

Page load once and doesn’t reload (once) until a change is made.

Actual Behavior

Page reloads infinitely in an endless loop. You open the site in the browser and the page starts reloading in a loop immediately when loaded.

For Bugs; How can we reproduce the behavior?

I believe this problem only occurs in large projects. We have a big monorepo with multiple products all running on the same domain and built in the same Webpack step.

I have built webpack-dev-server locally and narrowed it down to this single commit that introduced the issue: https://github.com/webpack/webpack-dev-server/commit/a6501e6cd1b708e8f8c181042708ac564792f841

When using the previous commit of webpack-dev-server in our project, the issue is not there. With this commit, the issue is there and we get a reload loop.

I believe this is because the commit changed heartbeatInterval from 30 seconds to 1 second, and if the client isn’t alive it terminates the client. In the browser logs for the reloads we can see a “Disconnected!” message and then it reloads. In our case, I’m thinking that sometimes things are too slow to start up within one second, and webpack-dev-server then disconnects, reloads, waits 1 second, disconnects… in a loop.

I have tried modifying this timer locally, and both 20 seconds and 5 seconds were fine for us, and didn’t cause any reload loop. I’m not sure of the reasoning for lower this heartbeat from 30 seconds to 1 second, but if it’s okay to keep it high, I think high would make sense to not cause instability for others depending on computer speed etc.

Let me know if you need any more details! Thank you.

For Features; What is the motivation and/or use-case for the feature?

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 25 (17 by maintainers)

Most upvoted comments

And yes, it is duplicate of https://github.com/webpack/webpack-dev-server/issues/3803, shorty - let’s take for example product-a we use __webpack_hash__ (special webpack variable to get hash of build) to determine the initial value of hash of build, so if you reload page and change something we can understand if something has changed since the last time you open page, but in your case you send hash of dev-server.config build because only there dev server was started, and when you change something we rebuild all what needed and then send hash of dev-server.config build, but product-a and dev-server.config hashes are always different, previously, this did not lead to a problem for v3, but in fact you still had a broken reload logic, your mix hashes of builds.

Three solutions:

start dev server for each configuration, i.e. multiple dev server mode (we are working on it)
wait fix for multiple web targets support here https://github.com/webpack/webpack-dev-server/issues/3803 (your case), but again, you always send a hash of devServer configuration, and you need to set dependencies: ['product-a', 'product-b', 'product-c', 'product-d', 'product-e', 'product-f', 'product-g'], for dev-server.config
migrate on multi entries configuration - it will open up more opportunities for optimization

alexander-akait on Sep 13, 2021

Give me time, I will look

alexander-akait on Sep 13, 2021

Thanks for testing! 🙏

I put together a small reproducible test case here: https://github.com/koggdal/webpack-dev-server-issue-3831-demo

As mentioned, this issue is similar to the other issue you linked (maybe even the same), and I mainly wanted to bring the attention to the details covered in this issue around the commit that started the issues.

It does seem to be related to the multiple configuration setup, as the reload seems to happen more often when more configs are added in the entry file (webpack/entry.config.js).

What’s interesting is that changing the heartbeat timer value has no effect now that I’m trying with this test repo (it did fix it every time I tested it in our real setup though). So I’m not sure what the involvement of that timer is for this issue, but maybe it can affect something.

If this is in fact not really caused by that heartbeat timer, do you see what it could be caused by, and how it could be fixed (on your side or our side)?

koggdal on Sep 13, 2021