UI won't load in Chrome

[iamandymcinnes]

Checklist

• [X] I have updated to the latest available Home Assistant version.
• [X] I have cleared the cache of my browser.
• [X] I have tried a different browser to see if it is related to my browser.

Describe the issue you are experiencing

UI doesn't fully load in chrome, I get half the dashboard load then it freezes and keeps saying wait.

Similar thing happening with the app on a pixel6.

Cleared cache and all site data and same happens again. Similar on the app too, but if I clear cache on that it works momentarily.

I can see a worker websocket request pending and that eventually fails.

No issues in edge, so perhaps something chrome related.

I'm on latest chrome and home assistant.

Describe the behavior you expected

The ui to load

Steps to reproduce the issue

Open home assistant in chrome Try to click on anything

What version of Home Assistant Core has the issue?

2023.9.2

What was the last working version of Home Assistant Core?

No response

In which browser are you experiencing the issue with?

Google Chrome Version 116.0.5845.188

Which operating system are you using to run this browser?

windows 10

State of relevant entities

No response

Problem-relevant frontend configuration

Multiple pending requests for urls like:

https://home.domain.co.uk/static/mdi/892a846dbff0a6d1dbb5b08fc6afac527f3e49ba.json

Javascript errors shown in your browser console/inspector

?auth_callback=1&code=f28210c56ec54ea4bddc1599ba0f040d&state=eyJoYXNzVXJsIjoiaHR0cHM6Ly9ob21lLmFuZGlzb2Z0LmNvLnVrIiwiY2xpZW50SWQiOiJodHRwczovL2hvbWUuYW5kaXNvZnQuY28udWsvIn0%3D:1     GET https://home.domain.co.uk/local/card-mod.js net::ERR_ABORTED 404
(anonymous) @ ?auth_callback=1&code=f28210c56ec54ea4bddc1599ba0f040d&state=eyJoYXNzVXJsIjoiaHR0cHM6Ly9ob21lLmFuZGlzb2Z0LmNvLnVrIiwiY2xpZW50SWQiOiJodHRwczovL2hvbWUuYW5kaXNvZnQuY28udWsvIn0%3D:1
/lovelace?auth_callb…nQuY28udWsvIn0%3D:1 Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: https://home.domain.co.uk/local/card-mod.js
load_resource.ts:32     GET https://home.domain.co.uk/browser_mod.js?automatically-added net::ERR_ABORTED 404
(anonymous) @ load_resource.ts:32
o @ load_resource.ts:6
n @ load_resource.ts:37
(anonymous) @ load-resources.ts:30
n @ load-resources.ts:12
(anonymous) @ ha-panel-lovelace.ts:235
Promise.then (async)
value @ ha-panel-lovelace.ts:233
value @ ha-panel-lovelace.ts:153
_$AE @ reactive-element.ts:1376
performUpdate @ reactive-element.ts:1343
scheduleUpdate @ reactive-element.ts:1261
_$Ej @ reactive-element.ts:1233
await in _$Ej (async)
requestUpdate @ reactive-element.ts:1208
_$Eu @ reactive-element.ts:946
_ @ reactive-element.ts:931
A @ lit-element.ts:115
o @ ha-panel-lovelace.ts:66
C @ scoped-custom-element-registry.js:385
t @ scoped-custom-element-registry.js:236
value @ hass-router-page.ts:296
value @ hass-router-page.ts:316
_currentLoadProm.d.then._currentLoadProm @ hass-router-page.ts:214
Promise.then (async)
value @ hass-router-page.ts:205
performUpdate @ reactive-element.ts:1329
scheduleUpdate @ reactive-element.ts:1261
_$Ej @ reactive-element.ts:1233
await in _$Ej (async)
requestUpdate @ reactive-element.ts:1208
_$Eu @ reactive-element.ts:946
_ @ reactive-element.ts:931
o @ hass-router-page.ts:48
r @ partial-panel-resolver.ts:44
C @ scoped-custom-element-registry.js:385
t @ scoped-custom-element-registry.js:236
u @ lit-html.ts:1129
g @ lit-html.ts:1543
_$AI @ lit-html.ts:1384
G @ lit-html.ts:2183
update @ lit-element.ts:165
performUpdate @ reactive-element.ts:1329
scheduleUpdate @ reactive-element.ts:1261
_$Ej @ reactive-element.ts:1233
await in _$Ej (async)
requestUpdate @ reactive-element.ts:1208
_$Eu @ reactive-element.ts:946
_ @ reactive-element.ts:931
A @ lit-element.ts:115
a @ home-assistant-main.ts:52
C @ scoped-custom-element-registry.js:385
t @ scoped-custom-element-registry.js:236
u @ lit-html.ts:1129
g @ lit-html.ts:1543
_$AI @ lit-html.ts:1384
G @ lit-html.ts:2183
update @ lit-element.ts:165
value @ home-assistant.ts:33
performUpdate @ reactive-element.ts:1329
scheduleUpdate @ reactive-element.ts:1261
_$Ej @ reactive-element.ts:1233
await in _$Ej (async)
requestUpdate @ reactive-element.ts:1208
set @ reactive-element.ts:726
value @ home-assistant.ts:208
await in value (async)
value @ home-assistant.ts:79
performUpdate @ reactive-element.ts:1327
scheduleUpdate @ reactive-element.ts:1261
_$Ej @ reactive-element.ts:1233
await in _$Ej (async)
requestUpdate @ reactive-element.ts:1208
set @ reactive-element.ts:726
value @ hass-base-mixin.ts:56
_updateHass @ context-mixin.ts:95
(anonymous) @ connection-mixin.ts:252
s @ store.js:19
(anonymous) @ collection.js:25
Promise.then (async)
d @ collection.js:25
u @ collection.js:27
(anonymous) @ collection.js:52
subscribe @ collection.js:96
S @ config.js:16
(anonymous) @ core.ts:118
Promise.then (async)
(anonymous) @ core.ts:113
(anonymous) @ core-fAiOncciMpo.js:1
load_resource.ts:13 Uncaught (in promise) https://home.domain.co.uk/browser_mod.js?automatically-added

Additional information

No response

[karwosts]

Seems to be some issue with your browser mod install. I would try remove that and see if problem goes away.

[iamandymcinnes]

I'll try removing it, but I don't think that is blocking tbh. I'm seeing it fail to even load the ui and getting the wait and exit message for chrome. I think it's more to do with those background worker threads that are timing out. I'll post back shortly so I can rule out the browser mod.

[iamandymcinnes]

No you might have been right, seems better. I'll see how it goes, bit strange as I wasn't using browser mods on this dashboard but just had it installed. I'll post a question over on the browser_mod gh to see if anyone else has seen weirdness. Thanks :)

[iamandymcinnes]

Still seeing this behaviour even with browser mod completely removed. The issue is less obvious on desktop chrome, but seeing it constantly on mobile Chrome 117.0.5938.60 and the android app. Even when I completely clear site data, close chrome and reopen it the UI just won't completely load and I can't click anything. Currently on my mobile the only way I can access home assistant is briefly on the mobile app which will let you click something briefly straight after clearing the app cache. But then after you have it goes back to not working again.

[karwosts]

Last time you posted a call stack with browser mod errors. Now that it's gone, do you see any new errors?

I also see card_mod in your call stack. It seems whatever CDN its trying to download from (domain.co.uk?) is not responding.

[iamandymcinnes]

I've resolved all console errors and on windows chrome it's fine, however I've noticed other users having app and chrome freezing issues on mobile. I can confirm this now consistently happens in the App and in Android Chrome. I went through the android companion issues and as it also freezes in android chrome, they've sent me back here.

https://github.com/home-assistant/android/issues/3891

[iamandymcinnes]

This is the same problem I am seeing on Android 13 on a Pixel 6: https://github.com/home-assistant/frontend/issues/17967

[alexruffell]

What you describe sounds like my issue. My main dashboard often does not fully load. One of the persistent errors mentions browser_mod which I installed a long time ago and removed without ever really using it. Regardless, my Chrome console shows that it fails to load but it doesn't tell me what is trying to load it. Also, when using the Android companion app, the main dashboard freezes and takes a while to start responding again. I most often kill the app and open it again. I did not think these two issues were related but you mentioned both so now I wonder.

How in the world do I uproot browser_mod? I do use card_mod... but not browser_mod.

[karwosts]

How in the world do I uproot browser_mod? I do use card_mod... but not browser_mod.

I would check and make sure the component is not installed in your integrations panel, and check the Dashboards/resources panel to make sure there are no browser_mod resources being loaded.

I do see that after removing the browser_mod custom component it still leaves a browser_mod.js module in the resources, and that will get automatically loaded on every page load regardless of whether you use it or not.

[iamandymcinnes]

You need to go in .storage and then remove the section for it in lovelace_resources, I've done that and no mention of browser_mod anymore but I still have this freezing issue.

It feels like something has changed somewhere probably in the last 2-3 releases if it's HA side, I don't think this is chrome specific anymore as people are noting it on IOS and safari and firefox too. So either something has changed in one or more hacs addons people use, like the charts people keep mentioning. Or something has changed in home assistant somewhere and it's either having an effect on hacs addons or it's affecting HA itself.

I can't narrow it down any further myself as I don't know where to look. I've tried the app and the frontend and provided all the logs I can and removed as many external factors like addons I don't use etc. I currently have no console errors and no weird things like browser_mods that seemed like a red herring at first.

Another guy seemed to be convinced the issue is something to do with the newest HAOS build and he setup a test rig on proxmox with the .4 and .5 version of HAOS showing slower loading. Some people are attributing it to history charts etc.

My phone is the key way I interact and right now it's just painful and has been for sometime, but without some guidance to provide more specific info that could help resolve the issue I'm a bit stuck. I've also updated to latest beta today and I still get the issue.

[karwosts]

I guess if you want to narrow it down, what specifically do you mean "the UI" won't load.

Does it happen on every page of every dashboard? If it works on some dashboards/views but not others, can you narrow down specific cards that seem to be causing an issue? Does it happen on an empty dashboard? Does it happen every time or only sometimes? Does it happen on non-dashboard pages like the settings page?

Lets narrow down specifically what works, and what doesn't.

[iamandymcinnes]

So on the app or mobile chrome, if I delete the cache / site data. I can load my dashboard. Obviously on the app it will load straight in to the dashboard at first.

This works and is as responsive as it always was.

Consistently if I close the app from a dashboard then reopen the app, it half loads the dashboard and I cannot click on anything menu, or widget. It is completely frozen other than it will after about 10 seconds scroll up and down the half loaded dashboard.

I've just created a new dashboard and not added anything to it so it is just loading all my components in the vanilla way. Cleared the cached. Reopened the app, set the new dashboard as default.

This new dashboard seems to load, so this is clearly pointing to an issue with something on my normal dashboard.

I haven't changed the dashboard in ages, but I have removed browser_mod and card_mod and a few other things I am not using, but only after the issue first presented.

Setting pages at least through android chrome if I went direct seemed ok too.

So I've got a little further but will have to do a lot more digging to workout what has broken on my original dashboard.

[alexruffell]

@iamandymcinnes - Thank you so much!! Indeed it was still listed in lovelace_resources even though it hasn't been on my system for over a year now. I removed it, rebooted, and I have no errors!

@karwosts this is my main dashboard:

The 3rd column often has issues. Today I replaced the plotly graphs with appex cards to see if it made a difference. Both plotly and appex seem to generate a ton of errors in Chrome's console:

Edit: The errors above may be related to me rebooting HA... but I see them all the time so there are surely others that are unrelated.

Edit2: @iamandymcinnes For it to happen all I need to do is open the app, then switch to another app for a few moments, go back to the Android HA companion app and it is most often frozen. My dashboard reverts back to the main dashboard automatically so that it shows me the top right of the dashboard where I have my navigation buttons (rooms, etc) and some main controls. I can press multiple room buttons and they get highlighted, but nothing happens. Then after a long wait, it quickly goes through the backlog of views I had clicked on.

[karwosts]

If you want support here you need to get rid of the custom cards (temporarily), we don't support them in this repository.

Don't switch plotly to apex, get rid of both of them (any other custom items) and see if you can still see the problem.

[github-actions[bot]]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[TransRapid]

Some consideration, I had some similar issues that were related to SSL when running a reverse proxy. Running Bullseye, venv, and NGINX.

[github-actions[bot]]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[canselcik]

I have no custom widgets, charts or anything. The only thing I have is a shell command that shouldn't be relevant at all and the UI freezes on Chrome right away on Dashboard. For some reason this doesn't happen in Incognito but it keeps happening despite clearing all site storage, making me think it is somehow related to an extension but all the potential culprits are disabled.

[canselcik]

Nothing too concrete but noticing sketchy details that perhaps could use more eyes.

When BitWarden extension is disabled, the page Lovelace dashboard loads fine. When BitWarden extension is enabled the page freezes.