.Net Core 2.2 Health Checks UI gives blank page

Question

I follow all the articles I can find including this one Microsoft Health Checks article.
The health checks work properly and the /health url of the application returns json, healthy status as expected.
However, the /healthchecks-ui returns blank page. On the console developer tools I can see the error, "Uncaught SyntaxError: Unexpected token {" in .healthchecks-bundle.js:1.

Startup.cs

public class Startup
{
    public Startup(IConfiguration configuration)
    {
        Configuration = configuration;
    }

    public IConfiguration Configuration { get; }

    // This method gets called by the runtime. Use this method to add services to the container.
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddDbContext<Model>(options => options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));

        // Health checks services
        services
            .AddHealthChecks()
            .AddMemoryHealthCheck("memory")
            .AddSqlServer(Configuration["ConnectionStrings:DefaultConnection"]);

        services.AddHealthChecksUI();    
        services.AddMvc();
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        if (env.IsDevelopment())
        {
            //app.UseBrowserLink();
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Home/Error");
        }

        app.UseHealthChecks("/health", new HealthCheckOptions
        {
            Predicate = _ => true,
            ResponseWriter = UIResponseWriter.WriteHealthCheckUIResponse
        });
        app.UseHealthChecksUI();

         app.UseMvc(routes =>
         {
             routes.MapRoute(
                 name: "default",
                 template: "{controller=Home}/{action=Index}/{id?}");

             routes.MapRoute(
                 name: "defaultApi",
                 template: "api/{controller=MyController}/{action=Get}/{value?}");
         });
    }
}

appsettings.json

{
    "HealthChecksUI": {
         "HealthChecks": [
         {
            "Name": "HealthChecksService",
            "Uri": "http://localhost:42008/health"
         }
     ],
     "Webhooks": [],
     "EvaluationTimeInSeconds": 10,
     "MinimumSecondsBetweenFailureNotifications": 60
  }
}

I also tried using HealthChecks-UI but it didn't affect.
I included of course the nuget packages Microsoft.AspNetCore.Diagnostics.HealthChecks (2.2.0) , AspNetCore.HealthChecks.UI (2.2.35).
Again, the /health returns json indicates healthy application but the UI returns blank page with js error. (Tried on both chrome and IE).
The environment is a closed one so if the ui tries to refer external resources from the internet it will fail but I don't see such a call.

Answer 1

There are 2 problems with what you're doing:

1. You need to set the HealthChecks.UI.Configuration.Options correctly in the UseHealthChecksUI method. You need to override the default paths and the UseRelativeApiPath and UseRelativeResourcesPath settings.

2. The path you are going to to view the UI in the browser (according to your settings) should be /health-ui

Here is the code I used to get your example working:

appsettings.json:

{
    "HealthChecksUI": {
         "HealthChecks": [
         {
            "Name": "HealthChecksService",
            "Uri": "http://localhost:42008/health"
         }
     ],
     "Webhooks": [],
     "EvaluationTimeInSeconds": 10,
     "MinimumSecondsBetweenFailureNotifications": 60
  }
}

Startup.cs:

public void ConfigureServices(IServiceCollection services)
{
    ...
    services
        .AddHealthChecks()
        .AddMemoryHealthCheck("memory")
        .AddSqlServer(Configuration["ConnectionStrings:DefaultConnection"]);

    services.AddHealthChecksUI();
    ...
}

public void Configure(IApplicationBuilder app)
{
    ... 
    app.UseCustomHealthChecks();
    ...
}

ApplicationBuilderExtensions.cs:

public static IApplicationBuilder UseCustomHealthChecks(this IApplicationBuilder builder)
{
    const string healthCheckApiPath = "/health";
    return builder
        .UseHealthChecks(healthCheckApiPath,
            new HealthCheckOptions()
            {
                Predicate = _ => true,
                ResponseWriter = UIResponseWriter.WriteHealthCheckUIResponse
            })
        .UseHealthChecksUI(options =>
        {
            options.UIPath = $"{healthCheckApiPath}-ui";
            options.ApiPath = $"{healthCheckApiPath}-api";
            options.UseRelativeApiPath = false;
            options.UseRelativeResourcesPath = false;
        });
}

HTH

Answer 2

Here's what worked for me: I am using netcore 2.2 with AspNetCore.HealthChecks.UI Version=2.2.2.

Inside my Configure method:

app.UseHealthChecks("/healthz", new HealthCheckOptions
{
    Predicate = _ => true,
    ResponseWriter = UIResponseWriter.WriteHealthCheckUIResponse
});

app.UseHealthChecksUI(setup =>
{
    setup.UIPath = "/healthchecks-ui"; // ui path
    setup.ApiPath = "/health-ui-api"; // this is the internal ui api
});

appsettings.json

"HealthChecks-UI": {
      "HealthChecks": [
        {
          "Name": "HealthChecksService",
            "Uri": "http://localhost:42008/healthz"
        }
      ],
      "Webhooks": [],
      "EvaluationTimeOnSeconds": 120,
      "MinimumSecondsBetweenFailureNotifications": 3660
  }