[Bug]: Frontend loads sometimes slow

[Bascht74]

What happened?

Hi,

I am using the HA-Addon.
I got some UI issues when loading the frontend. Other people seems to have it, too: zigbee2mqtt/hassio-zigbee2mqtt#236

I tried to see, if direct access to the port fixes that (by adding port 8099 to the add-on configuration).
Here the rendering is OK, but every second time or so it takes very long to load...

The following file seems to be the cause:
http://homeassistant:8099/scripts/vendor.49fee1be1555be7ec8f9.js
and sometimes the css files...

If it doesn't work, a reload takes forever to load (still spinning):

What browsers are you seeing the problem on?

Chrome

Relevant stacktrace

? Please provide some info how to get this..

If a state.json.zip is needed, I can provide it.

Did you donwload state.json.zip?

I will not attach state.json.zip

[Bascht74]

Some info about my setup:

[Bascht74]

Found out that these "hangs" are only there if you reload/load:
http://homeassistant:8099/# (devices)

If you load/reload another page, e.g. http://homeassistant:8099/#/settings/settings
it load always fast. You can even switch over to the devices very fast.

If you reload http://homeassistant:8099/# again, it is very slow again...
(I can record a video if you like!)

Maybe this information helps...

[Bascht74]

http://homeassistant:8099/#/settings/settings reloads very fast and you can switch to every tab (devices, OTA) very fast.
If you load/reload http://homeassistant:8099/#/ota there is a delay as well. I takes some time sometimes. But still loads fast.

-> Maybe a timing issue in the devices tab?

If I use ingress, everything behaves the same, but a bit worse.
If I load/reload http://homeassistant:8123/api/hassio_ingress/xb7LC6wY8k-YRkNRfoE5t_AWau1HpMH6soEhQwWF4Q4/#/settings/settings --> all Ok
If http://homeassistant:8123/api/hassio_ingress/xb7LC6wY8k-YRkNRfoE5t_AWau1HpMH6soEhQwWF4Q4/#/ --> hangs very often or shows nothing or black background (no css loaded). If it hangs, chrome is not responding anymore, you can click reload, but nothing happens for a long time...

[nurikk]

Hi, thanks for detailed issue description. Let me check

[nurikk]

I've made few optimisations, it should get better from today release or dev branch

[nurikk]

Hi, try to switch to the latest dev branch

https://www.zigbee2mqtt.io/advanced/more/switch-to-dev-branch.html#switch-to-the-dev-branch

[Bascht74]

Hi,

tried it. Now I have:

HA-Version:

I recorded a video of this behavior. It is still there and only on the device tab!:
https://youtu.be/CqJWvxgKco0

Maybe it helps you to see something.

More findings:

• If it hangs while loading you can go e.g. to OTA (click on OTA) and then the device page will be loaded after a second (it doesn't go to OTA). Somehow clicking a link to another page helps.
• the device information is not received while it hangs. All devices show "offline".

Can you delay the switching of protocols (HTTP 101) to /api / websocket for a second or until all assets HTML, CSS, JS, pics ...) are fully loaded/rendered?
Maybe that step sometimes come too early...

See wireshark:

Seb

a workaround would be if you can set the start tab that will be presented if you load the base URL.

[nurikk]

I've checked, it seem there are some issues with ingress. It prevents caching and streams content as plain text, without any compression.

[Bascht74]

Ok, but the video I made was without ingress. I enabled direct access through port 8099. The issue is there as well.

I wanted to see weather ingress is responsible for this behavior as well. That’s why I used 8099 without ingress.

In Ingress everything is ok as well if you use the ingress link to the OTA tab and you switch to devices. If you access devices directly —> Problem.

A workaround would be if it is possible to select a main tab that is opened with the main URL.

[Bascht74]

If you want to take a look„live“ we could use e.g. teamviewer or ms teams.

[luberan]

I installed he Edge version of zigbee2mqtt add-on and no change, still loading and never loads. I am available for a teams call if you are willing to do some troubleshooting.

[Bascht74]

Something must be different between the OTA page and the devices page and their behavior while loading the page…

Can you tell me where these pages are saved in the file path. Maybe I can play with them…

[nurikk]

Ok, but the video I made was without ingress. I enabled direct access through port 8099. The issue is there as well.

I wanted to see weather ingress is responsible for this behavior as well. That’s why I used 8099 without ingress.

In Ingress everything is ok as well if you use the ingress link to the OTA tab and you switch to devices. If you access devices directly —> Problem.

A workaround would be if it is possible to select a main tab that is opened with the main URL.

how did you managed to open it without ingress?

[nurikk]

Okay, I've changed frontend port to 8485 (configured for Socat tcp-listen port) and can access frontend. And I see everything works fine

[nurikk]

Can you send me a screenshot of network tab? Like this

b?

[nurikk]

and configure your z2m like this. and open browser using this port?

s:

[Bascht74]

Ok, but the video I made was without ingress. I enabled direct access through port 8099. The issue is there as well.
I wanted to see weather ingress is responsible for this behavior as well. That’s why I used 8099 without ingress.
In Ingress everything is ok as well if you use the ingress link to the OTA tab and you switch to devices. If you access devices directly —> Problem.
A workaround would be if it is possible to select a main tab that is opened with the main URL.

how did you managed to open it without ingress?

I forked it and added the port:
https://github.com/Bascht74/hassio-zigbee2mqtt

If you add this via HA, you can use Port 8099 with the add-on as well as via ingress.
But your way is much easier I must confess. Use the Socat port... great idea...

[luberan]

When I changed the port number, access via HA panel gives me 502: Bad Gateway. When I try accessing it directly via localip:8485 I get again just loading , please wait...

[Bascht74]

When I changed the port number, access via HA panel gives me 502: Bad Gateway. When I try accessing it directly via localip:8485 I get again just loading , please wait...

That is normal as ingress expects the other port...
But for my test I will do it that way as I want to have as less difference as possible.

[nurikk]

When I changed the port number, access via HA panel gives me 502: Bad Gateway. When I try accessing it directly via localip:8485 I get again just loading , please wait...

That is normal as ingress expects the other port... But for my test I will do it that way as I want to have as less difference as possible.

open http://ipaddress:8485 after this operation

[luberan]

I did and could see the frontend, but with the same issue "loading, please wait" on the devices tab.

[nurikk]

I did and could see the frontend, but with the same issue "loading, please wait" on the devices tab.

can you send me screenshot from chrome dev tools? network tab. and btw do you have any devices joined your z2m?

[luberan]

192.168.89.241.txt

No devices yet joined.

[Bascht74]

Okay, I've changed frontend port to 8485 (configured for Socat tcp-listen port) and can access frontend. And I see everything works fine

OK, I used the original add-on again and changed the frontend port to 8485:

First run:

Reload:
(Loading 5-6 Seconds):

Reload again:

--> not loading, still spinning.

after some time:

and some time later:

Try to reload the devices page a couple of times after the page is shown --> hangs sometimes.
Try to reload the OTA page a couple of times --> takes some seconds --> OK

[nurikk]

192.168.89.241.txt

No devices yet joined.

Oh, this is confusing spinner, it should show just empty table header. In your case if you join a device you'll be able so see devices table. I've removed this spinner in latest dev commit

[nurikk]

Okay, I've changed frontend port to 8485 (configured for Socat tcp-listen port) and can access frontend. And I see everything works fine

OK, I used the original add-on again and changed the frontend port to 8485:

First run:

Reload: (Loading 5-6 Seconds):

Reload again: --> not loading, still spinning.

after some time:

and some time later:

Try to reload the devices page a couple of times after the page is shown --> hangs sometimes. Try to reload the OTA page a couple of times --> takes some seconds --> OK

Can you export network history (all cases, ingress + direct port access) as HAR dump?

[Bascht74]

Here is the first one via ingress:
ingress.zip

console:

result:

noticeable: If I open the devices tab --> at first all devices are offline. After 30 seconds or so they are online. But if you - after loading the devices tab -> devices offline - switch over to any other tab and switch right back to devices, the devices are online right away..

If this is OK that way, I will add the other...

[Bascht74]

@nurikk
Is there a way to test a workaround so that "/" opens e.g. dashboard and not devices as start tab. That would be even a good idea to have the possibility to select a starting point. For this test, a static change in the Sourcecode would fit.

Is there a way to get rid of the pics in the devices, just to check if it changes something (this is most noticeable difference between devices and OTA-Tab)? But I don't know what is the most effective way how to do that. I am able to change a files in the docker container.

[nurikk]

Can you send me HAR dump from direct connection? using 8485 port

[tteck]

I'm running bare-metal and have the slow loading frontend.
what I've learned to do is, go directly to the settings tab and back to the devices tab and everything is loaded
saves a minute or so waiting

[nurikk]

I'm running bare-metal and have the slow loading frontend. what I've learned to do is, go directly to the settings tab and back to the devices tab and everything is loaded saves a minute or so waiting

Hi, can you install this app? https://github.com/vi/websocat#installation
and then execute
websocat ws://192.168.1.200:8080/api > onConnect.json
(replace 192.168.1.200:8080 with your host ip and port) and then share onConnect.json with me?

and also network HAR dump from chrome dev tools

[nurikk]

Should be fixed now, can you check on latest dev branch?

[tteck]

WOW! Thank you for all of your hard work. It indeed is fixed, and fast!

[nurikk]

We still have small issue with hassio addon

[Bascht74]

@nurikk Hi, I was not too well the other days. Sorry that I didn't respond.
As I can see, you found it! Great! My slow loading is now gone, even in the devices tab!

There are two (quite) smaller issues left in the HA addon:

1. Sometimes the CSS ist not loaded correctly. Reload helps (mayby 2-3 time)
   ingress2.zip
   

2. Sometimes you get only a white screen. Reload helps (mayby 2-3 time):
   ingress.zip
   

I tried to understand you code a bit and two things I was wondering about:

1. In ws.js:

const wss = new WebSocket.Server({
    port: 8579,

Is this file ignored or the port internally used?
Port 8579 is not open to my knowledge in the HA environment.

2. I found some references like this in the Code.

Node-version
        with:
          node-version: 16

The HA addon seems to use Alpine Linux 3.14 (3.15 is out but not used in HA / for the docker-package so far). 3.14 = Node.js 14.17.0, 3.15 = nodejs 16.13 (LTS) / nodejs-current 17.0.
Would it help anyhow to use the newer 3.15 version (with newer node.js) for the docker-image?

Thx anyway for fixing the strong delay / reload issue!

Seb

[tteck]

0.6.57 loading slow again

[Bascht74]

I cannot confirm this. Still working good… Version installed: 0.6.57 tteckster ***@***.***> schrieb am So. 5. Dez. 2021 um 20:01:

…

0.6.57 loading slow again — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#1124 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/APZTA7T7EA2OBQD76ZQOVOLUPOZHNANCNFSM5JC75UZQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[tteck]

I'm definitely back to a minute or more to load.
0.6.55 was fast!

[nurikk]

0.6.57 loading slow again

can you send me HAR report from chrome dev tools?

[tteck]

0.6.57 loading slow again

can you send me HAR report from chrome dev tools?
192.168.86.104.zip

[nurikk]

0.6.57 loading slow again

can you send me HAR report from chrome dev tools?
192.168.86.104.zip

the file is 0 bytes size.
How to record HAR archive:

1. Open chrome dev tools on frontend page
2. Refresh the page
3. Export HAR

[nurikk]

I'm definitely back to a minute or more to load. 0.6.55 was fast!

fixed, thanks

[tteck]

0.6.58 fixed my problem! Thanks

[cpuks]

Is this issue sorted as I have to stay on stable branch due to lack of time. Maybe someone with running z2m on bare metal can confirm? As I was pulling my hair off - it wasn't easy to find that issue. Glad it's addressed.

[blackwiz4rd]

I can confirm this version also solved my problems in loading the frontend. Nice job and thanks.

[Bascht74]

Yes, but the ingress bug is still happening. So I will close this issue, because it is not about it.

[litecross91]

Slow me again.