extra_badge on attributes causing (frontend) errors?

[Mariusthvdb]

Checklist

• [X ] I'm running the latest version of CustomUI (Update guide) or using a specific release that is not marked as "Broken".
• [ X] I tried to force-refresh (Ctrl+Shift+R / Ctrl+F5) the browser
• [X ] (Optional, but recommended) I'm using Chrome or tried to reproduce the feature on Chrome.

Browser + Version: Safari, Chrome, on Mac

CustomUI version: 20180625 Home Assistant release (hass --version): 0.73.1 Problem-relevant configuration.yaml entries: for all my Hue and Tradfri lights I have customizations like below, which showed up just fine. `depending on the availability of Brightness and Color_temp, the extra_badges appeared on the sliders.

light.bureau_right:
  icon: mdi:desk-lamp
  state_card_mode: break-slider
  stretch_slider: true
  hide_control: false
  show_last_changed: false
  confirm_controls: true
  slider_theme:
    min: 0
    max: 255
    pin: true
    off_when_min: true
    report_when_not_changed: true
  extra_badge:
    - attribute: brightness
      unit: Br
    - attribute: color_temp
      unit: Co

and

light.drawer:
  icon: mdi:lamp
  extra_data_template: >
    if (attributes.hs_color || attributes.rgb_color) 
        return 'Hs: ' + attributes.hs_color
        + ' | ' +  'Rgb: ' + attributes.rgb_color;
    return null;
  state_card_mode: break-slider
  stretch_slider: true
  hide_control: false
  show_last_changed: true
  confirm_controls: true
  slider_theme:
    min: 0
    max: 255
    pin: true
    off_when_min: true
    report_when_not_changed: true
  extra_badge:
    - attribute: brightness
      unit: Br
    - attribute: color_temp
      unit: Co

Continuous log spamming is witnessed, especially when on pages with lights.

At first I suspected that to be caused by the connection to the Hue hub being dis-connected continuously , so called flapping, I was also suffering, for already a longer period. Havent been able to find the true cause for that yet, but it started being obvious after the move to Asyncio for Hue. Other topic, so I thought.

It now seems that both interact more than one would have suspected.Take the customizations out, and the 'flapping' is practically gone....As are these frontend errors.

00:57:53 ERROR (MainThread) [frontend.js.latest.201807080] https://mydomain.duckdns.org/frontend_latest/app-47a9b8a28d18c1f03ce16f220e977662.js:2:12641 TypeError: null is not an object (evaluating 't.substr')

As said, previously the extra badges for brightness and color_temp showed up nicely, as did the rgb or hs colors.

now only the lights are shown with sliders and icons:

which made me try to only take out the bits on the attributes, being the extra_data and the badges, like this:

light.drawer:
  icon: mdi:lamp
#  extra_data_template: >
#    if (attributes.hs_color || attributes.rgb_color) 
#        return 'Hs: ' + attributes.hs_color
#        + ' | ' +  'Rgb: ' + attributes.rgb_color;
#    return null;
  state_card_mode: break-slider
  stretch_slider: true
  hide_control: false
  show_last_changed: true
  confirm_controls: true
  slider_theme:
    min: 0
    max: 255
    pin: true
    off_when_min: true
    report_when_not_changed: true
#  extra_badge:
#    - attribute: brightness
#      unit: Br
#    - attribute: color_temp
#      unit: Co

and

light.bureau_right:
  icon: mdi:desk-lamp
  state_card_mode: break-slider
  stretch_slider: true
  hide_control: false
  show_last_changed: false
  confirm_controls: true
  slider_theme:
    min: 0
    max: 255
    pin: true
    off_when_min: true
    report_when_not_changed: true
#  extra_badge:
#    - attribute: brightness
#      unit: Br
#    - attribute: color_temp
#      unit: Co

as said, most flapping gone, practically no more frontend errors. which is cool, since it narrows down the issue, to reading the attributes.

Problem-relevant Home Assistant log entries:

00:57:53 ERROR (MainThread) [frontend.js.latest.201807080] https://mydomain.duckdns.org/frontend_latest/app-47a9b8a28d18c1f03ce16f220e977662.js:2:12641 TypeError: null is not an object (evaluating 't.substr')

Any errors from browser Javascript console:

[Mariusthvdb]

extra_badge on other sensors cause same frontend errors, could it be the extra_badge customization has gone incompatible?

many frontend errors with:

sensor.schimmel_sensor:
  icon: mdi:blur-radial
  extra_badge:
    - attribute: dewpoint
      unit: Dew
    - attribute: estimated_critical_temp
      unit: Crit
    - entity_id: sensor.rsd_temperature
      unit: "°C"
  templates:
    icon_color: >
      if (state > 60) return 'rgb(255, 0, 0)';
      return 'rgb(30, 144, 255)';

sensor itself:

- platform: mold_indicator
  name: Schimmel sensor
  indoor_temp_sensor: sensor.temperatuur_living
  indoor_humidity_sensor: sensor.luchtvochtigheid_living
  outdoor_temp_sensor: sensor.rsd_temperature
  calibration_factor: 1.16

no more errors when taken out the extra_badge

sensor.schimmel_sensor:
  icon: mdi:blur-radial
#  extra_badge:
#    - attribute: dewpoint
#      unit: Dew
#    - attribute: estimated_critical_temp
#      unit: Crit
#    - entity_id: sensor.rsd_temperature
#      unit: "°C"
  templates:
    icon_color: >
      if (state > 60) return 'rgb(255, 0, 0)';
      return 'rgb(30, 144, 255)';

additional detail:

seems only to be the case when extra_badge is based on attributes.

when based on the state of other sensors, all seems fine:

binary_sensor.multi_purpose_threshold:
  extra_badge:
    entity_id: sensor.multi_purpose_actueel

[andrey-git]

Fixed in 20180713