No browser debug output in >4.3.2

[ericman314]

Describe the bug When using socket.io-client version 4.3.2 and above in an app created with create-react-app, there is no browser debug output at all with localStorage.debug = '*'. Version 4.2.0 is the latest version I found that did produce correct debug output.

To Reproduce

1. Start the server
2. Run the client app using react-scripts start
3. Open dev tools, enter localStorage.debug = '*' in the console
4. Make sure 'verbose' is selected in the console's debug levels
5. Refresh the page and observe the console output

Please fill the following code example:

Socket.IO server version: 4.4.0

Server

const express = require('express')
const app = express()
const server = require('http').Server(app)
const io = require('socket.io')(server, {
  cors: {
    origin: '*'
  }
})

io.on('connection', socket => {
  console.log('socket connected:' + socket.id)
})

const port = 3000
server.listen(port, function () {
  console.log("Listening on *:" + port)
})

Socket.IO client version: 4.3.2

Client

import React from 'react'
import ReactDOM from 'react-dom'
import socketIOClient from 'socket.io-client'

const socket = socketIOClient('http://localhost:3000')

function App() {
  return (
    <div className="App">
      Hello, world!
    </div>
  )
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
)

Expected behavior When reloading the page, there should be debug output written to the browser console. With version 4.2.0, the debug output is written. With version 4.3.2 and 4.4.0, there is no output.

Platform:

• Device: Chrome 96
• OS: Ubuntu 20.04

Additional context I haven't tested this in the browser outside of a React app. I included information about the React environment in case react is somehow messing with the debug content.

[darrachequesne]

You are right, this is indeed a side effect of https://github.com/socketio/socket.io-client/commit/16b65698aed766e1e645c78847f2e91bfc5b6f56 (rationale here).

I'm open to suggestions on how to elegantly fix this.

[possi]

https://socket.io/docs/v4/logging-and-debugging/ should be at least updated to reflect

no more debug logs in the browser

[jawilson]

Is there currently no way to get any debug messages from socket.io-client >4.3.2?

[wvhulle]

@darrachequesne @possi how should I import the socket io client from node modules with debug?

[mikirejf]

No workaround?

[sizzlorox]

No workaround?

This is not the proper workaround and ONLY a temporary fix that I did to get debug working on my end to try debug an issue I was having keeping a websocket connection alive.

I manually added

    "./build/esm-debug": {
      "import": "./build/esm-debug/index.js",
      "require": "./build/cjs/index.js"
    },

Into the exports property within the socketio client package.json within the node_modules folder of the npm package itself. This allowed me to update my projects socketio client import from socketio-client to socketio-client/build/esm-debug.

I have reverted this change after I successfully solved my issue to not bring any unwanted sideeffects in the future. Remember that this is not a proper workaround.

[fabswt]

seriously, this should be stated in the docs

[dhdaines]

presumably this problem is also in the versions on (various) CDNs? because they don't work for me either

[IARI]

I set localStorage.debug = '*' directly before opening the socket with socket = io(...). Then I tried to do exactly that - added the code to export in \node_modules\socket.io-client\package.json

No workaround?

This is not the proper workaround and ONLY a temporary fix that I did to get debug working on my end to try debug an issue I was having keeping a websocket connection alive.

I manually added

    "./build/esm-debug": {
      "import": "./build/esm-debug/index.js",
      "require": "./build/cjs/index.js"
    },

Into the exports property within the socketio client package.json within the node_modules folder of the npm package itself. This allowed me to update my projects socketio client import from socketio-client to socketio-client/build/esm-debug.

I have reverted this change after I successfully solved my issue to not bring any unwanted sideeffects in the future. Remember that this is not a proper workaround.

it had no effect - I don't see any log output. Is there any reliable way currently to get console output for all messages currently?

[sizzlorox]

I set localStorage.debug = '*' directly before opening the socket with socket = io(...). Then I tried to do exactly that - added the code to export in \node_modules\socket.io-client\package.json

No workaround?

This is not the proper workaround and ONLY a temporary fix that I did to get debug working on my end to try debug an issue I was having keeping a websocket connection alive. I manually added

    "./build/esm-debug": {
      "import": "./build/esm-debug/index.js",
      "require": "./build/cjs/index.js"
    },

Into the exports property within the socketio client package.json within the node_modules folder of the npm package itself. This allowed me to update my projects socketio client import from socketio-client to socketio-client/build/esm-debug. I have reverted this change after I successfully solved my issue to not bring any unwanted sideeffects in the future. Remember that this is not a proper workaround.

it had no effect - I don't see any log output. Is there any reliable way currently to get console output for all messages currently?

Did you update the import from socketio-client to socketio-client/build/esm-debug ?

EDIT: I'm not sure if theres a more reliable way, I hope someone is able to spend more time to get a more developer friendly method of setting up debug mode