Search code examples
blazorblazor-server-side

Specify the reconnection URL in Blazor Server

When a circuit gets interrupted in Blazor Server and is unable to reconnect, users are shown this prompt.

Blazor reconnection prompt image

Is there a way of specifying the URL of the hyperlink or retry button in the above image?

Currently it just reloads the root of the site. I would like to have control over the URL that users are sent to.

Solution

  • As this blog post describes, you can provide your very own custom reconnect message. In this custom reconnect HTML fragment, simply provide your own link to your URL.

    Microsoft's documentation also shows how to provide your own UI.

    Basically, first add a custom HTML to your "Pages/_Host.cshtml" file:

    <div id="components-reconnect-modal">
    There was a problem with the connection. 
    Please <a href="https://example.org">click here</a> to reconnect.
</div>

    Then, add this to your central CSS file:

    #components-reconnect-modal {
    display: none;
}

#components-reconnect-modal.components-reconnect-show, 
#components-reconnect-modal.components-reconnect-failed, 
#components-reconnect-modal.components-reconnect-rejected {
    display: block;
}

    The referred Microsoft documentation has more option to further customize the appearance.