Dashboard 2 Question

I am testing Dashboard 2 to migrate my frontend. Among other things I try some nodes, which are developed for the new dashboard.
For example iframe, gauge-classic and flowviewer. The problem is that different from the standard D2 Nodes the additional nodes don't show anything.

In the log of the browser developement-tool are some messages:
No vue component found for ui-iframe, ui-gauge-classic, ....

I am not a frontend-developer and I think that some vue components are missing. I have no idea which vue-library is missing and how can I provide them. Perhaps I have to define some things in the settings-file to load something.

I am sure that you have an idea. Thx in advance.

Did you restart node-red?
Can you show us the node red startup log please? It should start with Welcome to Node Red. Copy/paste the text please, not screenshot.

Short my environment to understand the log (docker container and node with pm2 I hope you can read the log

nodeREDTest1.1.66gunb7lnahu@vm001    |
nodeREDTest1.1.66gunb7lnahu@vm001    |                         -------------
nodeREDTest1.1.66gunb7lnahu@vm001    |
nodeREDTest1.1.66gunb7lnahu@vm001    | __/\\\\\\\\\\\\\____/\\\\____________/\\\\____/\\\\\\\\\_____
nodeREDTest1.1.66gunb7lnahu@vm001    |  _\/\\\/////////\\\_\/\\\\\\________/\\\\\\__/\\\///////\\\___
nodeREDTest1.1.66gunb7lnahu@vm001    |   _\/\\\_______\/\\\_\/\\\//\\\____/\\\//\\\_\///______\//\\\__
nodeREDTest1.1.66gunb7lnahu@vm001    |    _\/\\\\\\\\\\\\\/__\/\\\\///\\\/\\\/_\/\\\___________/\\\/___
nodeREDTest1.1.66gunb7lnahu@vm001    |     _\/\\\/////////____\/\\\__\///\\\/___\/\\\________/\\\//_____
nodeREDTest1.1.66gunb7lnahu@vm001    |      _\/\\\_____________\/\\\____\///_____\/\\\_____/\\\//________
nodeREDTest1.1.66gunb7lnahu@vm001    |       _\/\\\_____________\/\\\_____________\/\\\___/\\\/___________
nodeREDTest1.1.66gunb7lnahu@vm001    |        _\/\\\_____________\/\\\_____________\/\\\__/\\\\\\\\\\\\\\\_
nodeREDTest1.1.66gunb7lnahu@vm001    |         _\///______________\///______________\///__\///////////////__
nodeREDTest1.1.66gunb7lnahu@vm001    |
nodeREDTest1.1.66gunb7lnahu@vm001    |
nodeREDTest1.1.66gunb7lnahu@vm001    |                           Runtime Edition
nodeREDTest1.1.66gunb7lnahu@vm001    |
nodeREDTest1.1.66gunb7lnahu@vm001    |         PM2 is a Production Process Manager for Node.js applications
nodeREDTest1.1.66gunb7lnahu@vm001    |                      with a built-in Load Balancer.
nodeREDTest1.1.66gunb7lnahu@vm001    |
nodeREDTest1.1.66gunb7lnahu@vm001    |                 Start and Daemonize any application:
nodeREDTest1.1.66gunb7lnahu@vm001    |                 $ pm2 start app.js
nodeREDTest1.1.66gunb7lnahu@vm001    |
nodeREDTest1.1.66gunb7lnahu@vm001    |                 Load Balance 4 instances of api.js:
nodeREDTest1.1.66gunb7lnahu@vm001    |                 $ pm2 start api.js -i 4
nodeREDTest1.1.66gunb7lnahu@vm001    |
nodeREDTest1.1.66gunb7lnahu@vm001    |                 Monitor in production:
nodeREDTest1.1.66gunb7lnahu@vm001    |                 $ pm2 monitor
nodeREDTest1.1.66gunb7lnahu@vm001    |
nodeREDTest1.1.66gunb7lnahu@vm001    |                 Make pm2 auto-boot at server restart:
nodeREDTest1.1.66gunb7lnahu@vm001    |                 $ pm2 startup
nodeREDTest1.1.66gunb7lnahu@vm001    |
nodeREDTest1.1.66gunb7lnahu@vm001    |                 To go further checkout:
nodeREDTest1.1.66gunb7lnahu@vm001    |                 http://pm2.io/
nodeREDTest1.1.66gunb7lnahu@vm001    |
nodeREDTest1.1.66gunb7lnahu@vm001    |
nodeREDTest1.1.66gunb7lnahu@vm001    |                         -------------
nodeREDTest1.1.66gunb7lnahu@vm001    |
nodeREDTest1.1.66gunb7lnahu@vm001    | pm2 launched in no-daemon mode (you can add DEBUG="*" env variable to get more messages)
nodeREDTest1.1.66gunb7lnahu@vm001    | 2024-07-25T00:28:08: PM2 log: Launching in no daemon mode
nodeREDTest1.1.66gunb7lnahu@vm001    | 2024-07-25T00:28:09: PM2 log: [PM2] Starting /app/node_modules/.bin/node-red in fork_mode (1 instance)
nodeREDTest1.1.66gunb7lnahu@vm001    | 2024-07-25T00:28:09: PM2 log: App [nodeREDTest1:0] starting in -fork mode-
nodeREDTest1.1.66gunb7lnahu@vm001    | 2024-07-25T00:28:09: PM2 log: App [nodeREDTest1:0] online
nodeREDTest1.1.66gunb7lnahu@vm001    | 2024-07-25T00:28:09: PM2 log: [PM2] Done.
nodeREDTest1.1.66gunb7lnahu@vm001    | 2024-07-25T00:28:09: PM2 log: ┌────┬─────────────────┬─────────────┬─────────┬─────────┬──────────┬────────┬──────┬───────────┬──────────┬──────────┬──────────┬──────────┐
nodeREDTest1.1.66gunb7lnahu@vm001    | │ id │ name            │ namespace   │ version │ mode    │ pid      │ uptime │ ↺    │ status    │ cpu      │ mem      │ user     │ watching │
nodeREDTest1.1.66gunb7lnahu@vm001    | ├────┼─────────────────┼─────────────┼─────────┼─────────┼──────────┼────────┼──────┼───────────┼──────────┼──────────┼──────────┼──────────┤
nodeREDTest1.1.66gunb7lnahu@vm001    | │ 0  │ nodeREDTest1    │ default     │ 0.0.1   │ fork    │ 18       │ 0s     │ 0    │ online    │ 0%       │ 38.8mb   │ root     │ disabled │
nodeREDTest1.1.66gunb7lnahu@vm001    | └────┴─────────────────┴─────────────┴─────────┴─────────┴──────────┴────────┴──────┴───────────┴──────────┴──────────┴──────────┴──────────┘
nodeREDTest1.1.66gunb7lnahu@vm001    | 2024-07-25T00:28:09: PM2 log: [--no-daemon] Continue to stream logs
nodeREDTest1.1.66gunb7lnahu@vm001    | 2024-07-25T00:28:09: PM2 log: [--no-daemon] Exit on target PM2 exit pid=1
nodeREDTest1.1.66gunb7lnahu@vm001    | 00:28:11 0|nodeREDTest1  | 25 Jul 00:28:11 - [info]
nodeREDTest1.1.66gunb7lnahu@vm001    | 00:28:11 0|nodeREDTest1  | Welcome to Node-RED
nodeREDTest1.1.66gunb7lnahu@vm001    | 00:28:11 0|nodeREDTest1  | ===================
nodeREDTest1.1.66gunb7lnahu@vm001    | 00:28:11 0|nodeREDTest1  | 25 Jul 00:28:11 - [info] Node-RED version: v4.0.2
nodeREDTest1.1.66gunb7lnahu@vm001    | 00:28:11 0|nodeREDTest1  | 25 Jul 00:28:11 - [info] Node.js  version: v20.15.1
nodeREDTest1.1.66gunb7lnahu@vm001    | 00:28:11 0|nodeREDTest1  | 25 Jul 00:28:11 - [info] Linux 6.1.0-20-amd64 x64 LE
nodeREDTest1.1.66gunb7lnahu@vm001    | 00:28:11 0|nodeREDTest1  | 25 Jul 00:28:11 - [info] Loading palette nodes
nodeREDTest1.1.66gunb7lnahu@vm001    | 00:28:14 0|nodeREDTest1  | 25 Jul 00:28:14 - [info] Settings file  : /settings/settings_https.js
nodeREDTest1.1.66gunb7lnahu@vm001    | 00:28:14 0|nodeREDTest1  | 25 Jul 00:28:14 - [info] Context store  : 'default' [module=memory]
nodeREDTest1.1.66gunb7lnahu@vm001    | 00:28:14 0|nodeREDTest1  | 25 Jul 00:28:14 - [info] User directory : /nodered/.node-red
nodeREDTest1.1.66gunb7lnahu@vm001    | 00:28:14 0|nodeREDTest1  | 25 Jul 00:28:14 - [info] Projects directory: /nodered/.node-red/projects
nodeREDTest1.1.66gunb7lnahu@vm001    | 00:28:14 0|nodeREDTest1  | 25 Jul 00:28:14 - [info] Server now running at https://127.0.0.1:4100/
nodeREDTest1.1.66gunb7lnahu@vm001    | 00:28:14 0|nodeREDTest1  | 25 Jul 00:28:14 - [info] Active project : test
nodeREDTest1.1.66gunb7lnahu@vm001    | 00:28:14 0|nodeREDTest1  | 25 Jul 00:28:14 - [info] Flows file     : /nodered/.node-red/projects/test/flows.json
nodeREDTest1.1.66gunb7lnahu@vm001    | 00:28:15 0|nodeREDTest1  | 25 Jul 00:28:15 - [warn] Using unencrypted credentials
nodeREDTest1.1.66gunb7lnahu@vm001    | 00:28:15 0|nodeREDTest1  | 25 Jul 00:28:15 - [info] Starting flows
nodeREDTest1.1.66gunb7lnahu@vm001    | 00:28:15 0|nodeREDTest1  | 25 Jul 00:28:15 - [info] [ui-base:Dashboard] Node-RED Dashboard 2.0 (v1.13.0) started at /dashboard
nodeREDTest1.1.66gunb7lnahu@vm001    | 00:28:15 0|nodeREDTest1  | 25 Jul 00:28:15 - [info] [ui-base:Dashboard] Created socket.io server bound to Node-RED port at path /dashboard/socket.io
nodeREDTest1.1.66gunb7lnahu@vm001    | 00:28:15 0|nodeREDTest1  | 25 Jul 00:28:15 - [info] [mongodb4-client:infrastructureDB] client initialized with app name 'nodered-lk084sff'
nodeREDTest1.1.66gunb7lnahu@vm001    | 00:28:15 0|nodeREDTest1  | 25 Jul 00:28:15 - [info] Started flows
nodeREDTest1.1.66gunb7lnahu@vm001    | 00:28:15 0|nodeREDTest1  | 25 Jul 00:28:15 - [info] [mqtt-broker:8f58cd0d7bf4ffd3] Connected to broker: mqtt://domotics.familie-spitzer.de:1883
nodeREDTest1.1.66gunb7lnahu@vm001    | 00:28:15 0|nodeREDTest1  | 25 Jul 00:28:15 - [info] [mqtt-broker:broker] Connected to broker: mqtt://tasks.mosquitto:1883
nodeREDTest1.1.66gunb7lnahu@vm001    | 00:28:15 0|nodeREDTest1  | 25 Jul 00:28:15 - [info] [mqtt-broker:broker] Connected to broker: mqtt://tasks.mosquitto:1883
nodeREDTest1.1.66gunb7lnahu@vm001    | 00:28:15 0|nodeREDTest1  | 25 Jul 00:28:15 - [info] [mqtt-broker:broker] Connected to broker: mqtt://tasks.mosquitto:1883
nodeREDTest1.1.66gunb7lnahu@vm001    | 00:28:15 0|nodeREDTest1  | 25 Jul 00:28:15 - [warn] [function:Set error status] [object Object]
nodeREDTest1.1.66gunb7lnahu@vm001    | 00:28:29 0|nodeREDTest1  | 25 Jul 00:28:29 - [info] [ui-base:Dashboard] Disconnected pTXIC4UbNTx43mHdAAAB due to transport close
nodeREDTest1.1.66gunb7lnahu@vm001    | 00:28:41 0|nodeREDTest1  | 25 Jul 00:28:41 - [info] [ui-base:Dashboard] Disconnected QF8QayQdxfJg-WoIAAAD due to transport close
nodeREDTest1.1.66gunb7lnahu@vm001    | 00:29:03 0|nodeREDTest1  | 25 Jul 00:29:03 - [error] [function:function 2] TypeError: Cannot read properties of undefined (reading 'length')
nodeREDTest1.1.66gunb7lnahu@vm001    | 00:29:11 0|nodeREDTest1  | 25 Jul 00:29:11 - [info] [ui-base:Dashboard] Disconnected 3l__I3Z_aDKzokyWAAAF due to transport close
nodeREDTest1.1.66gunb7lnahu@vm001    | 00:47:46 0|nodeREDTest1  | 25 Jul 00:47:46 - [info] [ui-base:Dashboard] Disconnected pbBa2sQcsZEpK3f9AAAJ due to transport close
nodeREDTest1.1.66gunb7lnahu@vm001    | 00:47:53 0|nodeREDTest1  | 25 Jul 00:47:53 - [info] [ui-base:Dashboard] Disconnected 3O2tu9mPKAqvChs5AAAL due to transport close
nodeREDTest1.1.66gunb7lnahu@vm001    | 00:47:54 0|nodeREDTest1  | 25 Jul 00:47:54 - [info] [ui-base:Dashboard] Disconnected 0R3RNgfeEcZ5G6OxAAAH due to transport close
nodeREDTest1.1.66gunb7lnahu@vm001    | 00:48:31 0|nodeREDTest1  | 25 Jul 00:48:31 - [info] [ui-base:Dashboard] Disconnected XXSDD_w-mviy8MNFAAAN due to transport close
nodeREDTest1.1.66gunb7lnahu@vm001    | 00:50:09 0|nodeREDTest1  | 25 Jul 00:50:09 - [info] [ui-base:Dashboard] Disconnected QHk_FbJG8USrfrrXAAAP due to transport close
nodeREDTest1.1.66gunb7lnahu@vm001    | 00:53:29 0|nodeREDTest1  | 25 Jul 00:53:29 - [info] [ui-base:Dashboard] Disconnected w5d8okMLAF86KRa1AAAR due to transport close
nodeREDTest1.1.66gunb7lnahu@vm001    | 07:16:57 0|nodeREDTest1  | 25 Jul 07:16:57 - [info] [ui-base:Dashboard] Disconnected OOm6tYhX_qLx2wLIAAAT due to transport close
nodeREDTest1.1.66gunb7lnahu@vm001    | 13:25:40 0|nodeREDTest1  | 25 Jul 13:25:40 - [info] [ui-base:Dashboard] Disconnected ipgwUZ7-7T44iagwAAAV due to transport close
nodeREDTest1.1.66gunb7lnahu@vm001    | 16:15:22 0|nodeREDTest1  | 25 Jul 16:15:22 - [info] [ui-base:Dashboard] Disconnected K4SDrQZoxv7CP6sXAAAX due to transport close
nodeREDTest1.1.66gunb7lnahu@vm001    | 16:42:29 0|nodeREDTest1  | 25 Jul 16:42:29 - [info] [ui-base:Dashboard] Disconnected ujhc2xFZcYMIjaJtAAAf due to transport close
nodeREDTest1.1.66gunb7lnahu@vm001    | 16:42:35 0|nodeREDTest1  | 25 Jul 16:42:35 - [info] [ui-base:Dashboard] Disconnected KlylPyJooEQW7u5JAAAe due to transport close
nodeREDTest1.1.66gunb7lnahu@vm001    | 16:42:37 0|nodeREDTest1  | 25 Jul 16:42:37 - [info] [ui-base:Dashboard] Disconnected gYocDzRzMEfeuImrAAAb due to ping timeout
nodeREDTest1.1.66gunb7lnahu@vm001    | 16:42:48 0|nodeREDTest1  | 25 Jul 16:42:48 - [info] [ui-base:Dashboard] Disconnected k4ygQDUnJBj8o1K2AAAZ due to ping timeout
nodeREDTest1.1.66gunb7lnahu@vm001    | 16:44:22 0|nodeREDTest1  | 25 Jul 16:44:22 - [info] [ui-base:Dashboard] Disconnected UabHOhpd8rRVNphIAAAm due to transport close
nodeREDTest1.1.66gunb7lnahu@vm001    | 16:44:35 0|nodeREDTest1  | 25 Jul 16:44:35 - [info] [ui-base:Dashboard] Disconnected 9wM1wyYAdzW8_UMqAAAj due to ping timeout
nodeREDTest1.1.66gunb7lnahu@vm001    | 16:44:55 0|nodeREDTest1  | 25 Jul 16:44:55 - [info] [ui-base:Dashboard] Disconnected Se1KFiZz5I3qjeBSAAAh due to ping timeout
nodeREDTest1.1.66gunb7lnahu@vm001    | 17:02:11 0|nodeREDTest1  | 25 Jul 17:02:11 - [info] [ui-base:Dashboard] Disconnected 5bdZcTDvlGENal3lAAAp due to transport close
nodeREDTest1.1.66gunb7lnahu@vm001    | 17:02:58 0|nodeREDTest1  | 25 Jul 17:02:58 - [info] [ui-base:Dashboard] Disconnected VR9Q4NjcilziQRL_AAAn due to transport close

p.s. It is my test-environment and there are some erors from my own function-node.

I can't see anything obvious wrong there.

@joepavitt can you suggest anything?

In my browser log I see such kind of messages for all additional components:

No vue component found for ui-iframe - falling back to ui-template index-CbOqRi22.js:231

What browser and browser version? Can you post the full browser log/errors? Have you tried reinstalling the nodes? Have you tried another device/browser?

I expect this will be A node red restart is necessary after installing third party ui nodes · Issue #938 · FlowFuse/node-red-dashboard · GitHub

As Colin suggested, a Node-RED restart should do the trick.

I am using Chrome the current version and I also test Edge.
I restart the container with all components. I restart nginx and the whole stuff.
I can send my browser log but I think it doesn't help only a few standard-messages.
I delete my whole node_modules-directory and make a fresh npm install.
All frontend-devices available are tested with the same result.
The description of #938 would fit but don't help in my situation,
sorry

[11140:20244:0725/190012.260:WARNING:chrome_main_delegate.cc(744)] This is Chrome version 127.0.6533.73 (not a warning)
[11140:20244:0725/190012.413:VERBOSE1:statistics_recorder.cc(607)] Collections of all histograms
Histogram: Chrome.ProcessSingleton.NotifyResult recorded 1 samples, mean = 1.0 (flags = 0x41)
0 O (0 = 0.0%)
1 -O (1 = 100.0%) {0.0%}
2 ...

Histogram: Chrome.ProcessSingleton.TimeToNotify recorded 1 samples, mean = 2.0 (flags = 0x41)
0 -O (1 = 100.0%)
10 ...

Histogram: Startup.LoadTime.RecordedProcessCreation recorded 1 samples, mean = 1.0 (flags = 0x1)
0 O (0 = 0.0%)
1 -O (1 = 100.0%) {0.0%}
2 O (0 = 0.0%) {100.0%}

Histogram: UMA.PersistentAllocator.BrowserMetrics.Errors recorded 0 samples (flags = 0x41)
0 ...

Histogram: UMA.PersistentAllocator.BrowserMetrics.UsedPct recorded 0 samples (flags = 0x41)
0 ...

Histogram: UMA.PersistentAllocator.EarlyHistograms.BrowserMetrics recorded 1 samples, mean = 1.0 (flags = 0x41)
0 O (0 = 0.0%)
1 -O (1 = 100.0%) {0.0%}
2 ...

Histogram: UMA.PersistentHistograms.InitResult recorded 1 samples, mean = 2.0 (flags = 0x41)
0 ...
2 -O (1 = 100.0%) {0.0%}
3 ...

I assumed because of the time and date in his logs that he already tried that.

I don't see any errors in that log.

When you say nothing is showing do you mean in the editor or the dashboard?

Check the network tab in the browser and see if there are any problems.

Good point, well presented

@Roland Are you running any proxies on the nginx server? Or have Node-RED http admin settings configured? We've had issues in the past (which I thought we had resolved) around Dashboard being deployed in these environments.

@Colin Nothing is shown in the dashboard no gauge, no iframe, .. The space for the element is available but no content is shown.
If you mean the network-tab in the developement-console - 14 elements are loaded without any error (Http-Codes 101, 200, 304). I don't see no vue ressource (name containing "vue"), I don't know is that ok.
@joepavitt I use proxies on nginx, but I stop the nginx-container and open the application direct using the ip:port/dashboard with the same result.
When you talk about http admin definitions in the settings-file, I don't use it.

Which vue-libraries (vue, vuetify, ...) are necessary ? Can I load them in the settings-file or is there a -statement on client-side missing, but why do the original dashboard 2 components (table, form, text input, template ....) work nicely ?
Sorry for my rookie questions and thanks for your help :wink: ?

When third party nodes are installed, they write to the package.json of the Node-RED install path, which tells Node-RED where the third party complied .js files are to serve up for the Dashboard to read.

This is why we need the Node-RED restart, as NR isn't aware of the changes until this has been done. Dashboard parses that package.json and looks for any third-party node entries, and the paths of their js files, if it can't find the files there (or the entires aren't in the package.json) we can only serve up a blank space.

Are you able to read the contents of the package.json file for your Node-RED install? Maybe something has prevented that being written to?

First : Can you give me an example what will be written into package.json - I don't realize anything.
Second : Only an Idea. I work with two package.json files see example. These are the originals for the test-environment. I use this constellation for round about 15 container-environments.
The complete node_modules is in the first path. The first package.json is always the same.
The reason for that was an automatic handling of the application part and to reduce the backup-overhead. Because the relevant components without node_modules are separated in the second path.
I think this is no standard way.

**/home/domotics/noderedtest1/.node-red**

{
    "name": "node-red-project",
    "description": "A Node-RED Project",
    "version": "0.0.1",
    "private": true,
    "dependencies": {
        "debug": "^4.3.5",
        "node-red": "^4.0.2",
        "pm2": "^5.4.2",
        "test": "file:projects/test",
        "uuid": "^10.0.0"
    }
}

**/home/domotics/noderedtest1/.node-red/projects/test**

{
    "name": "test",
    "description": "test",
    "version": "0.0.1",
    "dependencies": {
        "node-red-contrib-config": "1.2.1",
        "node-red-contrib-mongodb4": "2.5.2",
        "@flowfuse/node-red-dashboard": "1.13.0",
        "@flowfuse/node-red-dashboard-2-ui-iframe": "1.1.0",
        "@colinl/node-red-dashboard-2-ui-gauge-classic": "1.2.0",
        "node-red-contrib-moment":	"5.0.0",
        "node-red-contrib-redis": "1.3.9",
        "@flowfuse/node-red-dashboard-2-ui-flowviewer": "1.0.0"
    },
    "node-red": {
        "settings": {
            "flowFile": "flows.json",
            "credentialsFile": "flows_cred.json"
        }
    }
}


An idea - when the process of the third-party nodes during installation expect their own entry for example "@flowfuse/node-red-dashboard-2-ui-iframe" in the package.json - they don't find it in my primary package.json, because they are defined in the second one. And then they make no entry.

I see you are using projects, @joepavitt the package.json file location is not in the same directory as flows file when projects are in use. I wonder whether anyone has tested this with projects. I don't use them.

[Edit] I got this wrong, the package.json file is in the project folder, not the .node-red folder, so perhaps this is the problem.

How are you installing the nodes? I thought that when using projects that it was the package.json in the .node-red folder that was used, but I may be wrong.

[Edit] Projects : Node-RED tells me that I am wrong, each project has its own package.json.

Yes @Colin you are right ( long story short :wink: ) Thx
Make it sense to test it - I can move the entries from the second one into the first and reinstall.

Just copy them from the second to the first (leave it in the second too) and restart node-red and see if it works. That may tell you whether this is the problem. It may have undesired side effects though, messing with package.json is generally not a good idea. Make sure you have up to date backups just in case.