404 Error when accessing Dashboard

[MarianRaphael]

Description

Currently, when a user connects to the device Editor via FlowForge and attempts to access their configured dashboard, they encounter a 404 error. This issue prevents users from seamlessly accessing the dashboard

User Story

As a FlowForge user who frequently uses the Dashboard on Devices,

I want to be able to directly access my configured dashboards when I connect to a device via FlowForge,

So that I can efficiently monitor and manage my devices without encountering any 404 errors or disruptions.

[hardillb]

@MarianRaphael What is meant by " when a user connects to a device via Websocket" ?

Do you mean when accessing the Device editor access via the FlowForge tunnel?

[MarianRaphael]

Via FlowForge

[hardillb]

Still not clear, do you mean when accessing the devices' editor?

[MarianRaphael]

Yes

[knolleary]

Based on the screenshot it appears the link in the NR Dashboard sidebar for opening the dashboard is app.flowforge.com/ui. This is because Dashboard is generating that URL itself. It knows from its local configuration that it is served at /ui - which is true when accessing Node-RED directly on the device.

However, when accessed via the proxy, the 'true' URL needs to include the full proxy path as a prefix.

The problem is Node-RED Dashboard has no knowledge that it is being accessed through our proxy tunnel and doesn't know it needs to include any other prefix to the path.

I don't immediately see a way around this.

[GogoVega]

It's just an idea 😅

When creating the popup with the editor tunnel url, a parameter can be added at the end of this url (&tunnelUsed=true) so that the editor checks if this parameter exists

https://github.com/FlowFuse/node-red-dashboard/blob/ea50f91885b5cceb3514710b27c8ab7e93e89695/nodes/config/ui_base.html#L190

const tunnelUsed = document.URL.endWith("&tunnelUsed=true");
// then use document.URL to get the full path
// or use a parameter containing full path directly