jomjol / AI-on-the-edge-device

Easy to use device for connecting "old" measuring units (water, power, gas, ...) to the digital world
https://jomjol.github.io/AI-on-the-edge-device-docs/
5.26k stars 580 forks source link

Webpage refresh not working anymore (Firefox) #3041

Open friedpa opened 2 months ago

friedpa commented 2 months ago

The Problem

I noticed today that the Webpage in Firefox is not working any longer. Unfortunately I cannot say since which version this behaviour occured. I remember that tis refresh was set to 5 Minutes.

Version

latest rolling: Commit: 32282ec+

Logfile

N/A

Expected Behavior

No response

Screenshots

No response

Additional Context

No response

SybexX commented 2 months ago

I think it's because of Firefox, because in my opinion the page is updated using a cookie.

the errors it gives:

Synchronous XMLHttpRequests on the main thread should no longer be used because it has detrimental effects on the end user experience. For further help see https://xhr.spec.whatwg.org/#sync-warning readconfigcommon.js

The page cookie does not have a valid value for the SameSite attribute. Soon, cookies without the "SameSite" attribute or with an invalid value for it will be treated as "Lax". This means the cookie is no longer sent to contexts belonging to a third party. If your application requires the cookie in these contexts, please add the "SameSite=None" attribute to it. For more information about the SameSite attribute, see https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite.

caco3 commented 2 months ago

Ich denke, das hat nichts mit den cookies zu tun. Das cookie haben wir ja nur, damit wir bei einem Page refresh wieder auf dem gleichen Tab landen.

Das Problem mit den Synchronous XMLHttpRequests ist, dass sie synchron sind. D.h., wenn man einen Request sendet, bleibt das ganze WebUI blockiert, bis die Antwort oder Timeout kommt. Das ist leider nicht sehr responsive, und ist nicht mehr zeitgemäss.

Eigentlich sollten wir das UI umbauen, dass das alles asynchron passiert. Aber das ist leider einiges an Arbeit, weshalb ich das von meiner Seite auf die lange Bank geschoben habe ala, geht ja auch ohne.

Aber zu deinem Problem: Ich meine auch, dass das mal funktioniert hat. Ich würde erwarten, dass das Web UI einen Timer hat (Javascript setInterval()), der die relevanten Daten periodisch auffrischt. Aber ich finde nichts dazu und sehe auch nicht, dass da mal etwas entfernt wurde :( Weist Du noch, was alles aktualisiert wurde? War es einfach alles auf der Overview-Seite?

Slider0007 commented 2 months ago

Hier wird das Refresh der overview page realisiert. https://github.com/jomjol/AI-on-the-edge-device/blob/rolling/sd-card%2Fhtml%2Foverview.html#L172

SybexX commented 2 months ago

Diese Funktion ist ja immer noch vorhanden, nur scheint dies nicht zu funktionieren. Ich habe mal im Internet nach Refresh gesucht und auch was funktionierendes gefunden, nur kamm jedes mal beim Refresh eine Meldung seitens Firefox und deshalb habe ich alles verworfen. Denn ob ich jetzt jedes mal beim Firefox auf "zulassen" klicke oder auf den Reiter Overview um die Seite zu aktuallisieren, macht für mich kein Unterschied/Sinn.

friedpa commented 2 months ago

Es war nur die Overview Seite die Refreshed wurde. Ich habe meine zwei Systeme auf einem Übersichtsmonitor im Büro angezeigt und das war halt praktisch mit dem AutoRefresh. Man kann das Problem in Firefox aber auch so lösen, dass man ein Addon wie TabReloader verwendet.

caco3 commented 2 months ago

Hier wird das Refresh der overview page realisiert. https://github.com/jomjol/AI-on-the-edge-device/blob/rolling/sd-card%2Fhtml%2Foverview.html#L172

Danke! Und soweit ich sehen kann, funktioniert es auch noch, zumindest unter Linux mit Firefox 124: grafik

Der richtige Weg wäre, wo etwas mittels Websocket zu lösen. Ich hatte das mal in https://github.com/jomjol/AI-on-the-edge-device/pull/2370 versucht, allerdings lief es nicht stabil. Vermutlich passen einige Thread sizes noch nicht (obwohl ich da recht rumgespielt habe).

Langfristig müssen wir aber auch auf asynchronous wechseln :(

SybexX commented 2 months ago

jetz weiß ich weshalb Autorefresh nicht geht^^ in der overview, index und einigen anderen Dateien wurde aus "xhttp.open("GET", url, false);" auf "xhttp.open("GET", url, true);" gestellt, das wurde bestimmt gemacht um den Fehler "Synchronous XMLHttpRequests" zu beseitigen, nur verursacht dies halt Probleme.

Slider0007 commented 2 months ago

Und soweit ich sehen kann, funktioniert es auch noch, zumindest unter Linux mit Firefox 124:

Ich habe den gleichen Refresh Algo bei mir auch im Einsatz. Mit Firefox damit aber keine Probleme. Wenn Probleme, dann müsste es im Aufruf-Kontext irgendwo haken.

Der richtige Weg wäre, wo etwas mittels Websocket zu lösen. Ich hatte das mal in #2370 versucht, allerdings lief es nicht stabil. Vermutlich passen einige Thread sizes noch nicht (obwohl ich da recht rumgespielt habe).

Langfristig müssen wir aber auch auf asynchronous wechseln :(

Meiner Meinung nach muss es nicht zwingend Websocket sein, sondern nur eine effizientere Polling Strategie (mit so wenig Requests wie möglich, da der Webserver immer nur einen Request verarbeiten kann) und asynchronem Update des Contents anstatt die gesamte Seite zu refreshen. Hiermit lässt sich eine sehr niedrige Update Rate und annehmbare Responiveness realisieren.

So habe ich das in meinem Fork realisiert: Demo Sequenz einer Runde

Wenn Umstellung auf async requests, dann sollte auch gleich auf Fetch API umgestellt werden (zukunftfähiger). Das habe ich mir auch noch vorgenommen, bin aber noch nicht dazu gekommen. Async bringt schon etwas Responsiveness, auf jeden Fall gefühlt, da die Seite nicht mehr blockiert wird.