Frequent loss of layout after v23->v24 migration

We have migrated your v23 application to v24.
So far everything works as expected, but in the test system we have frequent reports of users loosing the app layout and the application becomming unusable.

Our main layout is AppLayout based and usually works fine.
But one way to break it, ist to hit F5.

In the browser console we then see this:

ue Feb 13 2024 17:17:00 GMT+0100 (Mitteleuropäische Normalzeit) Atmosphere: unload event vaadinPush-min.js:1:41460
Tue Feb 13 2024 17:17:00 GMT+0100 (Mitteleuropäische Normalzeit) Atmosphere: Closing (AtmosphereRequest._close() called) vaadinPush-min.js:1:41460
Tue Feb 13 2024 17:17:00 GMT+0100 (Mitteleuropäische Normalzeit) Atmosphere: Request already closed, not firing onClose (unsubscribe case) 2 vaadinPush-min.js:1:41460
Vaadin push loaded vaadinPush-min.js:1:44409
Invoking executeWebSocket, using URL: wss://xxx-test.xxxx.ch/VAADIN/push?v-r=push&v-uiId=2&v-pushId=1a513e92-53fd-4e1d-86b9-60e2699add6b&X-Atmosphere-tracking-id=0&X-Atmosphere-Framework=3.1.2-javascript&X-Atmosphere-Transport=websocket&X-Atmosphere-TrackMessageSize=true&Content-Type=application/json; charset=UTF-8&X-atmo-protocol=true&X-Vaadin-LastSeenServerSyncId=0 vaadinPush-min.js:1:41460
Tue Feb 13 2024 17:17:05 GMT+0100 (Mitteleuropäische Normalzeit) Atmosphere: websocket.onopen vaadinPush-min.js:1:41460
Websocket successfully opened vaadinPush-min.js:1:41460
Tue Feb 13 2024 17:17:05 GMT+0100 (Mitteleuropäische Normalzeit) Atmosphere: websocket.onmessage vaadinPush-min.js:1:41460
Tue Feb 13 2024 17:17:05 GMT+0100 (Mitteleuropäische Normalzeit) Atmosphere: Firing onOpen 2 vaadinPush-min.js:1:41460
Uncaught TypeError: window.Vaadin.Flow.menubarConnector is undefined
anonymous https://xxx-test.xxxx.ch/VAADIN/build/FlowClient-BZ2ixoyw.js line 3 > Function:3

In google chrome the stack trace is different, but the behaviour is similar.
FlowClient-BZ2ixoyw.js:1 Uncaught TypeError: Cannot read properties of undefined (reading ‘initLazy’)
at HTMLElement.eval (eval at Q3 (FlowClient-BZ2ixoyw.js:3:42383), :3:58)
at Object.eval (eval at Q3 (FlowClient-BZ2ixoyw.js:3:42383), :3:79)
at Q3 (FlowClient-BZ2ixoyw.js:3:42444)

and

FlowClient-BZ2ixoyw.js:1 Uncaught TypeError: Cannot read properties of undefined (reading ‘generateItems’)
at Object.eval (eval at Q3 (FlowClient-BZ2ixoyw.js:3:42383), :3:22)
at Q3 (FlowClient-BZ2ixoyw.js:3:42444)

We have server push activated and it worked fine in v23, not sure if it’s related to this.
What we also had to add, is the annotation to always load the ComboBox js stuff, else v24 did not startup correctly.
Any hints where to look for?

I got behind this, by replacing LoadDependenciesOnStartup({MultiSelectComboBox.class, Tooltip.class}) with LoadDependenciesOnStartup without parameters.
But now I have to place Uses(Tooltip.class) in some of the screens…
Isn’t there another way? I’m not sure I will catch all places where such manual dependencies have to be defined in the java code

Normally all those should have been automatically added by the scsnner - except if you do some non standard way of doing things. If you can reproduce this, I would suggest to create ticket on the flow GitHub repository.

Maybe revert back to 23 and see if situation changes? >We have server push activated and it worked fine in v23, not sure if it’s related to this.

Yes, it works fine with v23, it’s clearly related to the v24 migration.
We don’t use the @Route annotation, but instead dynamically register 95% of the routes in the application, perhaps this is causing the optimization problems?

We do it this way
RouteConfiguration configuration = RouteConfiguration.forSessionScope();
if (configuration.getRoute(route).isEmpty()) {
configuration.setRoute(route, listNavigationTarget, getMainLayoutClass());

The LoadDependenciesOnStartup should have an effect only in production. Do you have the issue only in production mode?

Not having route annotation may prevent Flow from detecting the components during bytecode scan. Can you try to put a @Route(registerAtStartup=false) annotation on your route classes and check if this works?

Yes, this happens only in production mode

Do you have @Route(registerAtStartup=false) on your “routes” or no annotation at all?

To me, when the production bundle is built. It’s split in multiple javascript files “chunks”, one that contains some components (the components which are used in the homepage and login page), other chunks loaded when you are navigating to a certain page.
So you might have this kind of error.
If you navigate to the home then pageA (that loads chunkA with the combobox) then pageB (that doesn’t “know” that is using the combobox) then it’s working.
If you navigate to the home then pageB (that doesn’t “know” that is using the combobox) then the combobox is not working. (same is you refresh the page).
LoadDependenciesOnStartup without parameters for all the components used in the components annotated with @Route.
Hopefully that can help you.

Currently no @Route(registerAtStartup=false) exist, but I will test it with this.
When I did NOT add the LoadDependenciesOnStartup' a few classes where missing, especially when comming back from external SSO or pressing F5 in the browser Addind LoadDependenciesOnStartup’ and @User(Tooltip.class) in the AppConfigurator solved all these problems so far I can see.
We will go live this night and then see if we missed something during testing… :slightly_smiling_face: