Dashboard not appearing correctly on PC (but fine on phone)

[cdctx07]

Node.JS: v16.14.0-1
Node-Red: 2.2.2-1
Running on OpenWRT (Linksys WRT1900ACS), so accessing form my PC using that router's IP address. It's not my main house router, but an old router that I am using as a server through OpenWRT tools.

So, I recently got my Dashboard laid out nicely to monitor some keg weight sensors and to set what I have on my taps. I had tabs and groups and all that good stuff. As of last night and first thing this morning, they all looked fine on my PC (using Edge) and on my phone (Chrome browser).

However, as I closed and opened my Edge browser profiles, I had indications that Edge had updated (it asked me if I wanted default settings and to use Bing...always an indication it was updated and always sad that they have to keep asking if I want Bing). When I went back to my dashboard, it started looking all messed up. It is not applying any standard styling, not grouping cleanly, not applying a background...nothing. I opened the Edge Developer Tools and I get the following:

Failed to load resource: net::ERR_INVALID_CHUNKED_ENCODING
app.min.js:530 Rendered http://192.168.1.100:1880/ui/css/app.min.less successfully.
app.min.js:530 CSS for http://192.168.1.100:1880/ui/css/app.min.less generated in 112ms
app.min.js:530 Less has finished. CSS generated in 112ms
app.min.js:150 
        
You are using the ngTouch module. 
AngularJS Material already has mobile click, tap, and swipe support... 
ngTouch is not supported with AngularJS Material!
(anonymous) @ app.min.js:150
:1880/ui/loading.html:1 

Failed to load resource: the server responded with a status of 404 (Not Found)
app.min.js:530 Rendered http://192.168.1.100:1880/ui/css/app.min.less successfully.
app.min.js:530 CSS for http://192.168.1.100:1880/ui/css/app.min.less generated in 37ms
app.min.js:530 Less has finished. CSS generated in 37ms

I get the same issue if I open the page in Firefox, with this in the Firefox Web Developer Tools:

Source map error: Error: request failed with status 404
Resource URL: http://192.168.1.100:1880/ui/js/app.min.js
Source Map URL: angular-chart.min.js.map

However, if I open it on my phone, it looks perfectly fine; exactly how it did last night. Works fine... no issues at all.

Thinking I had some corruption on Node-RED, I backed up my flows, uninstalled Node-RED using npm and removed all folder instances. I then ran a clean install from opkg on OpenWRT. Node-RED is working well, I imported my backup, and I reset my palette add-ins. I then tied my Dashboard nodes back to tabs and groups. Same issue still on PC, but it looks totally fine on my phone.

The only thing I can think of is an update to Edge, but since the same issue appears in Firefix, I can't believe it's an Edge or Chromium issue.

Any thoughts on this?

[cdctx07]

From my phone in desktop mode; how it should actually appear on the PC.

[cdctx07]

Alright, so the issue is now sorted, but I cannot figure out why. I tested the issue by temporarily exposing my NR to the internet via my dynamic DNS and loading the dashboard from my phone and from my PC hot-spotting via my phone. I still had the same UI issue on the PC, but it was fine on the phone.

I then decided to connect to the open Linksys OpenWRT antenna (which doesn't pass through internet from my regular router but gives my ESPs something to send data to without clogging my regular network). This let me go to the same IP address but from that router's own internal system. The UI then acted right.

Seeing progress, I then connected my PC back to my regular router and the UI is now acting right... There was a forced restart somewhere in this process, but I had restarted several times today, so that wasn't likely the fix.

Anyways, this is here in case anyone can explain what happened or if someone sees something similar.

[TotallyInformation]

Looks like it possibly didn't load all of the CSS the first time around. Always worth trying a couple of ctrl-F5's when something odd happens like that on any web page. That overrides the cache and forces a full reload of the page.

[cdctx07]

Yeah.. I had cleared cache and ran refreshes.

I went back to the page this morning, and it looked fine. For fun and giggles, I pressed Ctrl + F5......and the CSS is broken again... –_–

I will try directly connecting to the OpenWRT signal again and see if that seems to cache the CSS properly. If so, I have to consider what is keeping the CSS from loading correctly as it leaves the OpenWRT NR server, goes through my main router, and arrives at my PC.

[cdctx07]

So test complete. When I connected to the OpenWRT server directly, it loaded the dashboard perfectly. Then I switched back to my home network and the page loads well if I press refresh or go to the URL. But when I press Ctrl + F5, the CSS breaks and the dashboard looks like a mess.

So yeah.. something between when the information leaves the OpenWRT server and arrives at my browser. That leaves me my regular router and my PC's WiFi card essentially...maybe whatever is after the WiFi card and before my browser. I've already reset my home network router.

**Update: So I exposed my NR port again with port forwarding, turned on the hotspot on my phone, then connected my PC to the hotspot. I went to my dynamic DNS address with the exposed external port and the dashboard loads just fine. Even after a Ctrl + F5 to make sure it access the CSS anew, it works just fine. BUT, if I go to the dynamic DNS page while connected to my own network router (not the OpenWRT server one), I get the same dashboard issue.

This is just odd.. the information still travels from my OpenWRT server through my home network router, whether to my PC internally or to the open internet if I expose the port to my dynamic DNS site. But if my PC is connected to the home network and I go to the dynamic DNS page, it fails to load the CSS; if I hotspot via my phone and go to the same URL, it work...