Embedded vaadin flow component disappears after session timeout and also loads styles from wrong location.

[ggecy]

Description of the bug

I have a vaadin flow component exported through WebComponentExporter and embedded in another page. When I e.g. let the laptop sleep for longer than session timeout duration or just put the browser to offline in Network tab in Developer tools, the server session expires in meantime and the embedded component disappears from page - it's still there in html source, but with nothing inside its shadow-root except one style element. I managed to replicate it also with latest skeleton starter application downloaded from vaadin.com where I just added the WebComponentExporter for the sample view, added cors filter bean registration and set the servlet session timeout to 60 seconds. After waiting for over 60 seconds in offline mode and then disabling offline mode the embedded component tries to resynchronize on next heartbeat or any other request to server and then disappears.

Also the embedded component tries to incorretly download styles from wrong host - my vaadin flow app is running on port 8080 and the embedded components tries to load styles from the page where it is embedded instead.

Browser console log: localhost-1718905756488.log

Expected behavior

Embedded flow component should not dissapear after server session expires.
Styles should be loaded from correct url.

Minimal reproducible example

See https://github.com/ggecy/embedded-component-issues

1. Clone the repo, build and start the vaadin application. I changed the session timeout to 60 seconds and heartbeat to 15 seconds. There is also cors filter registration bean to add cors headers. I also added WebComponentExporter for sample view.
2. In react-app subfolder, I created a blank react app where in public/index.html I added the embedded webcomponent. Go to this subfolder and run npm install and then npm run start to start the app on port 3000.
3. Open the http://localhost:3000 in chrome, the page should open with embedded component displayed. Open developer tools and in Network tab at the top choose Offline from throttling menu.
4. Wait for longer than 60 seconds until session expires on backend.
5. Change offline mode back to no thottling.
6. The embedded component should try to resynchronize with server on next heartbeat or when you try to submit a value from textfield.
7. Embedded component disappears.

Versions

• Vaadin / Flow version: 24.4.3
• Java version: 17
• OS version: MacOS 14.5
• Browser version (if applicable): Arc 1.47.1 (latest)
• IDE (if applicable): Intellij Idea Ultimate

[ggecy]

It seems that during resynchronize, some code tries to set the exported web component $server.disconnected function while $server is undefined, it seems to be this place:

flow/flow-client/src/main/java/com/vaadin/client/SystemErrorHandler.java

Line 193 in e4c75ce

elem.$server.disconnected = function(){} // mock disconnected callback not to throw TypeError

[TatuLund]

See also: https://vaadin.com/forum/t/embedded-vaadin-flow-component-disappears-after-session-timeout/166573

[ggecy]

Any updates? This has been under investigation for over a month now...

[mshabarov]

No updates unfortunately, we have no solution at the moment, but will be keeping an eye on it and continue as soon as we can.

[pmneo]

I'm struggling with the same issue.

Is there any possiblity to remove or shutdown a web component completely, without reloading the page?

Thanks

[caalador]

What I found is that there is something happening when Push is in use. So if I do not have Push enabled the resync works, but with push enabled there are 2 webcomponent-resync calls which breaks the webcomponent.

So as a workaround one can use polling from the webcomponent instead of push while we try to get a fix for the problem with push.

[vaadin-bot]

This ticket/PR has been released with Vaadin 24.6.0.alpha3 and is also targeting the upcoming stable 24.6.0 version.