Reload the page to restore functionality, Blazor Server .NET 8

Question

Reload the page to restore functionality, Blazor Server .NET 8

Waleed 26

I am here to complain about the famous error: Could not reconnect to the server. Reload the page to restore functionality.

I develop Apps using .NET 8 and Blazor Server

My customers use the App on mobile phone but if they turned off the screen for while then comes back to the App it shows the known error <<Could not reconnect to the server. Reload the page to restore functionality>>

I used the following functions:

  <script src="_framework/blazor.server.js" autostart="false"></script>

 <script>
        Blazor.start({
            reconnectionOptions: {
                maxRetries: 1000,
                retryIntervalMilliseconds: 500
            }
        });
    </script>

    <script>
        Blazor.start({
            configureSignalR: function (builder) {
                builder.withServerTimeout(3600000).withKeepAliveInterval(3600000);
            });
    </script>

<script>
        Blazor.start().then(() => {
            Blazor.defaultReconnectionHandler._reconnectCallback = function (d) {
                document.location.reload();
            }
        });
    </script>

However nothing changed, although I am using .NET 8 (I thought the problem should be fixed in the new version)

It is a chronic problem, I wonder how a great organization like Microsoft let a problem like this without fix or offering a simple solution!

Maybe there is a solution for this and I do not know?! Kindly advise

3hx 0

So, I had this same issue, here's a solution if the user has been off the page for a long time and lost connection to the server then it will automaticallly refresh their page. Please note this does not restore their form states.

Add this script to the bottom of your body in the _Host.cshtml

<script>
    document.addEventListener("visibilitychange", async function () {
        if (document.visibilityState === 'visible') {
            // Check if Blazor is still connected
            try {
                await DotNet.invokeMethodAsync('BlazorServerApp.Client', 'CheckConnection');
                console.log("Connection active");
            } catch (error) {
                console.log("Connection lost, reloading page...");
                window.location.reload();
            }
        }
    });
</script>

In your Web project create a class called ConnectionService.cs

 public class ConnectionService
 {
     [JSInvokable]
     public static Task CheckConnection()
     {
         // This method doesn't need to do anything.
         // If it can be called, the SignalR connection is still up.
         return Task.CompletedTask;
     }
 }

This wil reload the page

6 answers

Your answer

3hx 0 Reputation points

2024-03-30T17:01:33.82+00:00

So, I had this same issue, here's a solution if the user has been off the page for a long time and lost connection to the server then it will automaticallly refresh their page. Please note this does not restore their form states.

Add this script to the bottom of your body in the _Host.cshtml

<script> document.addEventListener("visibilitychange", async function () { if (document.visibilityState === 'visible') { // Check if Blazor is still connected try { await DotNet.invokeMethodAsync('BlazorServerApp.Client', 'CheckConnection'); console.log("Connection active"); } catch (error) { console.log("Connection lost, reloading page..."); window.location.reload(); } } }); </script>

In your Web project create a class called ConnectionService.cs

public class ConnectionService { [JSInvokable] public static Task CheckConnection() { // This method doesn't need to do anything. // If it can be called, the SignalR connection is still up. return Task.CompletedTask; } }

This wil reload the page

Answer 1

Hello Waleed
There is an ongoing discussion on GitHub regarding the reconnection mechanism in Blazor Server. Some users have reported similar issues, and the consensus is that improvements are needed.

While there might not be an immediate solution, the following is something you can try:

Reconnection Mechanism: The error message “Could not reconnect to the server” typically occurs when the connection ID on the server is not found. This could happen if the server instance recycled, crashed, or if the affinity cookie is not correctly configured. Consider checking the server logs for any relevant information about connection issues. Ensure that your Blazor server instance is properly configured, and that the connection ID is being maintained correctly.
Manual Reconnection:

To manually handle reconnection, you can start Blazor with autostart="false" and set up a custom _reconnectCallback.

Add the following script to your _Host.cshtml file:HTML

 <script src="_framework/blazor.server.js" autostart="false"></script>

Does this help?

Answer 2

P a u l 10,766

Have you tried configuring the reconnectionHandler like in the docs?

https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/signalr?view=aspnetcore-7.0#automatically-refresh-the-page-when-server-side-reconnection-fails

Waleed 26 Reputation points

2024-03-11T20:28:24.77+00:00

Thank you Paul for your feedback

I used the reconnectionHandler and it helped to refresh the page automatically however the behavior of Blazor it is still a problem because when this auto refresh happens all data was filled into the page disappear it is like the user opened a new page plus the user still feels like there is a technical problem or wrong behavior for the App. This really very annoyed.

Answer 3

Bruce (SqlWork.com) 83,821

If you don’t want to code recovery, than maybe you should switch to blazor WASM which is a better mobile solution.

Waleed 26 Reputation points

2024-03-17T04:01:39.1866667+00:00

Thank you for the advise!

I remember Web Assembly takes long time to load at the first time the user opens the App that the Application size exceed 100 Mb compared with Blazor server which is some kbytes.

Means with Blazor web assembly at the first time the user opens the App should wait for long time till the App load and open.

Could you kindly correct me if I am mistaken, please?
Bruce (SqlWork.com) 83,821 Reputation points

2024-03-17T15:41:25.2366667+00:00

With blazor WASM, the WASM should just be the UI, and bulk of logic behind the server webapi.

Answer 4

I will brief my experience regarding this issue:

In order to not show the user this reload message anymore and make the page does auto refresh, it requires to create this file boot.js into the wwwroot folder, the file content and details is here: https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/signalr?view=aspnetcore-7.0#automatically-refresh-the-page-when-server-side-reconnection-fails

Recommended to change the value of retryIntervalMilliseconds into the file from 5000 to 500

Then call the file from the _Host.cshtml page

<script src="_framework/blazor.server.js" autostart="false"></script>
<script src="/assets/js/boot.js"></script>

Just replace the path "/assets/js/boot.js" with the path of the file into the wwwroot, in my case this was saved into assents/js

Also add this to the _Host.cshtml

<div id="reconnect-modal" style="display: none;"></div>

Till this point the reload message will not appear anymore and the page will auto refresh.

Remain a problem that after this refresh happen all the data into the inputs will be cleared, in another sense if the user has filled some data into the page this data will be cleared and the user will have to refill the data again. In my case this is a real problem because sometimes it happen in pages where the user fill long form with a lot of data so once the issue of reload happen and the page auto refresh then all the data the user filled hide. It is true the user not see this reload error anymore but it happen that the user find all filled data cleared.

I try to save this data into database or logfile or even query string however it is not effective solution. So according to my researches no effective solution. The only thing to do is to the use above feature to avoid the message of reload and keep the App running.

Answer 5

Bruce (SqlWork.com) 83,821

mobile apps are notorious for losing connections and lead to offline mode support. but browsers are getting more power aware and close connection for inactive tabs, so even desktop browser apps are acting more like mobile apps.

this means SPA type apps need to handle connection loss. Blazor server apps need the most care, as they can not run offline. You may find you need to save state so an auto reconnect (reload page) can recover. You can save state or a state key in local storage to be used on a reconnect. Additional care is required if the app can run in more than one tab.

Waleed 26 Reputation points

2024-03-11T20:33:13.3466667+00:00

Than you Bruce for your feedback

Can you please share with me more details about this suggestion <<You may find you need to save state so an auto reconnect (reload page) can recover>> How I can do it?

Does this will solve totally the issue of Reload? because I used the reconnectionHandler to refresh the page automatically however when this auto refresh happens all data was filled into the page inputs disappear.
Bruce (SqlWork.com) 83,821 Reputation points

2024-03-12T01:16:53.3+00:00

Yes the auto refresh will reload the page, but as you have seen all the data (state) is lost. To save state, you would bind on every state change and save to a persistent storage. On page init, you would load saved state ( be sure to cleared state).

if you support more than one tab, then you will need a key to the state, one for each tab. You can store the key as url parameter, so it will be passed on page reload.

Share via

Reload the page to restore functionality, Blazor Server .NET 8

6 answers

Your answer