Debugging Node-RED ui_base.js and Understanding WebSocket Behavior

Dashboard
, , ,
1

I'm working on debugging the ui_base.js file from the FlowFuse Node-RED Dashboard located at /home/nandhini/CTCDSERV/nodered/node-red/node_modules/@flowfuse/node-red-dashboard/nodes/config/ui_base.js.

Challenges:

  1. Method 1: I'm trying to debug the file using Node.js within Node-RED. The init function is being called, but the functions inside are not executing. I’ve set breakpoints, but they are not being hit. I’m unsure how to properly debug this within Node-RED.
  2. Method 2: I attempted to use CLI debugging with node --inspect ui_base.js, but I’m still facing difficulties.

Additionally, I want to understand how the WebSocket communication is working in Node-RED, specifically for the dashboard. I’m not sure where the WebSocket initialization starts and how it interacts with ui_base.js. Could anyone guide me on how to trace the WebSocket functionality?

2

All widgets of Dashboard call the ui-base.js's .register function, and thats where the socket handlers are setup for each node/widget.

What is it that youre trying to debug?

If you're doing local development, I would recommend following our contribution guide, as that will setup your Dashboard instance locally, and not depend on the npm installation

3

Not sure I can help with D2 issues but I do know Socket.IO quite well as I also use it in UIBUILDER. D2 uses Socket.IO for realtime comms so you may need some familiarity with that library.

4

I’m specifically trying to debug the ui_base.js file to understand where exactly the WebSocket connection is being initiated from the server to the client. I want to trace how the socket connection is set up and how the interaction between the server and client is handled through the WebSocket.

Additionally, I’m interested in understanding how the index.html file is being called and where the GET request for the dashboard setup is being handled. Could you point me to where this process starts, or any related parts of the code that handle the initial loading and WebSocket connections?

5

I am trying to debug the socket connections for the Node-RED Dashboard, specifically within the ui_base.js file located at:
/home/nandhini/CTCDSERV/nodered/node-red/node_modules/@flowfuse/node-red-dashboard/nodes/config/ui_base.js.

I attempted to run the following command to enable debugging:
DEBUG=* node ui_base.js,
but it doesn't seem to work as expected.

Could someone guide me on how to properly debug the socket connections in the ui_base.js file or provide any suggestions for debugging the Node-RED Dashboard components?

Additionally, I would like to retrieve the session ID from the socket connection using global.context. Could anyone suggest the steps to achieve this? Any guidance on debugging the socket connections and accessing the session ID through global.context would be appreciated.

6

For general debugging, we do have a debug view of the widgets. Detail is available here:

For server-side debugging though, you're best off setting up a development environment by following the instructions here

For debugging, unfortunately we don't have many more advanced techniques setup other than a lot of console.log spamming in ui-base where you want to see what's going on. We don't have trace-levels auto built in that'll spit out the extra detail you're after.

7

I'm not entirely sure I understand this request.

The Socket connection is setup from within ui-base here:

Then, when each node is registered in Node-RED, it calls the ui-base's .register function:

Inside that function it sets up the standard on('input') event handler:

Which runs each time a node receives a message inside Node-RED