How can I change the “Could not reconnect to the s

Question

I am using the Blazor server-side.

When the Blazor App disconnect to the remote server, it will shows this:

I want to change the text ('Could not reconnect to the server...' and so on) of the image above.

I want to change it to the language of our country.

I found the file of the project but found nothing about this.

How can I change it? Thank you.

Answer 1

For the javascript side of things Blazor exposes a tiny API via the window.Blazor object.

One part of this API is the defaultReconnectionHandler which allows you to customize the reconnection experience including setting different options for the number of retrys etc.

However, it is also possible to just swap out the logic for displaying the ReconnectionDisplay

A simple implemenation looks like this and enables you to to get controll over the process:

function createOwnDisplay() {
    return {
        show: () => { alert("put code that shows a toast , ui, or whaterver here"); },
        hide: () => { console.log('foo'); },
        failed: () => { console.log('foo'); },
        rejected: () => { console.log('foo'); }
    };
}

Blazor.defaultReconnectionHandler._reconnectionDisplay = createOwnDisplay();

Answer 2

The Blazor App will check whether there's a html element with id={dialogId} in the page:

1. If such an element doesn't exists, it will use the default handler to display message.
2. If this element exists, this element's class will be :
   • set as components-reconnect-show when attempting to reconnect to the server,
   • set as components-reconnect-failed when it failed to connect to server.
   • set as components-reconnect-refused if the browser reaches the server while the server rejects the connection actively

By default, the dialogId is components-reconnect-modal. So you can create an element in the page and use CSS to control the content and styles as you like.

Demo:

For example, I create three parts of content to display within the Pages/_Host.cshtml:

<div id="components-reconnect-modal" class="my-reconnect-modal components-reconnect-hide">
    <div class="show">
        <p>
            This is the message when attempting to connect to server
        </p>
    </div>
    <div class="failed">
        <p>
            This is the custom message when failing 
        </p>
    </div>
    <div class="refused">
        <p>
            This is the custom message when refused
        </p>
    </div>
</div>

<app>
    @(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
</app>

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

And then let's add some CSS to control the style:

<style>
    .my-reconnect-modal > div{
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1000;
        overflow: hidden;
        background-color: #fff;
        opacity: 0.8;
        text-align: center;
        font-weight: bold;
    }
    .components-reconnect-hide > div
    {
        display: none;
    }

    .components-reconnect-show > div
    {
        display: none;
    }
    .components-reconnect-show > .show
    {
        display: block;
    }

    .components-reconnect-failed > div
    {
        display: none;
    }
    .components-reconnect-failed > .failed
    {
        display: block;
    }

    .components-reconnect-refused >div
    {
        display: none;
    }
    .components-reconnect-refused > .refused
    {
        display: block;
    }
</style>

Finally, we'll get the following message when attempting to connect or failing to connect: