Using Browser-Sync / Html Config Proxy needs minutes to finish loading

[stevenengland]

Hi folks,

I am using React for the admin part of a adapter. When I launch the dev-server with watch or debug --wait it needs minutes to load. A complete cycle looks like that:

As one can see the websocket is not able to establish a connection.

A few things I noticed:

• Once the initial loading or the loading after a watched file changed finished a reload via F5/CTRL + F5 is pretty fast, reconnection works. Just the initial one lasts minutes.
• When a Proxy for the JSON config is spun up the error is not even present. So there must be something going on in the spin up routine of createHtmlConfigProxy (https://github.com/ioBroker/dev-server/blob/259a1ccfb9b75f4403a58e6feb47f1353845f195/src/index.ts#L759C17-L759C38) that breaks the flow.

Unfortunately I am not skilled in Browser-Sync at all so I don't have a clue what is wrong here.

A complete log until the connection succeeds is attached below. localhost-1711220680850.log

[stevenengland]

One thing more that I noticed: When I manipulate the client side socket.io options.connectTimeout like in the screenshot below (increased it to 10 seconds), the loading happens after a few seconds with success.

So: It seems that the React admin portion needs longer to load than the client side socket.io timeout allows. Q1: Is it feasable, at least as a workaround, to increase the default connection timeout value for the client side socket-io? Q2: How can the response time of the backend be improved so that the usual 2-3 seconds of timeout are just fine?

[stevenengland]

Unfortunately I have to revert my last post. When I persist the connectTimout in the socket.io.js that is delivered by iobroker/admin (https://github.com/ioBroker/ioBroker.admin/blob/27c9de12993611797b0cd099ef42cef4c9952fb4/packages/admin/src/public/lib/js/socket.io.js#L82) then the error stays the same. But what remains is that whenever I activate a breakpoint like in the screenshot above, let the application hit it and then manually resume the process it works. So the pure fact that I am interrupting the flow with the help of a breakpoint is "repairing" the flow.

Further: If I start the dev-server with the --verbose flag (activating silly messages) and also the Browser-Sync with debug level logs (manually edited here https://github.com/ioBroker/dev-server/blob/259a1ccfb9b75f4403a58e6feb47f1353845f195/src/index.ts#L960) I can see a few more messages before the websocket connection attempt is made but nothing more during the connection attempt or when the connection aborts.

I am poking around in the fog...

[stevenengland]

More info:

When the HTML/React BrowserSync part starts up, the BrowserSync creation fails after 4 Minutes (each time): Additionaly you can see that it takes a lot of websocket retries for the non admin part -> after the BrowserSync creation fails after 4 minutes the underlying next websocket request succeeds in contrast to all others before, when the creation of the BrowserSync was still in progress...

When choosing JSON Config BrowserSync then this BS instance immediately is created and the underlying websocket is connected.

[stevenengland]

I further narrowed it down a little bit. It is highly connected to adapter-react-v5 usage.

What do I mean? --> To better analyse it I created a complete new adapter with React enabled with adapter-create. That one uses the older adapter-react. With that one I am able to start the dev-server without any issues.

The complete described behaviour from above occurs as fast as I manually switch to adapter-react-v5 like I did in a PR for adapter-create (https://github.com/ioBroker/create-adapter/pull/1096). There I migrated with the help of the adapter-react-v5 readme and some reference repos. It is functional working. The error only occurs if BrowserSync comes into play. Can someone help me investigate this one a bit more deeply?