search

vaadin / flow

Vaadin Flow is a Java framework binding Vaadin web components to Java. This is part of Vaadin 10+.
Apache License 2.0
588 stars 164 forks source link

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

Open ggecy opened 1 week ago

ggecy commented 1 week ago

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

Screenshot 2024-06-20 at 19 50 37

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

ggecy commented 6 days ago

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: https://github.com/vaadin/flow/blob/e4c75ce01c985722dc4550b697fd48ea8e6e7baf/flow-client/src/main/java/com/vaadin/client/SystemErrorHandler.java#L193