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

Question

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

Answer 1

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

Answer 2

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:

1. 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.
2. 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 3

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.

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

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