Crashing the browser consistently

Nuuki9 commented 1 year ago

I commented on Issues #130 but as that's closed and this may be a different cause, I thought a fresh issue was preferable.

I'm seeing consistent stability issues. I just updated to v1.4.2 and after a few tests to nail down the bahaviour, here's what I'm seeing:

Create a new dashboard tab.
Add a Bubble pop-up card - add a hash value and nothing else. Save.
Browse to that dashboard tab.
Now, browse to any other dashboard tab.

At that point the browser freezes, and eventually crashes with an "out of memory" warning. Looking at Task Manager, I see my memory usage for the my browser start to rise quickly at step 4, until it crashes.

I've repeated this a bunch of times, using Brave and Edge, and its happening every time.

I'm running HA 2023.10.5 in a container.

willliamchan commented 1 year ago

In addition to Nuuki9 I'd like to add mine here in the same thread.

HAOS 2023.10.5 iOS 17.1

In the early stage I had my dashboard fully adapted to Bubble Card and dashboard is still crashing with v1.4.2.

Cards that are in use with Bubble Card are: -

Logbook Card Mushroom Timer Bar Card mini-graph-card Horizon Card card-mod Weather Card Harmony Card

Tried the below and nothing really works so far

Reboot iPhone
Clear all browser caches (Safari and Edge in my case)
Reload Theme (option from HA)
Redownload Bubble Card

Any suggestions?

Cheers

mrfrag1 commented 1 year ago

Exactly the same for me.

willliamchan commented 1 year ago

I am not a programmer or advance Home Assistant user. But what I do found is whenever the crash/dashboard reload happens there are quite a few things logged by HA. I was able to collect them via Developer Tools > Events and listen to the call service events. The specific event that I am seeing every time is: -

event_type: call_service data: domain: system_log service: write service_data: logger: frontend.js.latest.202310050 message: |- Unhandled promise rejection from WebKit 605.1.15 on iOS 17.1 { "code": "not_found", "message": "Subscription not found." } level: debug origin: LOCAL time_fired: "2023-11-01T10:36:06.800693+00:00" context: id: {{various_ids}} parent_id: null user_id: {{my_user_id}}

Anyone got an idea how we might be able to help while Clooos is away? I do really like Bubble Card and hoping to use it as my only dashboard.

willliamchan commented 1 year ago

Once HA frontend is updated to 20231030.1 (Included from 2023.11.0 update) bubble card stability improved. A few points noted here:-

Viewing from iOS with HA App is more stable.
Viewing from iOS Edge/Safari is still not possible.
Picture Entity still causing Bubble Card crash on iOS, while no problem on iPadOS.
Editing from iPadOS has no problem.
Editing from Windows Edge browser still having problem. (When there are many cards)

Hope this help.

Nuuki9 commented 1 year ago

I'm getting identical behaviour on 2023.11.0 as I was seeing before, from a Windows browser.

mrfrag1 commented 1 year ago

Even after the update to 2023.11.0 the error still exists.

Nazze commented 1 year ago

Hey! I recently opened a bug with problems on mobile browser (any like safari, edge and Firefox). In HA companion it was completely refreshing. It got better for a while with version 1.4.2 (or was it even with 1.4.1), why the bug was closed, but I am now seeing it regularly again. I had to revert again to version 1.0.3 to have a stable setup again.

For me it looks like this in HA companion app (Firefox is default browser). Do you have similar issues?

https://github.com/Clooos/Bubble-Card/assets/33813707/d19f46e9-a63c-415a-af44-ba507812632e

PS: I hope that Clooos enjoys the holidays and the beer. Well deserved :-D

mrfrag1 commented 1 year ago

I have exactly the same problems.

When I use the popup card on a blank dashboard, HA becomes increasingly slow. Until it doesn't work at all anymore.

In the HA app on Android and in Edge on Windows.

It's only better in Chrome.

Still GREAT work. The bubble cards are great.

florianferry commented 1 year ago

Hey! I recently opened a bug with problems on mobile browser (any like safari, edge and Firefox). In HA companion it was completely refreshing. It got better for a while with version 1.4.2 (or was it even with 1.4.1), why the bug was closed, but I am now seeing it regularly again. I had to revert again to version 1.0.3 to have a stable setup again.

For me it looks like this in HA companion app (Firefox is default browser). Do you have similar issues?

RPReplay_Final1697095427.mov

PS: I hope that Clooos enjoys the holidays and the beer. Well deserved :-D

Exactly the same for me !

As I am currently redesigning my dashboard and desperately wanting some kind of sticky footer, I decided to let Bubble aside for the moment while hopefully it’ll get fixed and to try another one.

So I tried the Mobile First sticky footer, also very nice and also designed by Clooos (you make incredibly beautiful designs !!)

I ran into exactly the same issue ! My dashboard refreshes itself 2 or 3 times and ends up being stuck without anything displayed, exactly like the video previously posted.

Once the sticky footer is removed, everything is working fine.

Maybe the investigation should be oriented toward the compiled JS or something that might be coded the same way for both Mobile First and Bubble Card’s sticky footers instead of performance or memory leaks ?

mrfrag1 commented 1 year ago

With version 1.03 as Nazze said it works without memory problems

mrfrag1 commented 1 year ago

Correction: Even with 1.03 there are memory problems when editing the card in Edge. Only later

hellomarb commented 1 year ago

There are memory problems in 1.03, but it still works much better on my dashboards. Chrome Desktop at least is stable, iOS webkit not, but let's wait for a fix for that.

willliamchan commented 1 year ago

I had my iPhone updated to 17.1.1 and it has not crashed for 2 hours.

Nazze commented 1 year ago

I had my iPhone updated to 17.1.1 and it has not crashed for 2 hours.

Yeah! If I reboot my iPhone, it is stable for a couple of hours. But then the problems appears again.

Clooos commented 1 year ago

Thanks a lot for all your comments, it helps me a lot! Bubble Card is working great with Chrome (my main browser) but indeed on the other browsers it's pretty terrible, I realize that only now! 😅

I was able to reproduce the issue and that's a good start, this issue is my first priority now.

And I really enjoyed my holidays, thanks!

Clooos commented 1 year ago

Please tell me that it's working 🤞

https://github.com/Clooos/Bubble-Card/releases/tag/v1.4.3

hellomarb commented 1 year ago

Welcome back ;) I tested it on iOS 17.1.1: it's better, but I can provoke a reload by switching between 2 crowded views 2-3 times and scroll down and up . Without debugging it feels like the listeners on the elements causing the memory hog on scroll.

willliamchan commented 1 year ago

Welcome back @Cooos! Here is my result with iOS 17.1.1 + Bubble Card 1.4.3.

iOS HA App - Becoming useable, blank screen/refresh twice still happening, it is easy to test by "swiping down" for a screen refresh multiple times. Edge/Safari - Still not willing to load.

iPad HA App - As usual, normal. Edge/Safari - As usual, normal. Dashboard Editing - As usual, normal.

Windows Edge - As usual, no problem loading dashboard. Dashboard Editing (on Edge) - Still slow response, compared to some of the previous versions it seems better but so far, I found it will take hours to know the truth.

Clooos commented 1 year ago

And can you all confirm that 1.0.3 was better than this version? I really need to understand what is the root cause of all of this. And thanks again for all all your feedbacks!

Edit: And if you have some console logs to show me when it happens it will help me even more!

willliamchan commented 1 year ago

And can you all confirm that 1.0.3 was better than this version? I really need to understand what is the root cause of all of this. And thanks again for all all your feedbacks!

Edit: And if you have some console logs to show me when it happens it will help me even more!

For me, the more bubbles the slower / unstable. Whenever I need to update something I am now using either raw editor or temporary move one of the bubble to another dashboard and once it's in another dashboard everything back to normal.

Can you provide step by step how exactly we can help and get you the console logs?

Nazze commented 1 year ago

Edit: And if you have some console logs to show me when it happens it will help me even more!

I tried to access the console log with developer mode to debug the Firefox on my iPhone from my Mac. But when the issue happens,also the console refreshed, so I am not able to see any errors or so. Really strange.

Would it make sense that you provide us with a special debug version, with debug outputs or debug logs?

willliamchan commented 1 year ago

Ok so I got two iPhones here, one for me and one for my partner. My partners' one is more like an end-user device who will not routinely restart/reboot apps and after half of a day yesterday it starts doing the refresh and blank screen again. Restarting HA app won't help much.

While on my device, I've been getting the same since last night (about 8 hours after upgraded to iOS 17.1.1) and same until now.

@Clooos Please do let me know how I can get you the debug log if that might help you fix the issue.

mrfrag1 commented 1 year ago

Excellent !!!

I work with Windows 11 and Edge. With 1.43 i can now edit the bubble cards for 2 hours without it slowing down.

Thank you

Clooos commented 1 year ago

I'm installing the iOS simulator and I will try to debug this myself first. I really want to be able to reproduce this issue.

Clooos commented 12 months ago

Hi! I've just released v1.4.4, can you give me your feedbacks? 🤞 https://github.com/Clooos/Bubble-Card/releases/tag/v1.4.4

willliamchan commented 12 months ago

Hi! I've just released v1.4.4, can you give me your feedbacks? 🤞 https://github.com/Clooos/Bubble-Card/releases/tag/v1.4.4

This is great! For the very first time it runs with Edge on iOS, although I am still getting the same with Safari but I don't actually use Safari much.

I believe it will again take hours or days to observe if there are still any other issues and at this point, please see my other findings.

Rotate between portrait mode and landscape, this one is obvious. Once it rotates and will get blank screen again. You have to restart HA app to get back to the dashboard.
Not sure if it is included from 1.4.4 but I found bubble card is very sensitive to invalid entity, let say if there is an invalid entity and bubble card will not give any visible error and simply just stop loading the button card, and seems like anything after the invalid entry will be ignored.

Talking about new features, do you have plans to support things like select, vacuum, fan, radiator... etc? Can't wait to migrate everything to bubble!

hellomarb commented 12 months ago

I experience the same crash and stuttering while scrolling as before. In an empty "demo" dashboard it works without problems, in a more complex one with picture cards, swiper and tabs it crashes on scroll down/up.

I will check later in the simulator, if it's happening there too.

Update: the browser rendering stack is overloaded by my cards. When I move the content of the popups in conditional cards based on an input_boolean the performance is good again. I did it only for the heaviest cards and now it is stable on iOS. The only thing missing currenlty is a way to call a service on close to rest the state.

Clooos commented 12 months ago

Thanks for your feedbacks! Here is a new beta version, can you please try to follow the instructions to configure it?

https://github.com/Clooos/Bubble-Card/releases/edit/v1.5.0-beta.1

hellomarb commented 12 months ago

Yes, it looks like it is the one! The speed increase is really great and until now I wasn't able to break it. The shadow dom of the popup content is empty until the call, like it should be (kudos for winning that fight!).

Great work, finally Home Assistant feels more like an app and not like a web interface! I will test it a bit over the next days.

Clooos commented 12 months ago

Just Yeah !!! 🍻

And now I really hope that it will stay stable after a few days of testing 🤞

willliamchan commented 12 months ago

Have no problem adding front_end part but If I delete /hacsfiles/Bubble-Card/bubble-card.js?hacstag=6801129191501 from resources I will get "custom element doesn't exist: bubble-card".

Any idea what I am missing?

Clooos commented 12 months ago

Just reboot Home Assistant now 🙂

hellomarb commented 12 months ago

I had to change the path to:

  extra_module_url:
    - /hacsfiles/Bubble-Card/bubble-card.js

It depends on your Home Assistant/HACS setup I think. You can check if <YOUR HOMEASSISTANT>/hacsfiles/Bubble-Card/bubble-card.js is accessible directly in the browser

Nazze commented 12 months ago

Hi! In the HA companion app, it seems to work (at least for the first tests... but I will test for a while). But on Safari on iOS I still see the refreshes (a least Safari does not say "a problem occured" anymore). But on mobile Safari still not usable. It is okay for me, because I am using the HA companion app, but it seems it is still not fixed 100%..

Clooos commented 12 months ago

I'm reopening this, that was a miss-click. And it was a typo in the instructions @hellomarb, I've changed it!

Thanks again for all your precious feedbacks!

willliamchan commented 12 months ago

I had to change the path to:
  extra_module_url:
    - /hacsfiles/Bubble-Card/bubble-card.js
It depends on your Home Assistant/HACS setup I think. You can check if <YOUR HOMEASSISTANT>/hacsfiles/Bubble-Card/bubble-card.js is accessible directly in the browser

Gotcha thanks!

Clooos commented 12 months ago

Did you had to clear your browser cache? I'm still not sure if it's optional or not. And on iOS did you tried to reboot your devices once again?

willliamchan commented 12 months ago

Just tweaked the path, delete js from resources page and rebooting now!

Will clear the cache too just in case. Should this going to work with also picture card with camera entity too?

Clooos commented 12 months ago

Should this going to work with also picture card with camera entity too?

I haven't tried that yet 🤞

willliamchan commented 12 months ago

Okay! Turned out it wasn't I defined invalid path but Edge on Windows require to clear all cookies (i tried to clear all except for cookie and it didn't work)

I quickly tested to also add a picture card + camera snapshot plus a camera stream card. But it starts reloading from the background and I am stuck at the "Save" screen.

willliamchan commented 12 months ago

I just had mine rolled back to 1.4.4. As with 1.5.0 Beta I am having the below issues:

Edge on Windows - Dashboard reload randomly and result getting a message in the middle of dashboard saying “Reload UI”. While the reload not working and when this happens I will temporarily lose connection to HA.

HA App on iOS - If I leave the screen on the dashboard for a while it will start reloading. Although I will get the dashboard back but 1.4.4 seems more stable for me.

Nazze commented 12 months ago

Yeah, I can confirm that reload is happening for me, too, on th HA comp. app with the latest beta. I reverted to 1.0.3 as of now.

Clooos commented 12 months ago

Can you show me your console logs when this is happening? Is it possible that any of you as an error related with card-mod? ("You may not getting optimal perf..."), if it's the case just remove card-mod from your resources then clear the cache and see if the error is gone.

Update: Actually this issue is only if you still have card-mod.js in your resources and the error twice in your console, the error is still present without it but it's a false positive.

willliamchan commented 12 months ago

Do you mean we can't add card-mod as frontend? I'll probably wait for your next release as 1.4.4 so far the most stable for me.

Clooos commented 12 months ago

Yes you can have it of course, just not twice. And yes this version is not stable enough yet, but I believe that this beta is going in the right way 🤞

willliamchan commented 12 months ago

It's not twice, as I had both card-mod.js and bubble-card.js removed from resources list when testing.

Just want to report back here I don't see it slowed down on iOS so far with 1.4.4, a few things stay the same though: -

Dashboard editing using Edge on a Windows device, it takes long time to load and save. (got a feeling once this is sorted and picture entity with camera will work too)
Rotate will crash bubble cards on iOS. (I don't mean to rotate my screen for fun but it just happens when I am moving around with bubble dash on foreground.

Clooos commented 11 months ago

To everyone here, by any chance do you have one or more cameras inside of your pop-ups? I've just tried without cameras and everything is really smooth (almost no CPU used by Bubble Card). I'm working on a way to disable the cameras when the pop-ups are closed.

willliamchan commented 11 months ago

To everyone here, by any chance do you have one or more cameras inside of your pop-ups? I've just tried without cameras and everything is really smooth (almost no CPU used by Bubble Card). I'm working on a way to disable the cameras when the pop-ups are closed.

Happy Thursday!

So far so good here on 1.4.4 without cameras.

When you are fixing the camera can you please also have a look at why it becomes less responsive when editing the dashboard using UI? It slows down usually after I add a card and when choosing entity.

willliamchan commented 11 months ago

I just went through re-pairing 110 ZigBee devices last weekend, and it turned out that a few of them got a different entity name after re-pairing. Of course, this has nothing to do with Bubble Cards, but what I found was that Bubble Cards are very sensitive to invalid entities.

The moment I had everything repaired, I looked at my Bubble dashboard and attempted to check if anything was missing. While the loading time was slow, and if there were any invalid entities, Bubble Cards hid them instead of giving a visible error. In this case, it is either the users knows/remember exactly what was being added or they will need to go through the codes manually.

This makes me wonder also, let say if I have an entity somehow dropped from the network, will it affect the performance of Bubble Cards too?

Nazze commented 11 months ago

To everyone here, by any chance do you have one or more cameras inside of your pop-ups? I've just tried without cameras and everything is really smooth (almost no CPU used by Bubble Card). I'm working on a way to disable the cameras when the pop-ups are closed.

Hi

I don't have cameras in my dashboard. I made an analysis, which cards I use. Maybe that helps..

I have removed all "unreachable/invalid" entities from my dashboard, but there was no change wrt to stability (tested with 1.5 beta)

Cheers Denis

Clooos / Bubble-Card

Crashing the browser consistently #152