Admin UI not working - "Invalid namespace"

[rChaoz]

I'm successfully using Socket.IO in my project. Next, I tried using the Admin UI. I followed all of the steps:

• enable CORS in the server
• call instrument(...)
• download the UI and serve it using npx serve

When trying to connect to my Socket.IO server, I get this:

This is shown regardless of the credentials being correct or not.

I'm using the default path and namespace. As indicated, I tried the following troubleshooting steps:

• using Chrome instead
• run curl "<the server URL>/socket.io/?EIO=4&transport=polling", I get the correct response
• I use the latest version for both, so versions shouldn't be an issue
• the server sends the correct CORS headers
• I tried looking at the error object in the on("connect(ion)_error") on the client/server
  • client - the message is "invalid namespace" and description/context are not set
  • server - the event is never called

This is my network tab, I can't see anything wrong:

Any ideas on where I should look next?

[darrachequesne]

Hi! "Invalid namespace" means the namespace was not found on the server side.

You should see a CONNECT packet (40/admin,, for the admin namespace) in the WebSocket frames, could you please check?

[rChaoz]

Well, it's happening again. Here are the network events, in order:

1. GET http://localhost:5173/socket.io/?EIO=4&transport=polling&t=...
   Payload: none
   Response: 200 0{"sid":"C0tpAuKojGaKfJybAAAB","upgrades":["websocket"],"pingInterval":25000,"pingTimeout":20000,"maxPayload":1000000}

2. GET http://localhost:5173/socket.io/?EIO=4&transport=polling&t=...&sid=C0tpAuKojGaKfJybAAAB
   Payload: 40/admin,{"username":"admin","password":"admin"}
   Response: 200 ok

3. GET ws://localhost:5173/socket.io/?EIO=4&transport=websocket&sid=C0tpAuKojGaKfJybAAAB
   Payload: none
   Response: 400 (none)

The only thing that look wrong to me is that the t query parameter is missing in the last request. It isn't missing when I watch the same event for my app.

This is what I get when I run it in WebSocket only mode:

[rChaoz]

Also, I had to make some changes (maybe you can take a look) to the admin UI to be able to use the devalue parser, which I now use. I know that's the the cause of the issue however because switching to the default one doesn't fix it (I was using it for the message above) and the devalue parser works with my app correctly.

[darrachequesne]

@rChaoz I was not able to reproduce the issue. Please check the example here: https://github.com/socketio/socket.io-admin-ui/tree/develop/examples/single-server

[rChaoz]

Thanks for the help! I am using SvelteKit and I was doing the call to instrument() in my hooks.server.ts file, but it seems like it's not evaluated until the server receives it's first request. Since the request to /socket.io is caught before it reaches SvelteKit, the hooks file was never evaluated.

[darrachequesne]

@rChaoz pheew, great news! Thanks for the update 👍