# Show "Active Node" and errors in template based web front-end

**URL:** <https://discourse.nodered.org/t/show-active-node-and-errors-in-template-based-web-front-end/87830>\
**Category:** General\
**Created:** [9 May 2024 09:01 UTC](https://discourse.nodered.org/t/show-active-node-and-errors-in-template-based-web-front-end/87830 "2024-05-09T09:01:49Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![MCPCN](https://avatars.discourse-cdn.com/v4/letter/m/838e76/32.png) [@MCPCN](https://discourse.nodered.org/u/MCPCN)\
**Post date:** [9 May 2024 09:01 UTC](https://discourse.nodered.org/t/show-active-node-and-errors-in-template-based-web-front-end/87830/1 "2024-05-09T09:01:49Z")

</div>

I'm using node-red as a back-end and simple front-end for a report, which pulls data from various sources and populates a Word document using docx-template, ready for editing/publishing to our customers.

The front-end is based on a template node which defines HTML for a form, which posts to a http node to initiate the report, using a \_blank target. The report returns on completion, again using a template node, to set HTML for the \_blank target with a link to download the report. This works fine, but there is no feedback to the user if the flow fails, or anything to confirm that it is still running.

I can do a catch node which will let me print whatever error occurs, rather than returning the download page - but I want to go further and show the path of the message through each node, with any errors printed inline. Ideally populating a div on the form in real-ish time so the user can watch the progress of the request.

Wracking my brains for a way to do this - was thinking of trying to use AJAX to monitor a /progress endpoint, which is written to whenever the report is running - but this would not handle multiple sessions/simultaneous reports. Websockets is another option - but we would presumably have the same issue with sessions.

Are we aware of any ways to achieve this using the msg or some sort of session context?

Thanks in advance.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [9 May 2024 09:28 UTC](https://discourse.nodered.org/t/show-active-node-and-errors-in-template-based-web-front-end/87830/2 "2024-05-09T09:28:51Z")

</div>

Add properties to the msg (e.g. msg.before and msg.after). Before each node in the path, set `msg.after` with the value of `msg.before` then set `msg.before` with the name or description of the next operation.

When an error is caught, you can determine from these 2 values where in the process you got to.

This assumes you don't have any nodes that ditch the original message (new comers often create new messages in function nodes - you should always try to update the incoming msg and return that)

Using msg properties (instead of context) will avoid the issue of using context and concurrent async operations interfering with the values (since they belong to their own msg AKA PURE)

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [9 May 2024 09:37 UTC](https://discourse.nodered.org/t/show-active-node-and-errors-in-template-based-web-front-end/87830/3 "2024-05-09T09:37:56Z")

</div>

How long does it take between initiating the flow and delivering the report? How many messages do you want to show during this time?

You could send progress messages something like this

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/b/cbcf143cf4fabeee85f26a9ac6e18380b294a92a.png)

If there is a delay of 5 seconds at any stage, the trigger will send an error message.  
Payload of "Finished" resets the trigger

---

<div class="post-metadata">

**Author:** ![MCPCN](https://avatars.discourse-cdn.com/v4/letter/m/838e76/32.png) [@MCPCN](https://discourse.nodered.org/u/MCPCN)\
**Post date:** [9 May 2024 11:49 UTC](https://discourse.nodered.org/t/show-active-node-and-errors-in-template-based-web-front-end/87830/4 "2024-05-09T11:49:36Z")

</div>

Thanks both - yes - sticking with msg properties makes sense to keep it in the right context.

My main issue is how to return the information to the web front end, without interfering with the one-to-one HTTP request -\> HTTP response. If I could do incremental http responses to the initial HTTP request, that would be ideal - but that won't work - HTTP response ends the flow and the msg context is lost. I haven't used the trigger node before to send messages - would that help in this case? How would I get the data back to the client?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [9 May 2024 12:52 UTC](https://discourse.nodered.org/t/show-active-node-and-errors-in-template-based-web-front-end/87830/5 "2024-05-09T12:52:49Z")

</div>

A quick solution could be to:

CLIENT SIDE

1. Generate a UUID and send it with the initial request.

SERVER SIDE  
2. Upon first initiation of the flow, grab the `uuid` and store it in the `msg` object  
3. Use Link-Call to call to a function that updates flow context lookup object to update the `before` and `after` states before each node  
4. Add a 2nd endpoint `/status/:uuid`. This can be called independently. It will look up the `uuid` parameter in the flow context and return the current state of that operation

CLIENT SIDE  
5. do an ajax request/async fetch to grab the status from `/status/:uuid`

### State Store

For the state context, I would probably make this an object with `createdAt` and `lastAccessed` time stamps so that you can clear up the flow status on a schedule

e.g.

#### subroutine for updating state

`link-in` -\> function -\> link-out (return)

**function**

```auto

const RouteStates = flow.get('RouteStates') || {}
const routeState = RouteStates[msg.uuid] || {
    createdAt: new Date(),
    accessedAt: null
}

 // update states
routeState.before = msg.before
routeState.after = msg.after
routeState.updatedAt = new Date()

// update flow context
RouteStates[msg.uuid] = routeState
flow.set('RouteStates', RouteStates)

```

### State Access via `/status/:uuid`

`http-in` "/status/:uuid" -\> function -\> http-response

**function**

```auto
const uuid = msg.request.params.uuid
const RouteStates = flow.get('RouteStates') || {}
const routeState = RouteStates[uuid] || {
    createdAt: new Date()
}

// update flow context
routeState.accessedAt = new Date()
RouteStates[msg.uuid] = routeState
flow.set('RouteStates', RouteStates)

// return state
msg.payload = routeState
return msg

```

* * *

100% untested, straight off the top of my head. will likely need refinement and/or a rejig but hopefully it unblocks you.

---

<div class="post-metadata">

**Author:** ![MCPCN](https://avatars.discourse-cdn.com/v4/letter/m/838e76/32.png) [@MCPCN](https://discourse.nodered.org/u/MCPCN)\
**Post date:** [9 May 2024 14:34 UTC](https://discourse.nodered.org/t/show-active-node-and-errors-in-template-based-web-front-end/87830/6 "2024-05-09T14:34:38Z")

</div>

Nice! Thanks, I'll give this a go.

---

<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:** [7 August 2024 14:34 UTC](https://discourse.nodered.org/t/show-active-node-and-errors-in-template-based-web-front-end/87830/7 "2024-08-07T14:34:58Z")

</div>

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