Suggest refreshing the browser when server connection is lost to a server-side Blazor app

[danroth27]

Currently we provide a Retry button when the connection to a server-side Blazor app is lost and could not be automatically reestablished.

In many cases retrying is not going to work because the server has been restarted and the circuit was lost (e.g. during development). Instead the user needs to refresh the browser. We should update the UI to suggest that the user do so. Maybe just add a sentence below that says: "If you are unable to reconnect to the server try refreshing the browser"?

[monstergarden]

Why not make the "retry?" button refresh the page?
window.location.reload(false);

[mkArtakMSFT]

The work here is about updating the UI shown above, to include text suggesting to try to refresh the page, if Retry doesn't work.

[danroth27]

@monstergarden Retry should work after a momentary network connection loss, so I think having the Retry button is still valid.

[kjeske]

Could we have that text configurable, so developers can decide themselves what to put into the alert? It would be even nicer if we could customize the whole content of that element with id "components-reconnect-modal". The alert element could be customized in options passed to the Blazor.start JS function.

Example:

var blazor = window.Blazor;

blazor.start({
    getConnectionIssueElement: function (retry) {
        var element = document.createElement("div");
        [...] // create content, optional overlay, attach events to retry
        return element;
    }
});

Or, what's maybe even better, to be able to control the whole alert behavior, how it's shown and what's the content:

var blazor = window.Blazor;

blazor.start({
    onDisconnect: function (options) {
        options.preventDefaultMessage();

        var element = document.createElement("div");
        [...] // create content, optional overlay, attach events to retry
        document.body.appendChild(element);
    }
});

Any kind of customization of the alert would be nice.

[danroth27]

@kjeske You can already customize this UI today. See https://docs.microsoft.com/aspnet/core/blazor/hosting-models#reconnection-to-the-same-server for details.

[willdean]

We are using server-side Blazor to run a front-panel (touch-only) on a bit of equipment. If we upgrade the server-side code (we can do this behind the scenes) we'd like the client to reconnect by whatever means possible - we don't find the 'retry' button ever does anything useful/visible in any situation we've seen (neither VS background compile, nor 'real system' upgrade), and without connecting an external keyboard we can't do any other kind of browser refresh.

We've done the following, which seems to work OK so far, but it would be nice if a 'just silently reconnect' option was available.

setInterval(function() {
                var modal = document.getElementById("components-reconnect-modal");
                if (modal.classList.contains("components-reconnect-failed")) {
                    window.location.reload(false);
                }
            },
            1000);

[danroth27]

@willdean I'd be interested to hear more details about what you're building. Shoot me an email (daroth@microsoft.com) if you have a moment!

[dedmen]

Can't the server tell the client that his circuit is not available anymore?
How about the client just starting with a fresh new circuit or just doing a site reload if the code notices that connecting to the old circuit is not working?

I made my blazor app into a progressive web app, and everytime I turn the phone screen off, and back on after a few minutes, it will show the failed to reconnect. Because it disconnected while the screen was off, and the server cleaned up the circuit.

I don't think my users will understand the difference between retry/reload. And having to do that everytime they turn their phone screen back on to try to look at the app is also quite annoying.

[SteveSandersonMS]

@dedmen Yes, that's what we're planning in #12442

In the meantime, closing this issue as implemented in #12420