问题背景 #

你在将Webpack从v4升级到v5后，遇到了webpack-dev-server（HPM）代理WebSocket时的ECONNRESET错误，当前依赖版本为webpack^5.89.0、webpack-dev-server^4.15.1等：

<i> [webpack-dev-server] [HPM] Upgrading to WebSocket
<e> [webpack-dev-server] [HPM] WebSocket error: Error: read ECONNRESET
<e>     at TCP.onStreamRead (node:internal/stream_base_commons:217:20) {
<e>   errno: -4077,
<e>   code: 'ECONNRESET',
<e>   syscall: 'read'
<e> }

虽然WebSocket本身能正常接收数据，但每次交互都会在IDE控制台抛出这个错误，且Webpack v4下无此问题。你已经尝试过配置webSocketTransport等参数、升级依赖、安装最新ws包，但都没有解决。

核心原因分析 #

Webpack 5配套的webpack-dev-server v4在WebSocket代理的实现上和v4的webpack-dev-server（对应Webpack 4）有较大差异：

• 内置的http-proxy-middleware版本更新，WS代理的处理逻辑有变化
• devServer自身的WebSocket服务（用于HMR/liveReload）可能和代理的WS路径产生冲突
• 默认的WS传输协议或超时配置不兼容目标服务

针对性解决方案 #

1. 隔离devServer自身WS路径与代理路径

你的配置中，devServer的客户端WS URL设为了/ws，而代理的context也是/ws/**，这会导致请求冲突。修改devServer的WS路径为独有的值：

devServer: {
  client: {
    // 把WS路径改成和代理不冲突的，比如/ws-dev
    webSocketURL: `ws://${DEV_IP_ADDR}:${DEV_PORT}/ws-dev`,
  },
  // ...其他配置
}

2. 优化代理的WS错误捕获与超时配置

在代理配置中添加错误捕获逻辑，同时调整超时参数避免连接重置：

proxy: [
  // ...其他代理配置
  {
    context: ["/ws/**", "/stream/ws/**"],
    target: "wss://my-instance.com",
    ws: true,
    secure: false,
    changeOrigin: true,
    // 捕获ECONNRESET错误，避免控制台抛出
    onProxyReqWs: (proxyReq, req, socket, options, head) => {
      socket.on('error', (err) => {
        if (err.code === 'ECONNRESET') {
          console.debug('WebSocket connection reset (handled gracefully)');
        } else {
          throw err;
        }
      });
    },
    // 延长超时时间，减少连接重置概率
    proxyTimeout: 60000,
    timeout: 60000,
  },
]

3. 降级http-proxy-middleware到兼容版本

最新版http-proxy-middleware可能和webpack-dev-server v4存在兼容性问题，尝试安装稳定兼容版本：

npm install http-proxy-middleware@2.0.6 --save-dev

4. 禁用devServer自身的WS服务（极端情况）

如果以上方案都无效，直接禁用devServer的WS服务，强制所有WS请求走代理：

devServer: {
  webSocketServer: false,
  // 同时关闭liveReload，避免依赖WS服务
  liveReload: false,
  // ...其他配置
}

验证步骤 #

每次修改配置后，完全关闭devServer并重启，然后测试WebSocket交互，观察控制台是否还出现ECONNRESET错误。

备注：内容来源于stack exchange，提问作者feelingreat