Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
danroth27 opened this issue May 23, 2019 · 9 comments

Comments

@danroth27
Copy link
Member

@danroth27 danroth27 commented May 23, 2019

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

image

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

This comment has been minimized.

Copy link

@monstergarden monstergarden commented May 24, 2019

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

@mkArtakMSFT

This comment has been minimized.

Copy link
Contributor

@mkArtakMSFT mkArtakMSFT commented May 24, 2019

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

This comment has been minimized.

Copy link
Member Author

@danroth27 danroth27 commented May 25, 2019

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

@kjeske

This comment has been minimized.

Copy link

@kjeske kjeske commented May 26, 2019

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

This comment has been minimized.

Copy link
Member Author

@danroth27 danroth27 commented May 29, 2019

@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

This comment has been minimized.

Copy link

@willdean willdean commented Jun 16, 2019

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

This comment has been minimized.

Copy link
Member Author

@danroth27 danroth27 commented Jun 17, 2019

@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

This comment has been minimized.

Copy link

@dedmen dedmen commented Jul 24, 2019

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

This comment has been minimized.

Copy link
Member

@SteveSandersonMS SteveSandersonMS commented Jul 24, 2019

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

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

@SteveSandersonMS SteveSandersonMS added this to Triage in Blazor via automation Jul 24, 2019
@SteveSandersonMS SteveSandersonMS moved this from Triage to Done in Blazor Jul 24, 2019
@msftbot msftbot bot locked as resolved and limited conversation to collaborators Dec 3, 2019
@jaredpar jaredpar removed this from Done in Blazor Jan 7, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.