Auto reconnect Blazor Serverside

Question

Blazor serverside (dotnet core 3.1)

I run into the problem that on customer side this is shown:

Could not reconnect to the server. Reload the page to restore functionality.

Each time I update the code base or internet is broken or something like this.

Now the goal is that it should reload the page as soon as the server is back again (or in some interval).

Is there any possibility that could help me?

score 27 · Accepted Answer · answered Jan 19 '20 at 07:19

27

You can try this code:

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

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

answered Jan 19 '20 at 07:19

Sergius Sizykh

394
3
2

When application depends on the build time. Can breaks by browser timeout. But can work for deployment to site. – Sergius Sizykh Jan 24 '20 at 11:58
1

@Softlion I tested this solution and it is working. I added the override of the reconnectCallback to my _Host.cshtml – Vortex852456 Mar 14 '20 at 15:24
I gor a error:Cannot set properties of undefined (setting '_reconnectCallback') – 彭彥雄 Dec 28 '21 at 05:11
1

No longer a solution in .Net 6 as the `_reconnectCallback` has been removed. – aryeh Jan 19 '22 at 23:09
Check the solution at https://stackoverflow.com/a/60031891/7606096. Tested and it works. – Hugo A. Mar 14 '22 at 20:19
@aryeh do you know if this has been replaced by something else? – d0rf47 Feb 06 '23 at 15:21
3

@d0rf47 yes I wrote a post about it: https://alldev.co.uk/reload-blazor-server-on-connection-down-in-net-6/ – aryeh Feb 07 '23 at 13:16
1

Added it as a solution below – aryeh Feb 07 '23 at 13:29

score 23 · Answer 2 · answered Apr 13 '20 at 20:57

<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 will wait until the reload button appears and then will wait until the server is back up before actually reloading.

From https://github.com/dotnet/aspnetcore/issues/10325#issuecomment-537979717

My server is behind a proxy server, so this would cause the reload to show the proxy error page. I added "if (response.ok)" just before the location.reload() and that fixes it - the proxy reports an error, and the code keeps retrying because it wasn't a 2xx response. — mj2008, Feb 19 '21 at 10:06
That solution is working correct for me. You can also hide the reload if you change the querySelector to only '#components-reconnect-modal' and make a custom css for the #components-reconnect-modal with display: none !important; In that way the reload is nearly imperceptible to the user. — Aljenci, Jul 26 '22 at 14:10

aryeh · Answer 3 · 2023-04-22T23:55:07.403

8

For .NET 6 & 7 you can use:

<script src="_framework/blazor.server.js" autostart="false"></script>
<script>
    Blazor.start().then(() => {
        Blazor.defaultReconnectionHandler._reconnectCallback = function (d) {
            document.location.reload();
        }
    });
</script>

This keeps all of the original startup process as is and just adds a page reload on connection down, without needing a mutations observer.

edited Apr 22 '23 at 23:55

answered Feb 07 '23 at 13:25

aryeh

610
5
13

Cheers thank you for adding this! Checking the article out now too – d0rf47 Feb 09 '23 at 14:52

score 0 · Answer 4 · answered Mar 04 '22 at 10:50

Here's an alternative but I'm not sure it works 100%.

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

<script>
    Blazor.start().then(() => {
        Blazor.defaultReconnectionHandler._reconnectionDisplay = {
            show: () => {},
            update: (d) => {},
            rejected: (d) => document.location.reload()
        };
    });
</script>

score -2 · Answer 5 · answered Jan 20 '20 at 11:50

One trick some people forget about is that you can actually "watch" your code base for changes, if you open your favorite terminal and run dotnet run watch debug in the same folder as your cproj file it should watch your changes so when you refresh your browser it should pick up any changes to your application, formore information read: https://learn.microsoft.com/en-us/aspnet/core/tutorials/dotnet-watch?view=aspnetcore-3.1

dotnet watch is a tool that runs a .NET Core CLI command when source files change. For example, a file change can trigger compilation, test execution, or deployment.

Hope this helps

It doesn't appear to have any effect on whether or not the browser reloads. — BrainSlugs83, Sep 14 '20 at 21:25

Auto reconnect Blazor Serverside

5 Answers5

Linked