Blazor Reconnection Issue After Locking Smartphone

Happy Development 20

I'm experiencing a problem with my Blazor Server application and I need your help. When I access my website on a smartphone and lock the device for some time, upon unlocking it, seems that the Blazor connection gets lost at that moment and tries to reconnect.

I would greatly appreciate it if someone could provide guidance or suggestions to solve this reconnection issue in Blazor after locking and unlocking the smartphone.

Thank you very much for your help!

AgaveJoe 26,031 Reputation points

2023-06-07T12:37:09.6733333+00:00

SignalR is the backbone of Blazor Server. Please read the official documentation.

ASP.NET Core Blazor hosting models

ASP.NET Core Blazor SignalR guidance
Happy Development 20 Reputation points

2023-06-07T13:09:54.52+00:00

Server app runs on SignalR, but I'm not using any AddSingalR or any HubConnection or anything relative to SignalR, I'm just using the basic Blazor Server app template as a Test. I didnt developed anything on it, Idk if you get the point. I'm using the basics. Just uploaded the basic template on the webhosting and I get the reconnection error. Ii've already readed the official documentation; Idk if you know that you can use blazor app without signalR hubs, you did know? Open a basic blazor server template for example; check the code and you will see no signalR is used, read again the question, thanks.

PS: Nevermind that, I've edited the question, stills the same question. Can you give a guidance or solution?
AgaveJoe 26,031 Reputation points

2023-06-07T13:19:06.3233333+00:00

Server app runs on SignalR, but I'm not using any AddSingalR or any HubConnection or anything relative to SignalR, I'm just using the basic Blazor Server app template as a Test.

This is the first line in the Blazor Server documentation.

With the Blazor Server hosting model, the app is executed on the server from within an ASP.NET Core app. UI updates, event handling, and JavaScript calls are handled over a SignalR connection using the WebSockets protocol.

Edit:

PS: Nevermind that, I've edited the question, stills the same question. Can you give a guidance or solution?

The second link explains how to handle disconnects.
Happy Development 20 Reputation points

2023-06-07T13:27:12.6066667+00:00

Sorry but I think was understandable I meant Im not using signalr I meant Im not using any hub, and I'm not developing any custom signalR service to send for example messages, like the typical chathub.

I thought I was clearly meaning I'm using the default blazor server app template, and that I'm getting an error when locking the smatphone. The question is why and how to slove this. Thanks .

Do you mean I have to handle disconnects? That default blazor server app template will throw errors by default, when user locks the smartphone ?
Happy Development 20 Reputation points

2023-06-07T13:31:25.5066667+00:00

This is the default Blazor Server App template , when I lock the smartphone and unlock it, I get this. Simply as that. That's the question.
AgaveJoe 26,031 Reputation points

2023-06-07T13:44:24.0633333+00:00

This is exactly what I expect if a phone is locked with a Blazor Application open. I'm guessing you expect the phone to allow a browser to keep the SignalR connection open? Or maybe automatically reconnect? If you read the second link, it shows how detect a disconnect and reconnect.

If you have user state that must be maintained then you'll need to design and write code to manage state.

There's a similar question on GitHub.

https://github.com/dotnet/aspnetcore/issues/41791

https://github.com/dotnet/aspnetcore/issues/30344
Happy Development 20 Reputation points

2023-06-07T14:05:04.28+00:00
Do you mean "Modify the reconnection handler (Blazor Server)" "Automatically refresh the page when reconnection fails (Blazor Server)"

https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/signalr?view=aspnetcore-7.0#modify-the-reconnection-handler-blazor-server

Working with the defaultReconnectionHandler ? I've already checked that, I know I can do that, and I already have this solution in my project. But I didnt expect to "hack" the default template to handle someting that basic. I've already reached this solution, a long time ago. This is like a hook snipet to make it work, but this looks ugly to my eyes. And I was wondering If there was a problem with the default blazor behaviour. So I'm wondering why microsoft doesnt make this reconnection functionality as a default, as usually users lock their phones.

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

2023-06-07T14:21:18.1533333+00:00

I've already seen this, and that's actually what I'm asking here on microsoft forum

https://github.com/dotnet/aspnetcore/issues/41791

https://github.com/dotnet/aspnetcore/issues/30344

2 answers

Bruce (SqlWork.com) 54,621 Reputation points

2023-06-07T15:42:32.4366667+00:00

it would be nice if the blazor docs made this clearer. Blazor server counts on a persistent connection to the browser client (via signal/r). if the connection closed, the circuit is shutdown (after a brief timeout).

In addition browsers are getting more aggressive in closing connection (especially on mobile and laptops) to save battery life. the Lock Screen or inactive tab will often close the connection.

the lost connection recovery must be done in javascript. as you noticed the template just has the reload message. As a true recovery generally requires recovering some state, you need to design you application to be able to recover. A common approach is to store recovery state in the browsers local storage. then you write javascript that catches the lost connection and restarts the app. The simplest is just a reload of the same page (location.reload()). but you might want to add a query parameter so the server knows its restart from saved state.

see:

https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/signalr?view=aspnetcore-7.0
Please sign in to rate this answer.
Happy Development 20 Reputation points

2023-06-08T23:42:49.19+00:00

Hi Bruce, I understand you, but what I dont get is, what state I have to recover on the basic default blazor server app template?

I mean, I'm using this template for testing pourposes; let's we say I upload this into the webhosting, and I lock my phone. I will get the mentioned reconnection issue. What state is supposedly needed to be stored there to avoid this issue?

Examples are welcome. Thanks!

Bruce (SqlWork.com) 54,621 Reputation points

2023-06-09T16:23:13.03+00:00

it depends on the app. lets say it was a contact app, and you were creating a new contact, and had filled in a couple fields. the default reload would lose that data (state). you would need to persist the input values, so on reload they could be set.

now lets say you where on the edit page. if the id was passed on the url, the reload would lookup the contact again, but again the changes would be lost. if the id was passed as a property and not on query string. then the contact id would be lost on reload.

you can check the how well you app recovers on a reload, but navigating to a page and using the browser refresh button. if you want better than the default behavior you need to code it.

Happy Development 20 Reputation points

2023-06-11T23:10:17.66+00:00

I think you dont understand this.

I repeat: what state I have to recover on the basic default blazor server app template? I lock my phone. I will get the mentioned reconnection issue. What state is supposedly needed to be stored there -on the basic default blazor server app template- to avoid this issue?

Im not managing any data, just the basic template crashes after unlock this aint nothing to do with localdatastorage........................................**
Sign in to comment
AgaveJoe 26,031 Reputation points

2023-06-09T14:08:34.31+00:00

What state is supposedly needed to be stored there to avoid this issue?

Managing state is very common in web development. There always something you want to keep track of and that something depends on how the application works.

The Counter component in the default Blazor Server template is a good example of state. The currentCount variable holds the user's count. In other words, the state of the current count. The currentCount variable is located in server memory and unique to each browser's SignalR connection. When the SignalR connection is close, Blazor Server will timeout and reclaim the memory so the memory can be used for other things.

If you wanted to save the state of the count then it is up to you to write code that stores the count somewhere that is not volatile. The next time the user comes online, perhaps after unlocking a phone, the currentCount can be set to the last saved count value.

As mentioned above, one option is saving the count in local storage.
Please sign in to rate this answer.
pharmaday pharmaday.com 0 Reputation points

2023-06-09T14:14:31.11+00:00

👍👍👍👍

Happy Development 20 Reputation points

2023-06-11T23:10:08.98+00:00

I think you dont understand this.

I repeat: what state I have to recover on the basic default blazor server app template? I lock my phone. I will get the mentioned reconnection issue. What state is supposedly needed to be stored there -on the basic default blazor server app template- to avoid this issue?

Im not managing any data, just the basic template crashes after unlock this aint nothing to do with localdatastorage........................................

Bruce (SqlWork.com) 54,621 Reputation points

2023-06-12T00:07:47.39+00:00

We don't know what you have done. the default template recovers fine. of course if you are on the counter page and have increased the counter before lost connection, it will go back to zero (as no state is saved).
Sign in to comment