search

pkissling / clock-weather-card

A Home Assistant Card indicating today's date/time, along with an iOS inspired weather forecast for the next days with animated icons
Other
304 stars 65 forks source link

flood of console errors - provider: met.no #335

Closed Perfect-Web closed 3 months ago

Perfect-Web commented 4 months ago

Checklist:

Release with the issue: latest

Last working release (if known):

Browser and Operating System:

Description of problem:

Javascript errors shown in the web inspector (if applicable):

<div aria-expanded="true" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; flex: 0 0 auto; color: rgb(31, 31, 31); font-family: &quot;dejavu sans mono&quot;, monospace; font-size: 11px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(211, 227, 253); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><span class="source-code" style="box-sizing: border-box; min-width: 0px; min-height: 0px; font-family: var(--source-code-font-family); white-space: pre-wrap; font-size: var(--source-code-font-size) !important; line-height: 1.2;"><span class="console-message-anchor" style="box-sizing: border-box; min-width: 0px; min-height: 0px; float: right; text-align: right; max-width: 100%; margin-left: 4px;"><span class="devtools-link" role="link" tabindex="-1" title="http://192.168.1.185:8250/hacsfiles/clock-weather-card/clock-weather-card.js?hacstag=522634019222:175" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;"><br class="Apple-interchange-newline">clock-weather-card.j<span class="devtools-link-ellipsis" style="box-sizing: border-box; min-width: 0px; min-height: 0px;">…</span>ag=522634019222:175</span> </span><span class="console-message-text" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--override-error-text-color) !important;">clock-weather-card - Error while rendering clock-weather-card component: <span class="object-value-error source-code" style="box-sizing: border-box; min-width: 0px; min-height: 0px; font-family: var(--source-code-font-family); white-space: pre-wrap; font-size: var(--source-code-font-size) !important; line-height: 1.2;"><span style="box-sizing: border-box; min-width: 0px; min-height: 0px;">TypeError: Cannot read properties of undefined (reading 'states')
<span style="box-sizing: border-box; min-width: 0px; min-height: 0px;">    at to.getWeather (<span class="devtools-link" role="link" tabindex="-1" title="http://192.168.1.185:8250/hacsfiles/clock-weather-card/clock-weather-card.js?hacstag=522634019222:243:2450" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">clock-weather-card.j<span class="devtools-link-ellipsis" style="box-sizing: border-box; min-width: 0px; min-height: 0px;">…</span>2634019222:243:2450</span>)
</span><span style="box-sizing: border-box; min-width: 0px; min-height: 0px;">    at to.renderForecast (<span class="devtools-link" role="link" tabindex="-1" title="http://192.168.1.185:8250/hacsfiles/clock-weather-card/clock-weather-card.js?hacstag=522634019222:213:72" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">clock-weather-card.j<span class="devtools-link-ellipsis" style="box-sizing: border-box; min-width: 0px; min-height: 0px;">…</span>522634019222:213:72</span>)
</span><span style="box-sizing: border-box; min-width: 0px; min-height: 0px;">    at <span class="devtools-link" role="link" tabindex="-1" title="http://192.168.1.185:8250/hacsfiles/clock-weather-card/clock-weather-card.js?hacstag=522634019222:193:30" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">clock-weather-card.j<span class="devtools-link-ellipsis" style="box-sizing: border-box; min-width: 0px; min-height: 0px;">…</span>522634019222:193:30</span>
</span><span style="box-sizing: border-box; min-width: 0px; min-height: 0px;">    at Ki (<span class="devtools-link" role="link" tabindex="-1" title="http://192.168.1.185:8250/hacsfiles/clock-weather-card/clock-weather-card.js?hacstag=522634019222:175:220597" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">clock-weather-card.j<span class="devtools-link-ellipsis" style="box-sizing: border-box; min-width: 0px; min-height: 0px;">…</span>34019222:175:220597</span>)
</span><span style="box-sizing: border-box; min-width: 0px; min-height: 0px;">    at to.render (<span class="devtools-link" role="link" tabindex="-1" title="http://192.168.1.185:8250/hacsfiles/clock-weather-card/clock-weather-card.js?hacstag=522634019222:193:17" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">clock-weather-card.j<span class="devtools-link-ellipsis" style="box-sizing: border-box; min-width: 0px; min-height: 0px;">…</span>522634019222:193:17</span>)
</span><span style="box-sizing: border-box; min-width: 0px; min-height: 0px;">    at to.update (<span class="devtools-link" role="link" tabindex="-1" title="http://192.168.1.185:8250/hacsfiles/clock-weather-card/clock-weather-card.js?hacstag=522634019222:24:298" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">clock-weather-card.j<span class="devtools-link-ellipsis" style="box-sizing: border-box; min-width: 0px; min-height: 0px;">…</span>522634019222:24:298</span>)
</span><span style="box-sizing: border-box; min-width: 0px; min-height: 0px;">    at to.performUpdate (<span class="devtools-link" role="link" tabindex="-1" title="http://192.168.1.185:8250/hacsfiles/clock-weather-card/clock-weather-card.js?hacstag=522634019222:12:5092" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">clock-weather-card.j<span class="devtools-link-ellipsis" style="box-sizing: border-box; min-width: 0px; min-height: 0px;">…</span>22634019222:12:5092</span>)
</span><span style="box-sizing: border-box; min-width: 0px; min-height: 0px;">    at to.scheduleUpdate (<span class="devtools-link" role="link" tabindex="-1" title="http://192.168.1.185:8250/hacsfiles/clock-weather-card/clock-weather-card.js?hacstag=522634019222:12:4739" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">clock-weather-card.j<span class="devtools-link-ellipsis" style="box-sizing: border-box; min-width: 0px; min-height: 0px;">…</span>22634019222:12:4739</span>)
</span><span style="box-sizing: border-box; min-width: 0px; min-height: 0px;">    at to._$Ej (<span class="devtools-link" role="link" tabindex="-1" title="http://192.168.1.185:8250/hacsfiles/clock-weather-card/clock-weather-card.js?hacstag=522634019222:12:4647" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">clock-weather-card.j<span class="devtools-link-ellipsis" style="box-sizing: border-box; min-width: 0px; min-height: 0px;">…</span>22634019222:12:4647</span>)</span></span></span></span></span></div><div class="" role="group" style="box-sizing: border-box; min-width: 0px; min-height: 0px; flex: 0 0 auto; color: rgb(31, 31, 31); font-family: &quot;dejavu sans mono&quot;, monospace; font-size: 11px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(211, 227, 253); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><span class="monospace stack-preview-container" style="display: inline-block; width: 1851px; --monospace-font-size: 11px; --monospace-font-family: dejavu sans mono,monospace; --source-code-font-size: 11px; --source-code-font-family: dejavu sans mono,monospace; box-sizing: border-box; min-width: 0px; min-height: 0px; font-family: var(--monospace-font-family); font-size: var(--monospace-font-size) !important;">
  | Ki | @ | clock-weather-card.j…ag=522634019222:175
-- | -- | -- | --
  | render | @ | clock-weather-card.j…ag=522634019222:193
  | update | @ | clock-weather-card.j…tag=522634019222:24
  | performUpdate | @ | clock-weather-card.j…tag=522634019222:12
  | scheduleUpdate | @ | clock-weather-card.j…tag=522634019222:12
  | _$Ej | @ | clock-weather-card.j…tag=522634019222:12
  | await in _$Ej (async) |   |  
  | requestUpdate | @ | clock-weather-card.j…tag=522634019222:12
  | set | @ | clock-weather-card.j…tag=522634019222:12
  | (anonymous) | @ | clock-weather-card.j…ag=522634019222:175

</span></div>

Additional information:

pkissling commented 4 months ago

hi, can you please post a screenshot of you weather entity from the developer tools section? from the stacktrace it looks as if the configured weather entity does not expose state. image

Perfect-Web commented 4 months ago

image image

    entities:
      - weather.forecast_home
      - var.protected_senzor_temperatura_exterior
    card:
      type: custom:clock-weather-card
      entity: weather.forecast_home
      weather_icon_type: fill
      locale: ro-RO
      temperature_sensor_template: >-
        {{ redacted }}
Perfect-Web commented 3 months ago

any updates on this ?

pkissling commented 3 months ago

i was not yet able to reproduce the problem. looking at the code it looks as if the 'hass' object within the card is not being set. the 'hass' object is normally set by the host (home-assistant). https://developers.home-assistant.io/docs/frontend/data/

do you have a setup / level of customization which could explain this scenario?

Perfect-Web commented 3 months ago

@pkissling it appears to happen when i add it into a stack-in-card

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:card-templater
    entities:
      - weather.forecast_home
      - var.protected_senzor_temperatura_exterior
    card:
      type: custom:clock-weather-card
      entity: weather.forecast_home
      weather_icon_type: fill
      show_humidity: true
      humidity_sensor_template: ....
pkissling commented 3 months ago

i was able to reproduce the problem using card:custom-templater. it appears as if the card does some manipulation to the hass object (replacing templated values), which causes the hass object to be undefined for some time during initial rendering of clock-weather-card. i'm afraid, there is nothing i can do from clock-weather-card side expect asking you to create an issue in the custom-templater repository. clock-weather-card relies on hass object to be available consistently.

Perfect-Web commented 3 months ago

@pkissling then maybe make humidity_sensor and temperature_sensor a template so that there is no need to use the card:custom-templater at all

pkissling commented 3 months ago

@pkissling then maybe make humidity_sensor and temperature_sensor a template so that there is no need to use the card:custom-templater at all

i don't quite understand whay you mean. can you please elaborate?

Perfect-Web commented 3 months ago

@pkissling so the 2 params humidity_sensor and temperature_sensor in my situation need to be templated (because they are dynamic) for example

 humidity_sensor_template: >-
        {% set sensors = expand(area_entities('exterior')|reject('in',
        integration_entities('group')))|selectattr('attributes.device_class',
        'eq', 'humidity')|map(attribute='entity_id')|list %} {{ sensors[0] if
        sensors|count > 0}}        
      temperature_sensor_template: >-
        {% set sensors = expand(area_entities('exterior')|reject('in',
        integration_entities('group')))|selectattr('attributes.device_class',
        'eq', 'temperature')|map(attribute='entity_id')|list %} {{ sensors[0] if
        sensors|count > 0}}
pkissling commented 3 months ago

now i see. please create a dedicated feature request if you would like to see this feature being implemented at some point. fur the time being, you could also create a dedicated sensor which contains this templating logic. this way, you would not require card:custom-templater at all. you could just expose the new sensor to clock-weather-card