Header Doesn't Always Load

[apop880]

Recently, I've been having an issue where custom header won't load. The regular Home Assistant header loads without being compact or styled. This doesn't seem to be happening in the mobile app, only in Chrome on Windows 10. I've tried clearing cache without success as well. Here's the error I get in Chrome Dev Tools:

Uncaught TypeError: Cannot read property 'hass' of null
    at getHass (custom-header.js:1)
    at custom-header.js:1

I'm on the 1.7.7 release of Custom Header, installed through HACS and configured in YAML mode. I'm on .115 of Home Assistant but saw the same on .114 as well. Here's my YAML configuration for Custom Header:

custom_header:
  background: 'rgba(51,51,51,0.6)'
  compact_mode: true
  voice_hide: true
  chevrons: false
  exceptions:
    - conditions:
        user: redacted
      config:
        kiosk_mode: true
        show_tabs: '7,8'
    - conditions:
        user_agent: Android
      config:
        menu_hide: true
        options_hide: true
        hide_tabs: '7,8'
    - conditions:
        user: redacted
        user_agent: Android
      config:
        menu_hide: true
        options_hide: true
        hide_tabs: '6,7,8'

Refreshing the browser reliably causes the header to properly load.

[github-actions]

Important:

Issues that don't provide the necessary information listed below may not get a reply and will be closed until the info is provided.

is the current version of Custom Header. Be sure that you are using the latest version by checking your browser's dev tools console (usually found by pressing F12). If this doesn't display the current version either clear your cache or reinstall.

If you haven't yet done so, please read the "Before Posting an Issue" section of the docs site.

Include as much of the following info as you can to help me replicate and investigate your issue:

• A copy/paste of your Custom Header config (found in "Raw Config Editor" or ui-lovelace.yaml).
  Use the tip at the end of this post to format it correctly.
• Any errors relevant to Custom Header found in the HA logs
• Any relevant errors found in your browsers dev console (F12)
• The version of Home Assistant and Custom Header you are using
• The browsers or apps that are affected (i.e. Firefox, Chrome, Chrome Mobile, iOS HA Companion app, etc.)
• Installation method (HACS or manual)
• Lovelace Mode (YAML or Storage). If you are unsure, you are most likely using Storage.

When pasting in your config always place 3 backticks ``` above the first line of your config and after the last line. Doing this will format it correctly so that I may find any formatting errors in your config.

[maykar]

This has been addressed in the latest pre-release 1.7.8. Please, report back here and let me know if it has fixed your issues.

To view pre-releases in HACS go to the Custom Header listing under "Frontend", click the 3 dots in the right hand corner, select "Reinstall", turn on "Show beta versions", select 1.7.8, and hit "Install". Clear cache afterwards just in case.

If you do not see the version 1.7.8 reported in your browser's dev tools console (F12). You may need to reinstall or clear cache. If you installed manually, make sure you're adding to the URL version number in your Lovelace resources.

[maykar]

Closing as I'm pushing this into a full release and I'm confident this should be solved. If not please let me know.

[apop880]

I've updated to 1.7.9 and cleared cache, but still had the issue this morning with a new error message:

Uncaught TypeError: Cannot read property 'querySelector' of null
    at ha_elements (custom-header.js:1)
    at custom-header.js:146

The console does show the details of the custom header version, device ID, and user, which it did not with the previous issue.

Let me know if this issue can be re-opened or if you want me to open a new one for the different error.

[maykar]

No worries, I'll reopen and investigate further. Will keep you updated and let you know if I need more info. Thanks!

[apop880]

Got a different error this morning:

Uncaught TypeError: Cannot read property 'user' of undefined
    at custom-header.js:146