Better reconnection logic for Blazor Server

[konradbartecki]

Summary

Currently there is an issue with Blazor Server-side where it is not reconnecting circuits automatically and losing connection especially on mobile browsers.

See #23340 #26985

Motivation and goals

• Automatically reload page on Reconnection attempt to the circuit was rejected by the server. This may indicate that the associated state is no longer available on the server.
• Automatically reload page on mobile browsers that lost connection (probably due to browser tab being suspended), see Blazor Server Side. JS doesn't start after a long downtime on mobile browsers. #23340 Investigate behavior of Blazor Server on mobile when switching apps #26985

In scope

• Automatically refresh the page when circuit was rejected
• Add onReconnectionFailed event
• onReconnectionFailed could be used to automatically refresh the page instead of asking user to do that manually like in a screenshot shown below
• Change DefaultReconnectionHandler.attemptPeriodicReconnection to try to reconnect first and then delay, instead of delaying first and then trying to reconnect. (Possibly could fix Blazor Server Side. JS doesn't start after a long downtime on mobile browsers. #23340 Investigate behavior of Blazor Server on mobile when switching apps #26985)

Out of scope

Risks / unknowns

• Difficult to test on mobile browsers

Examples

DefaultReconnectionHandler.ts

 async attemptPeriodicReconnection(options: ReconnectionOptions) {
    for (let i = 0; i < options.maxRetries; i++) {
      this.reconnectDisplay.update(i + 1);

      const delayDuration = i == 0 && options.retryIntervalMilliseconds > ReconnectionProcess.MaximumFirstRetryInterval
                            ? ReconnectionProcess.MaximumFirstRetryInterval
                            : options.retryIntervalMilliseconds;
      this.logger.log(LogLevel.Debug, `Reconnecting in ${delayDuration}`);
      await this.delay(delayDuration);
      //code..
      //try { reconnect() }
      
     //instead of delaying 3000ms first and trying to reconnect later
     //we could try to reconnect first and delay afterwards
     //this could possibly fix reconnection on suspended mobile browsers

Example onReconnectionFailed event default implementation

    Blazor.defaultReconnectionHandler.onReconnectionFailed = function (d) {
        document.location.reload(); 
    }

I can take care of the implementation of this task.

Related issues

#23340
#26985
#40721
#30344
#41791

[konradbartecki]

I checked a debug release of my app and my assumptions were correct

On mobile the browser tab is getting awaken from the sleep
first we wait the default time of 3000ms
then we try to reconnect
then this attempt immediately fails because associated state is no longer available on the server (which makes sense)

Solution:

• Reorganize code to try to reconnect first, delay afterwards
• Reload the page after rejection as it is a better default.

WIP PR: #32122

[javiercn]

@konradbartecki thanks for contacting us.

We have a feature in the works to better support this scenario in 6.0. You can check it here

We recommend you upvote that issue instead so that we can keep track of the interest as well as the issue covering general improvements for server-side Blazor here

[javiercn]

I'm going to close this issue in favor of the two issues mentioned in my previous comment.

Nevermind, I see that there is a PR. We will evaluate it and see if we want to take it.

Thanks for contacting us.

We're moving this issue to the Next sprint planning milestone for future evaluation / consideration. We would like to keep this around to collect more feedback, which can help us with prioritizing this work. We will re-evaluate this issue, during our next planning meeting(s).
If we later determine, that the issue has no community involvement, or it's very rare and low-impact issue, we will close it - so that the team can focus on more important and high impact issues.
To learn more about what to expect next and how this issue will be handled you can read more about our triage process here.