[Feature]: Auto-reconnect or refresh if UI mode ws ID isn't valid

[wuservices]

🚀 Feature Request

If you have UI mode open, e.g. http://localhost:8081/trace/uiMode.html?ws=xxx_old_invalid_id_xxx, and the web socket ID isn't valid, automatically set up a new connection, i.e. redirect to /, which would then automatically redirect to /trace/uiMode.html?ws=xxx_new_valid_id_xxx.

This solves two scenarios leading to hanging or a blank screen where ws=... is no longer valid after a server restart:

1. Server restarts while tab is sleeping, and thus doesn't show UI mode disconnected with the button to reload
2. UI mode disconnected is displayed, but server is restarted and user uses native browser refresh, which will have a ws=... that's no longer valid, and will cause the UI to hang

Example

1. Start UI mode, e.g. npx playwright test --ui-host=0.0.0.0 --ui-port=8081
2. Open a tab for the UI, http://localhost:8081
3. Restart the server for UI mode
4. Refresh the tab (with the browser vs the button if the UI recognizes that the session was disconnected), and loading will hang

Alternatively, before restarting the server, wait a while until the tab has gone to sleep / been suspended (such that it's not communicating with the server). Then restart the server and wake up the tab. It won't load correctly, showing a blank screen. Then, refreshing the page via the browser will hang because ws=... is invalid.

Motivation

My team and I run Playwright remotely and it's common for the server or Kubernetes pod hosting the UI mode to restart periodically. If you have a lot of tabs open, you'll end up with old/broken Playwright UI mode tabs that end up like this if you try to refresh with the browser:

With a remote dev instance, it's pretty common for it to sleep or restart overnight, then when you start work in the morning, your tabs are sleeping / suspended, so they don't show UI mode disconnected, and are just blank.

One way to fix this manually is just to strip off the path to go to /. However, in this error scenario, the all could just reconnect and fix itself, similar to clicking the Reload the page link on the UI Mode disconnected screen (that doesn't show up in these scenarios).

[pavelfeldman]

It should actually show you the reload screen if the connection is terminated:

Not sure why it does not do it - probably because k8s keeps the balancer socket alive?

[wuservices]

Thanks for taking a look.

I see what you mean with that UI Mode disconnected detection, and it does work properly if that kicks in and I click Reload the page, which will also detect if the ws ID is bad and go to a new one.

However, if you use the native browser reload instead of clicking the button (after you restart your server and get disconnected), you'll still end up in a broken / hung state like in my screenshot.

I feel like I've also gotten into this bad state without manually reloading as well, but I'm having trouble reproducing that or saying for sure. Maybe if the tab was suspended or interrupted, could the UI Mode disconnected screen fail to show?

Either way, would it easy to support auto-fixing even if the browser was reloaded natively, vs with the button once it was disconnected AND the server was restarted?

[pavelfeldman]

Fixing via reload means that the ws= is not a part of the query, which will break some interoperable scenarios. I have a PR for it, but I can't say I like it. Will mark it as P3 to collect votes given that the scenario of server dying is unusual.

[wuservices]

Fixing via reload means that the ws= is not a part of the query, which will break some interoperable scenarios.

The PR you have would essentially do what the Reload the page button does, similar to if you just manually navigated to /?

Curious what scenarios this would also break. The scenarios I have in mind are already a dead end, so it seems like fixing is better than forcing the user to manually intervene, but I understand it could feel hacky/messy to handle this too and the desire to gather feedback.

How this happens
Coming back to my sleeping tabs today, I see why this happens to me every day. Chrome suspends the tabs that have been inactive, which I'm guessing prevents it from showing the UI Mode disconnected message when restoring the tab that's now broken (if the backend restarted, e.g. I'm booting a fresh remote dev server for the day). I then instinctively hit refresh, which has an invalid ws=... in the query strong, so it loads some of the UI and hangs.

Scenarios this fixes
It seems like a fix that recognizes the invalid ws=... after a server restart should be able to support both native browser refresh when a valid UI Mode disconnected page is visible, and these hanging scenarios.