aspnetcore: (blazor) Failed to reconnect to the server

Hi @edgolub,

This issue is closed because there is no known Blazor work tracked here. Blazor Server apps will go into a “not connected” state if the connection is lost for any reason, including the network connection being dropped or the server being restarted. If the server is restarted then there is no way for the app to reconnect back to the same state because the server state is gone. The only way forward is to refresh the browser. Blazor won’t refresh the browser automatically, but you can setup your app to do so. For example you could add the following script to your _Host.cshtml file:

<script>
    // Wait until a 'reload' button appears
    new MutationObserver((mutations, observer) => {
        if (document.querySelector('#components-reconnect-modal h5 a')) {
            // Now every 10 seconds, see if the server appears to be back, and if so, reload
            async function attemptReload() {
                await fetch(''); // Check the server really is back
                location.reload();
            }
            observer.disconnect();
            attemptReload();
            setInterval(attemptReload, 10000);
        }
    }).observe(document.body, { childList: true, subtree: true });
</script>

This uses the JS DOM mutation observer API to detect when we’re offering a “reload” button, and automatically does a reload in that case. It has to be careful not to reload before the server actually comes back, otherwise the kiosk would get stuck displaying a “network error” type screen. There is still the potential that the refresh will fail, and if it does then there’s no way to retry without user intervention.

@Stamo-Gochev The Retry button specifically tries to reconnect back to the state (“circuit”) for the current UI session. Blazor doesn’t provide an out of the box mechanism to persist and rehydrate this state, so after a server restart the state will be gone and no amount of retrying to connect to that state will help. Instead the user will need to refresh the browser.

We have an issue open to make this clearer in the default UI (https://github.com/aspnet/AspNetCore/issues/10496). You can also customize this UI yourself: https://docs.microsoft.com/en-us/aspnet/core/blazor/hosting-models#reconnection-to-the-same-server.

Lastly, you should be able to do work in your app and components to support persisting the required state so that the app can survive a server restart. For example, the app could persist the circuit state into a memory cache, and the components could leverage local storage in the browser. We don’t have great docs or samples on how to do this yet, but it’s something we expect to provide before we ship.

Hi @edgolub,

This issue is closed because there is no known Blazor work tracked here. Blazor Server apps will go into a “not connected” state if the connection is lost for any reason, including the network connection being dropped or the server being restarted. If the server is restarted then there is no way for the app to reconnect back to the same state because the server state is gone. The only way forward is to refresh the browser. Blazor won’t refresh the browser automatically, but you can setup your app to do so. For example you could add the following script to your _Host.cshtml file:

<script>
    // Wait until a 'reload' button appears
    new MutationObserver((mutations, observer) => {
        if (document.querySelector('#components-reconnect-modal h5 a')) {
            // Now every 10 seconds, see if the server appears to be back, and if so, reload
            async function attemptReload() {
                await fetch(''); // Check the server really is back
                location.reload();
            }
            observer.disconnect();
            attemptReload();
            setInterval(attemptReload, 10000);
        }
    }).observe(document.body, { childList: true, subtree: true });
</script>

This uses the JS DOM mutation observer API to detect when we’re offering a “reload” button, and automatically does a reload in that case. It has to be careful not to reload before the server actually comes back, otherwise the kiosk would get stuck displaying a “network error” type screen. There is still the potential that the refresh will fail, and if it does then there’s no way to retry without user intervention.

If you sure you want to reload every change, you can instant reload base on @danroth27 answer:

<style>
   #components-reconnect-modal {
       display: none !important;
   }
</style>
<script>
   new MutationObserver(() => document.querySelector('#components-reconnect-modal') && location.reload())
      .observe(document.body, { childList: true });
</script>

put it right before:

</body>

@rolfik Thanks for the feedback! We are considering this as part of https://github.com/aspnet/AspNetCore/issues/9256