Web Trace tool cannot stop streaming data through WebSocket

[GhaziTriki]

When click the "Start" button twice in the web /tools/trace tool, event data streaming cannot be stopped.

Expected Behavior

A second click on the button should not prevent data streaming from stopping.

Current Behavior

The streaming of incoming trace data cannot be stopped and JS exception is thrown in the web console

Uncaught DOMException: An attempt was made to use an object that is not, or is no longer, usable
    onopen Trace.tsx:100
    onClick Trace.tsx:97
    De main.e7860c5b.js:2
    Ue main.e7860c5b.js:2
    Br main.e7860c5b.js:2
    Br main.e7860c5b.js:2
    Fr main.e7860c5b.js:2
    Vr main.e7860c5b.js:2
    uc main.e7860c5b.js:2
    Ne main.e7860c5b.js:2
    Vr main.e7860c5b.js:2
    Zt main.e7860c5b.js:2
    qt main.e7860c5b.js:2

Possible Solution

Prevent the button state change while update is being done.

Steps to Reproduce (for bugs)

1. Open /tools/trace tool.
2. Click on the "Start" button twice.

Context

If you leave it it takes few seconds for the browser window to close.

Regression

No

Your Environment

• Version used: 2024-03-30T09:41:56Z
• Server setup and configuration: N/A
• Operating System and version: Ubuntu 22.04 LTS 5.15.0-101-generic

[cesnietor]

We need to disable the button on start.
Consider Move WS to redux middleware.
cc @ramondeklein

[ramondeklein]

@cesnietor @dvaldivia I have taken an alternative approach by using a React hook to deal with the websocket. It looks we don't use a single websocket for all client/server communication. Doing so would break the API, so I don't think that would be a good idea.

See for an explanation the remarks in #3299.