NUXT.js项目WebSocket连接ws://localhost:9090/5失败重复报错如何解决

报错内容：WebSocket connection to 'ws://localhost:9090/5' failed，该报错会持续重复触发，报错截图如下：

第一步：定位报错来源 #

• 优先排查Nuxt开发环境热更新（HMR）配置：这是该类报错最高发的原因，Nuxt开发环境默认会通过WebSocket做热更新通信，如果你修改过devServer端口或HMR配置，很容易出现端口不匹配的问题。
• 全局搜索业务代码中的new WebSocket关键字，确认是否有手动写死连接ws://localhost:9090的逻辑。
• 排查已引入的第三方依赖：部分实时推送、调试类插件会默认启动WebSocket连接，检查对应插件的配置项是否正确。

第二步：对应场景解决方法 #

场景1：HMR配置不匹配导致报错 #

该场景占比90%以上，针对不同构建工具修改配置即可：

• Vite构建的Nuxt3项目，修改nuxt.config.ts配置，将HMR端口改为你当前开发服务的运行端口（默认是3000）：

export default defineNuxtConfig({
  vite: {
    server: {
      hmr: {
        port: 3000,
        // 如果开发环境用了https协议，额外添加配置：protocol: 'wss'
      }
    }
  }
})

• Webpack构建的Nuxt2项目，修改nuxt.config.js配置：

export default {
  build: {
    hotMiddleware: {
      client: {
        port: 3000 // 和你的开发服务端口保持一致
      }
    }
  }
}

场景2：业务代码/第三方依赖配置错误 #

• 如果是自己手写的WebSocket逻辑，修改连接地址为正确的后端WebSocket服务地址，同时添加重连次数限制，避免无限重连导致报错刷屏：

const MAX_RECONNECT_TIMES = 5 // 最大重连次数
let reconnectCount = 0

function initWebSocket() {
  const ws = new WebSocket('替换为你的正确WebSocket服务地址')
  ws.onerror = () => {
    if (reconnectCount < MAX_RECONNECT_TIMES) {
      reconnectCount++
      // 间隔3s再重连
      setTimeout(initWebSocket, 3000)
    }
  }
}

• 如果是第三方插件导致的报错，查看插件文档调整WebSocket连接配置，不需要使用的插件直接卸载即可。

临时屏蔽方案（仅开发环境使用） #

如果暂时找不到报错根源，不想被报错刷屏，可以在开发环境入口文件添加以下代码，过滤该类报错：

if (process.env.NODE_ENV === 'development') {
  const originError = console.error
  console.error = (...args) => {
    if (typeof args[0] === 'string' && args[0].includes('ws://localhost:9090') && args[0].includes('failed')) {
      return
    }
    originError.apply(console, args)
  }
}

内容的提问来源于stack exchange，提问作者Adam W.