Error in Vue: the connection to ws://... was interrupted while the page was loading

Question

The connection to ws://192.168.1.36:8080/ws was interrupted while the page was loading

I have this error popping up every second. It started either after I ran "npm audit fix" or after I tried to install socket.io-client. Interestingly, this only happens in Firefox. I don't have any socket code, this is clearly related to hot reload. After I build the project, it works normally without errors. I googled a lot but haven't found a way to solve this. Thanks in advance.

Answer 1

I had same problem. In my case it was caused by dev server proxy. My application was using webpack and devServer property in vue.config to redirect api calls from frontend to my localhost backend. After upgrade to vue 2.7 firefox started spamming console with ws interrputed. When I look at the console of my backed I saw a lot of request to /ws endpoint.

The solution was to change configuration from

devServer: {
  proxy: "http://127.0.0.1:3000",
  ...
}

to

proxy: {
    "/api": {
      target: 'http://localhost:3000',
      pathRewrite: { '^/api': '' },
    },
  }

After that backend was not receiving request for /ws and firefox stopped complaining about failures. I have no idea why chrome didn't have that issue.