socketio / socketio/socket.io

No browser debug output in >4.3.2

Open
#5,108 11 comments 9 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug package:socket.io-client
Dominant language
TypeScript
Stars
63.2k
Forks
10.3k
Avg merge
11d 20h
Merged PRs (30d)
2

Description

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the provided create-react-app reproduction using socket.io-client 4.2.0, 4.3.2, and 4.4.0, then inspect the client-side debug output in Chrome DevTools after setting localStorage.debug = '*'. Done means identifying the regression and restoring browser debug output for the affected versions without breaking the existing connection behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.