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 throttling menu in Network tab in Developer tools and let the server session expire, 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.
I have already created an issue about this - Embedded vaadin flow component disappears after session timeout and also loads styles from wrong location. · Issue #19620 · vaadin/flow · GitHub
Does anybody have any ideas what could be wrong? Thanks.
Normal vaadin flow app doesn’t crash and disappear when session expires.
The embedded component does try to resynchronize but fails because of error in flow client code where it tries to set the $server.disconnected function while $server is undefined.
Obviously if the client code crashes because of code error it is not meant to work this way.
Correct. Normally one should setup it so that upon session expires the user is re-routed to the login page or logout page. It depends a bit on the application, but the both are configurable. I.e. then the application is not in actual error state and it is clear for the user what should happen next.
Something analogous should happen also with web component exporter.
Yes, that is how it should work for pages where user has to be logged in. But this is happening also for embedded components that doesn’t require logged in user, they should always be accessible and displayed. When vaadin session expires when user is offline it should either resynchronize with newly created session silently or visibly refresh it’s content and not leave the blank space.
For example imagine you have a page written in react and you have an embedded vaadin component that displays crypto currency analytics inserted in that react page. Now user needs to travel home, so he closes his laptop and when he arrives home after 30+ minutes of travel, he opens his laptop where he left and now he sees just a blank space instead of the embedded vaadin component. He then has to refresh the page manually to display the component again…
We use cookies to serve our customers and website visitors in the best possible way. Cookies are used for the proper functioning of the website and for improving the user experience, monitoring visitor traffic and marketing purposes. By continuing to browse the site, you agree to our use of cookies. You can read more about cookies here.
We use cookies to serve our customers and website visitors in the best possible way. Cookies are used for the proper functioning of the website and for improving the user experience, monitoring visitor traffic and marketing purposes. By continuing to browse the site, you agree to our use of cookies. You can read more about cookies here.