# Debugging Node-RED ui\_base.js and Understanding WebSocket Behavior

**URL:** <https://discourse.nodered.org/t/debugging-node-red-ui-base-js-and-understanding-websocket-behavior/91131>\
**Category:** Dashboard\
**Tags:** node-red-dashboard, debugging, websocket, dashboard-2\
**Created:** [20 September 2024 05:34 UTC](https://discourse.nodered.org/t/debugging-node-red-ui-base-js-and-understanding-websocket-behavior/91131 "2024-09-20T05:34:40Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nandhini-Subramaniya](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nandhini-subramaniya/32/92882_2.png) [@Nandhini-Subramaniya](https://discourse.nodered.org/u/Nandhini-Subramaniya)\
**Post date:** [20 September 2024 05:34 UTC](https://discourse.nodered.org/t/debugging-node-red-ui-base-js-and-understanding-websocket-behavior/91131/1 "2024-09-20T05:34:40Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [20 September 2024 05:48 UTC](https://discourse.nodered.org/t/debugging-node-red-ui-base-js-and-understanding-websocket-behavior/91131/2 "2024-09-20T05:48:26Z")

</div>

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](https://dashboard.flowfuse.com/contributing/#installing-locally), as that will setup your Dashboard instance locally, and not depend on the `npm` installation

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [20 September 2024 11:55 UTC](https://discourse.nodered.org/t/debugging-node-red-ui-base-js-and-understanding-websocket-behavior/91131/3 "2024-09-20T11:55:58Z")

</div>

> [@Nandhini-Subramaniya](#):
>
> Could anyone guide me on how to trace the WebSocket functionality?

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

---

<div class="post-metadata">

**Author:** ![Nandhini-Subramaniya](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nandhini-subramaniya/32/92882_2.png) [@Nandhini-Subramaniya](https://discourse.nodered.org/u/Nandhini-Subramaniya)\
**Post date:** [21 September 2024 04:04 UTC](https://discourse.nodered.org/t/debugging-node-red-ui-base-js-and-understanding-websocket-behavior/91131/4 "2024-09-21T04:04:35Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Nandhini-Subramaniya](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nandhini-subramaniya/32/92882_2.png) [@Nandhini-Subramaniya](https://discourse.nodered.org/u/Nandhini-Subramaniya)\
**Post date:** [24 September 2024 04:52 UTC](https://discourse.nodered.org/t/debugging-node-red-ui-base-js-and-understanding-websocket-behavior/91131/5 "2024-09-24T04:52:36Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [24 September 2024 08:40 UTC](https://discourse.nodered.org/t/debugging-node-red-ui-base-js-and-understanding-websocket-behavior/91131/6 "2024-09-24T08:40:11Z")

</div>

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

> **[Debugging Dashboard 2.0 | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/contributing/widgets/debugging.html#debugging-dashboard-2-0)**
>
> Efficient strategies and tips for debugging your Node-RED Dashboard 2.0 setups to ensure smooth operation.

For server-side debugging though, you're best off setting up a development environment by following the instructions [here](https://dashboard.flowfuse.com/contributing/#installing-locally)

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.

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [24 September 2024 08:44 UTC](https://discourse.nodered.org/t/debugging-node-red-ui-base-js-and-understanding-websocket-behavior/91131/7 "2024-09-24T08:44:24Z")

</div>

> [@Nandhini-Subramaniya](#):
>
> Any guidance on debugging the socket connections and accessing the session ID through `global.context` would be appreciated.

I'm not entirely sure I understand this request.

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

> <https://github.com/FlowFuse/node-red-dashboard/blob/bca3b7facd6a811ca4178ef0e18c730e51a675c0/nodes/config/ui_base.js#L160>

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

> <https://github.com/FlowFuse/node-red-dashboard/blob/bca3b7facd6a811ca4178ef0e18c730e51a675c0/nodes/config/ui_base.js#L804>

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

> <https://github.com/FlowFuse/node-red-dashboard/blob/bca3b7facd6a811ca4178ef0e18c730e51a675c0/nodes/config/ui_base.js#L935>

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

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [24 October 2024 08:45 UTC](https://discourse.nodered.org/t/debugging-node-red-ui-base-js-and-understanding-websocket-behavior/91131/8 "2024-10-24T08:45:02Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.