[Bug]: Frontend loads sometimes slow

Bascht74 commented 2 years ago

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: https://github.com/zigbee2mqtt/hassio-zigbee2mqtt/issues/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 commented 2 years ago

Some info about my setup:

Bascht74 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

Hi, thanks for detailed issue description. Let me check

nurikk commented 2 years ago

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

nurikk commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

Bascht74 commented 2 years ago

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 commented 2 years ago

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

luberan commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

b?

nurikk commented 2 years ago

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

s:

Bascht74 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

nurikk commented 2 years ago

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 commented 2 years ago

192.168.89.241.txt

No devices yet joined.

Bascht74 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

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

tteck commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

tteck commented 2 years ago

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

nurikk commented 2 years ago

We still have small issue with hassio addon

Bascht74 commented 2 years ago

@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:

Sometimes the CSS ist not loaded correctly. Reload helps (mayby 2-3 time) ingress2.zip
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:

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.
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 commented 2 years ago

0.6.57 loading slow again

Bascht74 commented 2 years ago

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 https://github.com/nurikk/zigbee2mqtt-frontend/issues/1124#issuecomment-986282488, 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 commented 2 years ago

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

nurikk commented 2 years ago

0.6.57 loading slow again

can you send me HAR report from chrome dev tools?

tteck commented 2 years ago

0.6.57 loading slow again

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

nurikk commented 2 years ago

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 commented 2 years ago

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

fixed, thanks

tteck commented 2 years ago

0.6.58 fixed my problem! Thanks

cpuks commented 2 years ago

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 commented 2 years ago

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

Bascht74 commented 2 years ago

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

litecross91 commented 1 year ago

Slow me again.

nurikk / zigbee2mqtt-frontend