UIBUILDER not loading anything from a HTML

Hi,

I've managed to create some weird linux PC crash / chain reboots with this fc block:

[{"id":"ceaa5ed4a9a46894","type":"function","z":"c6fc212c195885df","name":"save to context","func":"/*\nconst propertyName = Object.keys(msg)[0];\nconst propertyValue = msg[propertyName];\nconst contextKey = `${propertyName}-${propertyValue}`;\nflow.set(contextKey, msg.status)\n*/\n\nif (msg.table_act) {\n    var arr1 = []\n    for (var i=0; i++; i<35) {\n        const contextKey = `table_act-${i}`;\n        arr1.push(flow.get(contextKey, msg.status))\n    }\n    for (var i = 99; i++; i < 102) {\n        const contextKey = `table_act-${i}`;\n        arr1.push(flow.get(contextKey, msg.status))\n    }\n    global.set('mattress_on', arr1)\n}\nreturn null;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":1040,"y":460,"wires":[[]]}]

Linux Debian 12
Node-RED v3.0.2
uibuilder v6.5.0

Anyway, after I phisicaly disconnected the ethernet cable I was able to connect to the Node-RED once again and remove uibuilder input link.

But, after that I can't get uibuilder to load any library or index.js file. I've checked if the files are still in their place and they are and I can access them with no problem. CSS loads because I do see a background, but nothing else from HTML

Let me show you the errors first:

And here is the index.html file:

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>.....</title>
        <link rel="icon" href="./resources/viking.png">

        <!-- #region Supporting CSS. -->
        <link type="text/css" rel="stylesheet" href="../uibuilder/vendor/bootstrap/dist/css/bootstrap.min.css" />
        <link type="text/css" rel="stylesheet" href="../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.css" />
        <link type="text/css" rel="stylesheet" href="./index.css" media="all"><!-- Your own CSS -->
        <!-- #endregion -->

        <!-- #region Supporting Scripts. These MUST be in the right order. Note no leading / - socket.io no longer needed -->
        <!--<script defer src="../uibuilder/vendor/socket.io/socket.io.js">/*  OLD */</script>-->
        <script defer src="../uibuilder/vendor/vue/dist/vue.js">/* prod version with component compiler */</script>
        <script defer src="../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.js">/* remove 'min.' to use dev version */</script>

        <script defer src="../uibuilder/vendor/vega/build/vega.js"></script>
        <script defer src="../uibuilder/vendor/vega-embed/build/vega-embed.js"></script>
        <script defer src="../uibuilder/vendor/apexcharts/dist/apexcharts.js"></script>
        <script defer src="../uibuilder/vendor/vue-apexcharts/dist/vue-apexcharts.js"></script>
        <script defer src="../uibuilder/vendor/http-vue-loader/src/httpVueLoader.js"></script>
        <script defer src="../uibuilder/vendor/vue-router/dist/vue-router.js"></script>

        <!--<script src="./uibuilderfe.js">/* REQUIRED: remove 'min.' to use dev version */</script>-->
        <script defer src="../uibuilder/uibuilder.iife.js">/*  OLD */</script>
        <script defer src="./index.js">/* OPTIONAL: Put your custom code in that */</script>
        <!-- #endregion -->
    </head>

    <body>
        <div id="app" class="uib" v-cloak><!-- All UI code needs to be in here -->
            <Navbar></Navbar>
            <div class="sbar">
                <router-view></router-view>
            </div>
        </div>
    </body>
</html>

Anyone knows why is this happening?

Seems to be several things going on here.

Firstly, there shouldn't be anything in UIBUILDER that would lock you out from Node-RED. So I thing that something in you flow is going to be causing that. Are you able to share more about the flow? Such a lockout is usually due to a logic loop somewhere in the flow.

Then there is something odd from those warnings at the top of your image - that implies to me that you have some form of browser/system security capability installed that might be interfering with things. That might also have an impact on the errors. UIBUILDER, by default, enforces sensible security settings for the web server including a "no-sniff" setting on links - that is where you normally get the MIME errors. You often get those on CSS links if you don't specify the type but you've correctly done that so that isn't the issue here.

If you can share your front-end code, I can check that here to see if I get the same issues.

I can share parts of the code (tell me which because there are lots of vue components and the main one is huge), however when all inputs to the current uibuilder instance disconnected, and removed calls to index.js and html components I still get errors - thats why I think something in uibuilder got broken.

Upon creating a new test instance everything is ok.
One solution would be to delete current uibuilder instance, make a new one and copy the files inside it, but I wanted to know if there is another way

Edit: Now I see all the libraries are missing from uibuilder package manager....

Ah, OK, that explains the front-end errors but not the lock-out from Node-RED.

Feels like something has corrupted your filing system somehow.

Are the packages still there in ~/.node-red/uibuilder/node_modules?

cd ~/.node-red/uibuilder
npm ls --depth=0

Will show you what is actually installed even if the package.json file is corrupt (I think anyway). I'm assuming you have a standard install and haven't changed settings so adjust that folder if needed.

You might also want to do a full fs check to make sure you don't have any lingering corruption of the filing system.

Thanks, I will check tomorrow :+1:

Well,

after the 'event' yesterday I didn't know what to do so I deployed a flow with another uibuilder instance.
However, I wanted to deploy a Vue3 template which required me to install Vue (I though v3) package because I work with v2 on my project.

So I did.

After reading your post I went to check out the installed packages and only Vue v2.7.14 was installed.

Fact 1: what ever happened got overwritten by my install of (so I thought) Vue v3 package

Fact 2: It's fairly obvious that multiple consecutive Node-RED (100 times per second) context.get-s messed up the uibuilder package.json or deleted files from node_modules

The fix is easy (I think) - just need to install them again. Then I'll see if anything else got "destroyed"
But first to do a filesystem check..

It works after reinstall the packages.
This is the console now:

Don't remember seeing this Permission-Policy warns before...
Basicaly this is a new-ish Debian 12 install, updated and upgraded and it's not on a company domain.

Maybe I sould reinstall uibuilder completely?

I have a suspicion that there may be a rare race condition in the package.json handling. I have made a note to add some more consistency checking to make things more robust for future releases. This is the first report of such an issue though so mercifully rare if that is the issue. That checking should also cover the case of a corrupted package.json as well.

The permissions-policy errors do not come from UIBUILDER so there is no need to reinstall. They come either from a web server or a proxy server.

But, those errors are not impacting your use of Node-RED or UIBUILDER so you might choose to ignore them. The only concern is what is causing them - it feels to me as though you have a browser extension installed that is making additional calls either to the Internet or to the Node-RED server - either way, if that is the case, it probably shouldn't be and may be an unwanted extension. I would strongly suggest that you would want to review what extensions are installed and try turning them off until you discover the culprit. Something to do with auctions and maybe advertising?

1 Like

We are forced to use eiter Chrome od Edge, so I chose edge. Out company is blocking many sites, which I've experienced while learning more about NodeJS and VueJS. Even so I'm getting a warning while downloading Node-RED flow to my pc:

Anyway, I'd like to add one more thing which might explain why all this happened (and help you).
I deployed a couple of function nodes to compare whether is single msg MQTT receiving the same message as a dynamic MQTT node within 1 sec. If not, then every minute a message is sent to subscribe once again to all of cca 80 topics. Today after reboot I saw crazy things on my uibuilder UI, and upon inspection of the flow, I saw 5500 messages waiting at a 20msg/s rate limit node - which was right in front of uibuilder input. So, in 20 sec some 6000 messages was sent to a (thankfully) rate limit node which goes into uibuilder.
Imagine, with the function node I had before - where on every message, a for loop ran through 40 of flow.get commands, why everything crashed including whole linux OS. Only thing which puzzles me why package.json got damaged

I probably should test some rates for sending data into a uibuilder page. In theory, thousands if not 10's of thousands of messages per second should be easily handled. But there are a great many dependencies of course - network speeds, client performance, code complexity and other things running locally, server performance, flow complexity, data size, ...

So you might want to try tuning that rate limiter. As I mentioned before, the lock-out from Node-RED is going to be a Node-RED or server capacity issue I think though it is possible that the Socket.IO server that is used both by Node-RED itself and the uibuilder node could also have run into issues.

As I say, that could have been a rare race condition of some kind in the uibuilder code unless the server has a filing system issue.

Anyway, seems that you now have done some optimisation and added the rate limiter so you should now be able to tune the rate limiter to suite your needs. You could also check your front-end code to make sure that it can handle the load and isn't creating back-pressure on the Socket.IO server.

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