Frontend memory leak when combined with room-card

qupada commented 7 months ago

My Home Assistant version: 2023.11.2

My lovelace configuration method (GUI or yaml): GUI

What I am doing: Minimal editing of border and padding to remove interior borders inside nested cards (using room-card with nested glance and others).

Nested cards have the following added, to remove interior borders and condense the layout. Some other minor tweaks, but vast majority is just this:

card_mod:
  style: |
    ha-card {
      border: none;
      padding: 0 !important;
    }

What I expected to happen: Normal CSS modification.

What happened instead:

Unbounded Javascript memory growth, starting (according to Chrome developer tools) around 30MB on a fresh page load, peaking at around 2.4GB before the tab hangs or crashes outright. Memory use consistently increases by around 0.8 - 1.2MB/s with around 15 cards having the above configuration, and seems to scale relatively linearly (60kB/s with 1 card).
Almost all interaction with the dashboard is unusuably laggy after a tab has been open for more than around a minute (around 0.5GB of memory use); single clicks end up treated as long click, some actions run but GUI state does not update for 5-10 seconds, and scrolling is laggy and jumps around randomly.
Android app is almost entirely unusable after around 1-2 interactions with the dashboard. Requires a full force close of the app to re-gain control.

Removing card-mod immediately resolves the issue.

Minimal steps to reproduce: Newly-created dashboard. One room-card, one nested glance card, one light entity:

  - title: test
    path: test
    badges: []
    cards:
      - type: custom:room-card
        title: Office
        cards:
          - type: glance
            show_name: true
            show_icon: true
            show_state: false
            state_color: true
            card_mod:
              style: |
                ha-card {
                  border: none;
                  padding: 0 !important;
                }
            entities:
              - entity: light.office_ceiling
                name: Ceiling
                tap_action:
                  action: toggle

This configuration started at 24MB of memory usage, and in the around 15 minutes it's taken to write this bug report is at 91MB.

Error messages from the browser console: None. (Previously did receive the "Performance improvements" warning, but no other client-side errors)

Home assistant log shows a "slow client" log entry:

[140117554859456] Thomas Kear from 127.0.0.1 (Mozilla/5.0 (X11; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/119.0): Client unable to keep up with pending messages. Stayed over 1024 for 5 seconds. The system's load is too high or an integration is misbehaving

By putting an X in the boxes ([]) below, I indicate that I:

[X] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
[X] Have made sure I am using the latest version of the plugin.
[X] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
[X] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

ildar170975 commented 7 months ago

Do you see same with any conventional card?

qupada commented 7 months ago

Amended the dashboard to just a single glance card:

  - title: Test
    path: test
    badges: []
    cards:
      - type: glance
        entities:
          - entity: light.office_ceiling
        card_mod:
          style: |
            ha-card {
              border: none;
              padding: 0 !important;
            }

It had the same behaviour the first time I loaded it, then I hard reloaded the tab a few times and it didn't do it again. So I'm going to have to say probably not.

Potentially then, bad behaviour with the nesting in room-card?

I just discovered this, which sounds like the same symptom, but apparently a vastly different cause: https://github.com/marcokreeft87/room-card/issues/290

ildar170975 commented 7 months ago

Not many conventional cards may contain other cards - vertical(horizontal)-stack, picture-elements, grid; also some custom cards like stack-in-card. For all of them it is possible to define card-mod on the inner card's level like:

type: some_outer_card
cards:
  - type: some_inner_card
    card_mod:
      style: |
        ha-card { ... }

Since I am not using room-card - cannot say anything bad about it...

Anyway - suggest to rename the issue to reflect the fact that this happens with some particular custom card... Also, may be you should ask this custom card's developer about issues with card-mod?

qupada commented 7 months ago

Filed as https://github.com/marcokreeft87/room-card/issues/291 with a link back here :)

qupada commented 7 months ago

The issue appears to have been introduced with room-card 1.08.01, reverting to 1.08.00 has for now remedied it.

Thanks for your help @ildar170975, I feel like I should probably close this issue as the problem appears to be on the other side of the fence.

thomasloven / lovelace-card-mod

Frontend memory leak when combined with room-card #312