Strange Problem with Rendering / UI Update

General
1

Hi everyone,

we are facing a strange problem in our Vaadin application. First, the application is rather complex, and running for several years in production without customers complaining. Now we found two cases that are more or less reproducible in production environments on remote servers and one case in development mode on local machines that the problem occurs.

At some point in time uidl-messages arrive at the browser include new elements, but they are not put into the DOM (immediately). For example, we have some components with a text and styling information. In the DOM, we either see the text “immediately”, or we need to do some clicks on buttons (triggering further uidl requests) and then we see the text. However the styling information (set on the server via getStyle().set("x", "y")) is not applied.
When the browser tab is refreshed, the UI is rebuilt and everything is back to normal.

Now I don’t have a clue where this problem originates. The browser console does not show errors and the server’s log also does not show errors (or any interesting warnings). The environments where we saw this problem are also quite different, on one we have Vaadin 24.6.0, on the other one Vaadin 24.7.0, on one we have only Longpolling, on the other one Websocket-Push, on one we have a rather slow network, on the other one rather fast. The problem occured on all major browsers.

Do you have any ideas what could be the cause of that behaviour?

2

Nothing comes to mind just from that description. Since you mention you can reproduce something on a local machine, I’d recommend using that case and work to create a minimal standalone reproducer, which you can the use to create an issue on GitHub.

3

Any chance the code that adds new elements (or even updates existing ones) is called from another thread?
If it’s called directly from another thread (for example, when receiving an event from EventBus), then you need to make sure it’s wrapped in ui.access(..).
Either way, that’s something to try, even if you’re not sure.
You can read the documentation here, but here’s a simple example:

myView.getUI().ifPresent(ui -> 
    ui.access(() -> {
            myComponent.setText("New update");
    }
));
1 Like
4

So far, we could not really isolate the problem yet, and thus, were not successful in making a standalone reproducer.

Threading and push is involved indeed, but we are already guarding the ui updates in ui.access(). It seems like the server side is perfectly fine, but the problem is in the client.

Thanks for the input; I guess, we need a reproducer.

5

It can be kind of easy to miss a necessary access call if you’re using an indirect way of threading like Spring’s @Async.

6

Any case that is accidentally not wrapped in access will be caught if you run the JVM with assertions enabled (i.e. the -ea command line flag).

Another case that comes to mind is that there’s some logic in the client-side rendering logic to postpone rendering in some specific cases related to lazy loaded templates. It’s a long time since I’ve touched that part of the code base but I have a faint memory that @Id is involved in at least some case where it might happen.