Dropped requests when run through reverse proxy

[kasvtv]

• Operating System: W10
• Node Version: 8.9.3
• NPM Version: 6.1.0-next.0
• webpack Version: 4.10.2
• webpack-dev-server Version: 3.1.4

• This is a bug
• This is a modification request

Code

https://github.com/kasvtv/webapck-dev-server-issue

Expected Behavior

When behind a reverse proxy, devServer reliably serves files and the sockjs-node requests are sent through either the host + protocol of the devServer itsself or through the host + protocol of the reverse proxy

Actual Behavior

First of all, great plugin, HMR makes my days at the office so convenient and I can imagine many others'. DevServer has a little weird behaviour behind a reverse proxy though. It randomly drops requests when accessed through a reverse proxy! Especially when a handful of medium-sized files are transferred, this issue shows itself more often, but in the small example it does happen with at least 25% of all page loads for me. When the request finally times out (10s in the example), it seems to reattempt and it does work.

Furthermore, the sockjs-node calls are sent through the protocol that the proxy uses (HTTPS) instead of the devServer itsself (HTTP), which wouldn't be a problem, if it weren't that they go to the port number of the devServer and not of the remote proxy through which I visit the page with my browser.

Before and after:

For Bugs; How can we reproduce the behavior?

Clone my repository. Set up NGINX with included config file. Hit npm i npm run dev. Open localhost through Chrome 67. I have to say that it happens on a multitude of browsers, module versions and NGINX versions.

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

I'm a front-end dev and I run a local development instance that needs to connect to a remote staging back-end. Because of our fragmented microservice architecture and strict resource sharing policies, I must use a reverse proxy that routes requests from https://localhost/api to https://stage.domain.com/api with the same rules as the remote would do internally. Currently, this gives me the above problems and is hard to work with. It does eventually load after the timout finishes, but this slows me down in my work since I can't set the timeout too low.

[martyanov]

The very same problem. I've updated Webpack and related dependencies to the latest versions, the result is the same.

Versions:

webpack-dev-server: 3.1.4
webpack: 4.13.0

Options we use:

proxy: {
        '/api/*': {
            target: util.format('http://%s:%s', apiHost, apiPort),
            secure: false
        },
        '/ws/*': {
            target: util.format('http://%s:%s', websocketHost, websocketPort),
            secure: false,
            ws: true
        }
    }

There are a lot EHOSTUNREACH errors.

[wtho]

My hacky workaround: edit/fork webpack-dev-server and modify the if-clause in client/index.js to:

const dynamicSocksPort = true;
if (!urlParts.port || urlParts.port === '0' || dynamicSocksPort) {

Would be great if that would be some dev-server parameter!

The __resourceQuery-parameter is hardcoded as the domain webpack-dev-server listens to, although this might not be the domain the app targets primarily (e. g. behind a proxy, as mentioned above).

[kasvtv]

OP here. For my dev environment I ended up dropping my NGINX reverse proxy altogether and use the reverse proxying feature of the webpack dev server instead. Obviously this solves the problem of dropped requests, but it's still a sub-optimal solution as this is now yet another point at which my dev environment is going to differ from production.

[LiamKarlMitchell]

Still a problem today.

Having this issue in a dev environment where we have 2 frontend Quasar apps (Admin & Client) & API wanting them to be on subfolders behind a reverse proxy (Traefik & docker) maybe I should just ditch subfolders for the frontends and use subdomains?

SockPath should be /admin/socket or /client/socket for example.

Even with subdomains, I still have the issue of it putting the Port Number in.

Going to try patching the package similar to @wtho with patch-package.
https://www.npmjs.com/package/patch-package

Add to package.json

 "scripts": {
  "postinstall": "patch-package"
 }

Install patch-package via npm or yarn, can use save-dev

npm
npm i patch-package --save-dev

yarn
yarn add patch-package postinstall-postinstall --dev

Apply the change from wtho

Edit:
node_modules/webpack-dev-server/client/index.js

const dynamicSocksPort = true;
if (!urlParts.port || urlParts.port === '0' || dynamicSocksPort) {

Generate the patch and optionally commit the patch to your projects git.
yarn patch-package webpack-dev-server

Note: If running this in your docker container without git installed you will get an error when it trys to compare the clean code.
Error: spawnSync git ENOENT
Install git client to the container e.g. apk add git (Alpine)

This generates a diff patch in patches/webpack-dev-server+3.1.14.patch

Feature Request:
Have a config to enable this.
Also have a config that lets putting the socket path after the publicPath.

[alexander-akait]

For webpack-dev-server v4 you can specify client.webSocketURL: 'ws://cumstom.com:8090/path', so I think it should be solved

[alexandre-le-borgne]

For webpack-dev-server v4 you can specify client.webSocketURL: 'ws://cumstom.com:8090/path', so I think it should be solved

It's for webpack 5, not 4