In Blazor applications built on .NET 8, there is an issue where the server disconnects unexpectedly when there is no user interaction for milliseconds.

Question

Why does the Blazor server disconnect after only milliseconds of non-interactivity, accompanied by the message "Attempting to reconnect: 1 of 6"?

Also Blazor server-side application consistently display the error message "Error: Connection disconnected with error 'Error: Server timeout elapsed without receiving a message from the server.'" in the browser's console, followed by automatic screen refreshing, despite milliseconds of non-interactivity?

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

i am using Blazor with .Net 8
i have also tried .Net7

Answer 1

my progeam.cs

using MatBlazor;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.EntityFrameworkCore;
using QuizABApp.Data;
using QuizABApp.Data.Models.DatabaseModels;
using QuizABApp.Services;
using MatBlazor;
using QuizABApp.Data.Models.DataBaseScaffoldModels;


var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();

builder.Services.AddSingleton<WeatherForecastService>();
builder.Services.AddScoped<QuizService>();
builder.Services.AddScoped<AvaBeshoyService>();
builder.Services.AddScoped<RespondentsService>();
builder.Services.AddDbContext<AppDbContext>(options =>
    options.UseSqlServer(builder.Configuration.GetConnectionString("DefaultConnection"))
);
builder.Services.AddDbContext<XContext>(options =>
    options.UseSqlServer(builder.Configuration.GetConnectionString("Connection"))
);
builder.Services.AddMatBlazor();
builder.Services.AddScoped<IMatToaster, MatToaster>(); // Example registration, adjust as needed
builder.Services.AddMatToaster(config =>
{
    config.Position = MatToastPosition.TopRight;
    config.PreventDuplicates = true;
    config.NewestOnTop = true;
    config.ShowCloseButton = true;
    config.MaximumOpacity = 95;
    config.VisibleStateDuration = 3000;
});
builder.Services.AddSingleton<MatToastConfiguration>(); 
builder.Services.AddHttpClient();
builder.Services.ConfigureApplicationCookie(options =>
{
    options.ExpireTimeSpan = TimeSpan.FromMinutes(100); // Set your desired session timeout
    options.SlidingExpiration = true;
});

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}


app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();
app.UseAuthentication();
app.UseAuthorization();
app.MapControllers();

app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

app.Run();

in my _layout
i have added those to overcome this problem
i have tried what in here
https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/signalr?view=aspnetcore-7.0#automatically-refresh-the-page-when-server-side-reconnection-fails

@* <div id="reconnect-modal" style="display: none;"></div> *@
<script src="_framework/blazor.server.js" ></script>
@* <script src="/assets/js/boot.js"></script> *@
<script src="_content/MatBlazor/dist/matBlazor.js"></script>
<script>
  Blazor.start({
    reconnectionOptions: {
      maxRetries: 4,
      retryIntervalMilliseconds: 3000
    }
  });
</script>
<script>
   _reconnectCallback = function(d) {
        document.location.reload(); 
   }
</script>

other than that i have one component that retrieves data from DB and show them