Debugging websocket unable to connect in certain browsers

[jkwok678]

I am struggling to debug a NextJS React App with a websocket connection in normal chrome window.
I am able to connect to my uWebSocket server with incognito chrome and safari but unable to do so in normal.
I have cleared my cookies/ storage and service workers, which I didn't have use anyway. I also disabled all extensions.

I am able to send a message a receive a message on other browsers but see this in the normal one

  .App()
  .ws("/game", {
    upgrade: (res, req, context) => {
      res.upgrade(
        {},
        req.getHeader("sec-websocket-key"),
        req.getHeader("sec-websocket-protocol"),
        req.getHeader("sec-websocket-extensions"),
        context
      );
    },
    open: (ws: WebSocket<LobbySocketData>) => {
      console.log("WebSocket connected");
    },

    message: (ws: WebSocket<LobbySocketData>, message, isBinary) => {
      handleWSMessage(ws, message, isBinary);
    },

    close: (ws: WebSocket<LobbySocketData>, code, message) => {
      console.log("WebSocket closed");
    },
  })
  .listen(Number(process.env.WS_PORT), (token) => {
    if (token) {
      console.log(
        `uWS server running on ws://localhost:${process.env.WS_PORT}`
      );
    } else {
      console.error("Failed to listen to port", process.env.WS_PORT);
    }
  });

useEffect(() => {
    const initWebSocket = async () => {

      // Prevent duplicate connections
      if (
        wsRef.current?.readyState === WebSocket.OPEN ||
        wsRef.current?.readyState === WebSocket.CONNECTING
      ) {
        console.log("WebSocket already connected/connecting, skipping...");
        return;
      }

      // Connect to WebSocket
      const wsUrl = `${process.env.NEXT_PUBLIC_WEBSOCKET_URL}/game`;
      console.log("Connecting to WebSocket with URL:", wsUrl);
      const ws = new WebSocket(wsUrl);

      wsRef.current = ws;

      ws.onopen = () => {
        // Send join message with gameId to connect to that specific lobby
        ws.send(
          JSON.stringify({
            type: "do-something",
          })
        );
      };
      ws.onmessage = (event) => {
        const data = JSON.parse(event.data);
        console.log("WebSocket message received:", data);
      };

      ws.onclose = () => {
        console.log("WebSocket disconnected");
      };

      ws.onerror = (err) => {
        console.error("WebSocket error:", err);
      };
    };

    initWebSocket();

    return () => {
      console.log("Cleaning up WebSocket connection");
      if (wsRef.current) {
        wsRef.current.close();
        wsRef.current = null;
      }
    };
  }, [params.gameId]);

I see

isTrusted: true
bubbles: false
cancelBubble: false
cancelable: false
composed: false
currentTarget: null
defaultPrevented: false
eventPhase: 0
returnValue: true
srcElement: WebSocket {url: 'ws://localhost:8082/game', readyState: 3, bufferedAmount: 0, onopen: ƒ, onerror: ƒ, …}
target: WebSocket {url: 'ws://localhost:8082/game', readyState: 3, bufferedAmount: 0, onopen: ƒ, onerror: ƒ, …}
timeStamp: 911.6999999992549
type: "error"
[[Prototype]]: 
Event
}```
 The code fails here - const ws = new WebSocket(wsUrl);