You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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.
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.
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.
Wait for longer than 60 seconds until session expires on backend.
Change offline mode back to no thottling.
The embedded component should try to resynchronize with server on next heartbeat or when you try to submit a value from textfield.
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
The text was updated successfully, but these errors were encountered:
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:
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
react-app
subfolder, I created a blank react app where inpublic/index.html
I added the embedded webcomponent. Go to this subfolder and runnpm install
and thennpm run start
to start the app on port 3000.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.Versions
The text was updated successfully, but these errors were encountered: