home-assistant / frontend

:lollipop: Frontend for Home Assistant
https://demo.home-assistant.io
Other
3.81k stars 2.61k forks source link

Error while loading page lovelace. on 2024.6.0 #21004

Closed remoteassist closed 1 month ago

remoteassist commented 1 month ago

Checklist

Describe the issue you are experiencing

Error - "error while loading page lovelace"

Issue exists on:

Issue does not exist on:

Describe the behavior you expected

To use the UI as per normal

Steps to reproduce the issue

1.Upgrade to 2024.6.0 2.Logging into old ipad running iOS 12.5.7 see https://github.com/home-assistant/frontend/issues/20697 for previous issue ...

What version of Home Assistant Core has the issue?

2024.6.0

What was the last working version of Home Assistant Core?

latest 2024.5.x

In which browser are you experiencing the issue with?

home assistant companion 2023.2

Which operating system are you using to run this browser?

iOS 12.5.7

State of relevant entities

No response

Problem-relevant frontend configuration

No response

Javascript errors shown in your browser console/inspector

No response

Additional information

No response

ccmacaluso commented 1 month ago

Having this same issue on my Fire tablets used as dashboards around the house. Moving back to 2024.5.5 brings all of my tablets back to full working state with zero configuration adjustments required.

rlause commented 1 month ago

same issue with Home Assistant app on Galaxy S23+ (current Android and patches) and Galaxy Tab 9 (current Android and patches), starting with 2024.5 as far as I can remember normal (user) dashboards work fine, settings won't work and show a page loading error

ekkridon commented 1 month ago

Same issue using Kiosker kiosk browser or iPad Safarai browser on an older iPad. Error loading page on all pages after sign-in.

apeiron69 commented 1 month ago

I have the same issue on iPad with 13.5.7 iOS and 2024.6.0 HA core installed. Lovelace no longer loads.

steveworkman commented 1 month ago

+1 - HAR file available for debugging in the duplicate bug #21015

Madi0ne commented 1 month ago

I am facing the same issue on iPad mini 2 (iPadOS 12.5.7) on 2024.6.0

matorres86 commented 1 month ago

Same on older ipad mini, I kept this tablet specifically to access the HA app and not have another electronic device end up in a landfill. I hope they fix it.

Edit: Happens on Chrome and HA app.

cayco commented 1 month ago

Same here on old iPad Air

oklih commented 1 month ago

I have the same problem. After update to 2024.6.0. Before with the latest 2024.5.x it was no problem

shovelheadman commented 1 month ago

Same problem on old iPad - had to revert to a 2024.5.5 backup to be able to use my dashboard again.

slipx06 commented 1 month ago

I can confirm this problem has started appearing on the IOS companion app after the last update. IOS version 12.5.7

OzMike63 commented 1 month ago

Sadly 2024.6.1 patch did not fix this.....roll back time again!

deltazerorsan commented 1 month ago

Sadly 2024.6.1 patch did not fix this.....roll back time again!

Tx! So waiting...

luq555 commented 1 month ago

After upgrade to 2024.6.1

WhatsApp Image 2024-06-08 at 14 07 44

image
pichel3000 commented 1 month ago

I hope this gets a fix in upcoming patches.

silamon commented 1 month ago

If anyone could post the stack trace of the error, similar to what was done in #20697, that would be helpful.

apeiron69 commented 1 month ago

Ho do I acquire it from HA?

Il dom 9 giu 2024, 13:09 Simon Lamon @.***> ha scritto:

If anyone could post the stack trace of the error, similar to what was done in #20697 https://github.com/home-assistant/frontend/issues/20697, that would be helpful.

β€” Reply to this email directly, view it on GitHub https://github.com/home-assistant/frontend/issues/21004#issuecomment-2156446526, or unsubscribe https://github.com/notifications/unsubscribe-auth/ASQQVSK2VFRHSASVVL3Z3TLZGQZWNAVCNFSM6AAAAABI3R63QSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNJWGQ2DMNJSGY . You are receiving this because you commented.Message ID: @.***>

steveworkman commented 1 month ago

If anyone could post the stack trace of the error, similar to what was done in #20697, that would be helpful.

See #21015 for a HAR from my iPad mini

ptfuzi commented 1 month ago

Also had to downgrade to 2024.5.5

deltazerorsan commented 1 month ago

If anyone could post the stack trace of the error, similar to what was done in #20697, that would be helpful.

See #21015 for a HAR from my iPad mini

Here you have my best... photo_2024-06-10_20-54-47

smithbill17 commented 1 month ago

I'm on 2024.6.2 and still getting this error on iOS 12.5.7

apeiron69 commented 1 month ago

Confirm, I'm on 2024.6.2 and still getting this error on iOS 12.5.7

steverep commented 1 month ago

Folks, I can look into this, but from a volunteer developer perspective, it would be helpful if:

  1. Please paste the actual full text of the error and stack trace from the browser console (not a screenshot or zip file which just it harder or impossible to read and search for easily). There's a reason our template asks for it when opening an issue and @silamon followed up asking for the same. It pinpoints the exact lines in the code to debug.
  2. Please avoid comments that just confirm the issue and don't contribute new information. It's just more fluff for newcomers just arriving to the issue. Just give the OP a thumbs up and subscribe to the issue instead.
lispington commented 1 month ago

2024-06-11 17:53:22.607 WARNING (MainThread) [homeassistant.components.websocket_api.http.connection] [140410064355392] from 192.168.0.1 (Mozilla/5.0 (iPad; CPU OS 12_5_7 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148): Disconnected: Did not receive auth message within 10 seconds

No other messages or stack traces in the log, just plenty of these, when I refresh the iPad. I hope this adds something.

steverep commented 1 month ago

@lispington thank you for the text, but we're looking for the error and trace from the browser, not from the HA core log. Try to open in the browser, press F12 to get the console, and the error(s) should be there.

steveworkman commented 1 month ago

@lispington thank you for the text, but we're looking for the error and trace from the browser, not from the HA core log. Try to open in the browser, press F12 to get the console, and the error(s) should be there.

Here is the har file https://github.com/user-attachments/files/15685653/homeassistant.local.webarchive.zip

steverep commented 1 month ago

@steveworkman I get errors trying to load it. Again, just the text of the error and stack would be appreciated.

rlause commented 1 month ago

I'm not sure if the reason for my error is the same, however... 2024.6.2 still shows Error while loading page dashboard. on a current Android (Samsung Galaxy S23+, Galaxy Tab 9) when using

All other dashboards (even the HA developer tools dashboard) work. The settings dashboard is presented correctly using Chrome on a Windows 11 desktop. Unfortunately the Android browsers don't have a developer mode. If anybody has an idea how to capture debug messages, stack traces or similar helpful output, please tell me.

silamon commented 1 month ago

For what it is worth, the error from the screenshot written in text: "Error loading page lovelace TypeError: (0, n.CoerceOptionsToObject) is not a function (In '(0, n.CoerceOptionsToObject)(e)','(0, n.CoerceOptionsToObject)' is undefined)"

steveworkman commented 1 month ago

@steveworkman I get errors trying to load it. Again, just the text of the error and stack would be appreciated.

If I recall (as I'm on my phone) the error is that it is trying to load files from http://homeassistant.local:8123/undefined/node_modules/some/file/that/doesn't/exist

silamon commented 1 month ago

The webarchive you posted only included the web calls, which unfortunate don't contain any errors / stack traces. The loading of the unknown modules is what happens after the error. Still, we appreciate it a lot you're helping out finding the cause. πŸ‘

steverep commented 1 month ago

For what it is worth, the error from the screenshot written in text: "Error loading page lovelace TypeError: (0, n.CoerceOptionsToObject) is not a function (In '(0, n.CoerceOptionsToObject)(e)','(0, n.CoerceOptionsToObject)' is undefined)"

Thanks @silamon . Yeah I already got that from running OCR on the image, but it's missing the file/line of the error and stack. That narrows it down to something going on with loading the @formatjs Intl polyfills, but I don't know what specifically w/o the trace.

Another lesson I guess for folks, don't assume an issue is the same as another unless the errors and traces match. This is not the same as #20697 at all.

If I recall (as I'm on my phone) the error is that it is trying to load files from http://homeassistant.local:8123/undefined/node_modules/some/file/that/doesn't/exist

That's just an error from the debugger trying to load original source files from the source maps. We purposefully don't ship them with the frontend. It has nothing to do with the problem at hand.

steverep commented 1 month ago

@piitaya can you repro this on iOS 12 with stack as you did before? I don't have the hardware to do it. Based on the info so far, I suspect I need to tweak something from #20798.

deltazerorsan commented 1 month ago

@piitaya can you repro this on iOS 12 with stack as you did before? I don't have the hardware to do it. Based on the info so far, I suspect I need to tweak something from #20798.

Hi steverep,

I have up and running a VM with 2024.6.2 and an Ipad 12.5.7 so I can reproduce the issue but the only thing I can capture is a screenshot of the Javascript console or the plain text:

`ERROR Error loading page lovelace TypeError: (0,n.CoerceOptionsToObject) is not a function. (In '(0,n.CoerceOptionsToObject)(e)', '(0,n.CoerceOptionsToObject)' is undefined)

ERROR Error loading page map TypeError: (0,n.CoerceOptionsToObject) is not a function. (In '(0,n.CoerceOptionsToObject)(e)', '(0,n.CoerceOptionsToObject)' is undefined)

ERROR Error loading page energy TypeError: (0,n.CoerceOptionsToObject) is not a function. (In '(0,n.CoerceOptionsToObject)(e)', '(0,n.CoerceOptionsToObject)' is undefined)

ERROR Error loading page logbook TypeError: (0,n.CoerceOptionsToObject) is not a function. (In '(0,n.CoerceOptionsToObject)(e)', '(0,n.CoerceOptionsToObject)' is undefined)

ERROR Error loading page history TypeError: (0,n.CoerceOptionsToObject) is not a function. (In '(0,n.CoerceOptionsToObject)(e)', '(0,n.CoerceOptionsToObject)' is undefined)

ERROR Error loading page dashboard TypeError: (0,n.CoerceOptionsToObject) is not a function. (In '(0,n.CoerceOptionsToObject)(e)', '(0,n.CoerceOptionsToObject)' is undefined)`

If you know something better please guide me and I do my best to help.

nickcmaynard commented 1 month ago

Folks,

This is what I have from a remote debug session to an iPhone running iOS 12.5.7.

Screenshot 2024-06-11 at 21 02 28

Transcript:

[Error] Unhandled Promise Rejection: SyntaxError: Unexpected token '.'
    (anonymous function)
    rejectPromise
    promiseReactionJob

[Error] Error loading page – "lovelace"
TypeError: (0,n.CoerceOptionsToObject) is not a function. (In '(0,n.CoerceOptionsToObject)(e)', '(0,n.CoerceOptionsToObject)' is undefined)
a β€” index.js:309
y β€” utils.js:95
(anonymous function) β€” utils.js:151
forEach
(anonymous function) β€” utils.js:147
forEach
(anonymous function) β€” utils.js:143
m β€” BestFitMatcher.js:18
L β€” ResolveLocale.js:15
A β€” index.js:4
(anonymous function) β€” intl-polyfill.ts:24
h β€” regeneratorRuntime.js:45
(anonymous function) β€” regeneratorRuntime.js:133
r β€” asyncToGenerator.js:3
s β€” asyncToGenerator.js:17
promiseReactionJob
    (anonymous function) (app.HklW542yG5A.js:2:98761)
    promiseReactionJob

[Error] Unhandled Promise Rejection: TypeError: (0,n.CoerceOptionsToObject) is not a function. (In '(0,n.CoerceOptionsToObject)(e)', '(0,n.CoerceOptionsToObject)' is undefined)
    (anonymous function) (app.HklW542yG5A.js:2:328171)
    map
    a (app.HklW542yG5A.js:2:328139)
    (anonymous function) (45959.ZjjpSmFaFnU.js:1:35629)
    h (app.HklW542yG5A.js:2:268946)
    (anonymous function) (app.HklW542yG5A.js:2:270291)
    r (app.HklW542yG5A.js:2:255251)
    s (app.HklW542yG5A.js:2:255455)
    promiseReactionJob

[Error] Unhandled Promise Rejection: TypeError: (0,n.CoerceOptionsToObject) is not a function. (In '(0,n.CoerceOptionsToObject)(e)', '(0,n.CoerceOptionsToObject)' is undefined)
    (anonymous function)
    rejectPromise
    promiseReactionJob

[Error] Unhandled Promise Rejection: TypeError: (0,n.CoerceOptionsToObject) is not a function. (In '(0,n.CoerceOptionsToObject)(e)', '(0,n.CoerceOptionsToObject)' is undefined)
    dispatchException (app.HklW542yG5A.js:2:273130)
    (anonymous function) (app.HklW542yG5A.js:2:270222)
    r (app.HklW542yG5A.js:2:255251)
    c (app.HklW542yG5A.js:2:255491)
    promiseReactionJob

[Error] Unhandled Promise Rejection: TypeError: (0,n.CoerceOptionsToObject) is not a function. (In '(0,n.CoerceOptionsToObject)(e)', '(0,n.CoerceOptionsToObject)' is undefined)
    (anonymous function)
    rejectPromise
    promiseReactionJob

[Error] Unhandled Promise Rejection: TypeError: (0,n.CoerceOptionsToObject) is not a function. (In '(0,n.CoerceOptionsToObject)(e)', '(0,n.CoerceOptionsToObject)' is undefined)
    dispatchException (app.HklW542yG5A.js:2:273130)
    (anonymous function) (app.HklW542yG5A.js:2:270222)
    r (app.HklW542yG5A.js:2:255251)
    c (app.HklW542yG5A.js:2:255491)
    promiseReactionJob

[Error] Unhandled Promise Rejection: TypeError: (0,n.CoerceOptionsToObject) is not a function. (In '(0,n.CoerceOptionsToObject)(e)', '(0,n.CoerceOptionsToObject)' is undefined)
    (anonymous function)
    rejectPromise
    promiseReactionJob

I'm afraid I don't seem to have sourcemaps, so this might be the best we can do without those.

steveworkman commented 1 month ago
image

This is where the sourcemap resolves the error to the @formatjs/intl-locale package and it's looking for CoerceOptionsToObject which is provided by the @formatjs/ecma402-abstract package. I don't really understand why that wouldn't be there as there's not much to it

Its called from var desiredLocale = new Intl.Locale(desired).maximize(); within @formatjs/intl-localematcher/lib/abstract/utils.js

Futher down the stack it comes from this code in the intl-polyfill:

  if (shouldPolyfillDateTimeFormat(locale)) {
    polyfills.push(
      import("@formatjs/intl-datetimeformat/polyfill-force").then(() =>
        polyfillTimeZoneData()
      )
    );
  }
rarroyo6 commented 1 month ago

I have several Android tablets throughout the house running FullyKiosk, the tablets are running several different dashboards. As of 2024.6.0, some of the dashboards work on all the tablets, and the others don't work on any of the tablets. So there is something specific on some dashboards that is making them fail. All the dashboards use Browser-Mod and Custom Button Cards, everything else is pure HA. I don't know how to get the log or the stack dump from FullyKiosk, so I can't help much more. But if someone can show me how to do it, I'll be happy to post it here.

steveworkman commented 1 month ago

Given that it's failing at Intl.Locale() and that #20798 the polyfill for Intl.Locale is now added for < iOS 14 it seems like that's the issue. I've got a debugger on it and it appears that the required ecma402-abstract library is still pending in a promise

image

What I don't understand is why that would be a Promise at all. Inside formatjs that should be a require call and it just grabs it from the bundle. I can see from the intl-polyfill file that if Locale is required it should wait for that before moving on to any other polyfills. It seems to do that, move on, and just fail the first time it tries to use new Intl.Locale.

I can't see any open issues on formatjs about this, so I'm assuming it's the ES5 bundle.

Update: I can see that the ecma402-abstract library code is being loaded (chunk 45959) before it is being used, and yet still saying that it's a promise...

steverep commented 1 month ago

@nickcmaynard and @steveworkman that's the awesome info I needed. I have some suspicions as to what's happening here but I won't be able to dig in until later tonight. I think this is maybe a bug in the order we polyfill Intl that has been around for quite a while, but wasn't exposed until #20798. That change basically will delay loading them until they are needed more so than before, so if the loading isn't perfect, errors would be expected.

steverep commented 1 month ago

Just a quick update.... I can reproduce the problem myself now, but still tracking down the root cause. I'll pick it up again tomorrow.

FA9US commented 1 month ago

its not just ipad folks. it also seem to be affecting android. currently on Fuly remote admin. Device info px30_evb by rockchip Firmware: 1.50.1-play

Maeckes89 commented 1 month ago

Same problem here. Also with latest update so far.

steverep commented 1 month ago

PR #21074 is in to fix this. Should come in 2024.6.3.

ekkridon commented 1 month ago

Thank you for the work @steverep - sent a couple bucks your way to help in your efforts (which I now realize are broader and more amazing than this silly bug). Kudos!

matorres86 commented 1 month ago

Where do we donate, thank you so much!

ekkridon commented 1 month ago

Click his name and look for options to sponsor him. After reading about the cool accessibility work he's doing and feeling inferior for your own contributions to humanity.

pvmil commented 1 month ago

Thanks, found it, @steverep: thanks for your efforts!

steveworkman commented 1 month ago

Great work @steverep - if you have some more gnarly UI bugs, let me know, it was pretty fun to get stuck into this codebase

matorres86 commented 1 month ago

Click his name and look for options to sponsor him. After reading about the cool accessibility work he's doing and feeling inferior for your own contributions to humanity.

Thank you, doing this now, it's so much appreciated, another device kept out of the landfills!

sebastian3107 commented 1 month ago

Thanks a lot. Were some unit tests added so this bug doesn't show up a third time? πŸ§ͺ