.NET 6环境下Healthchecks UI显示空白页面问题求助

问题现象 #

默认的Healthchecks UI页面显示为空白页。

预期结果 #

能够正常查看默认的Healthchecks UI页面。

复现步骤 #

在Program.cs中调用app.MapHealthChecks()和app.MapHealthChecksUI()方法即可复现。

代码示例 #

以下是Program.cs文件内容：

using HealthChecks.UI.Client;
using Microsoft.AspNetCore.Diagnostics.HealthChecks;
using MonitoringApi.HealthChecks;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllers();
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
builder.Services.AddHealthChecks()
    .AddCheck<RandomHealthCheck>("Site Health Check")
    .AddCheck<RandomHealthCheck>("Database Health Check");

builder.Services.AddHealthChecksUI(opts =>
{
    opts.AddHealthCheckEndpoint("api", "/health");
    opts.SetEvaluationTimeInSeconds(5);
    opts.SetMinimumSecondsBetweenFailureNotifications(10);
}).AddInMemoryStorage();

var app = builder.Build();

if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}

app.UseHttpsRedirection();

app.UseAuthorization();

app.MapControllers();
app.MapHealthChecks("/health", new HealthCheckOptions
{
    ResponseWriter = UIResponseWriter.WriteHealthCheckUIResponse
});
app.MapHealthChecksUI();

app.Run();

环境信息 #

• .NET Core版本：6
• Healthchecks版本：6.0.5
• 操作系统：Windows 10

补充信息 #

若之前安装过Watchdogs可能会出现此问题。

解决方法 #

• 添加静态文件中间件：HealthChecks UI依赖静态资源（CSS、JS文件）渲染页面，需在UseAuthorization前添加app.UseStaticFiles();，调整后中间件顺序如下：

  app.UseHttpsRedirection();
  // 新增静态文件中间件
  app.UseStaticFiles();
  app.UseAuthorization();
  

• 清理Watchdogs残留依赖：若曾安装过Watchdogs，需移除项目中相关NuGet包引用，清理bin和obj目录后重新构建项目。
• 验证健康检查端点：确认/health端点能正常返回JSON格式的健康检查数据，只有端点数据正常，UI才能正确渲染内容。

内容的提问来源于stack exchange，提问作者Costas_