HealthChecks-UI Shows blank screen, error in console logged.

[jafin]

Edit

I feel I have fallen for the healthcheck api instead of the healthcheck-ui API configuration trap 🏅 .
After reconfiguring AddHealthCheckPoint to point to the AddHealthCheck endpoint, the UI now displays correctly.

I still believe this to be a bug, the UI should display something if it lands in this situation, guarding against the payload error. Present showing a blank UI seems not intended.

Original Issue

Please, fill the following sections to help us fix the issue

What happened:
Setup HealthChecksUI in NET 5 project

What you expected to happen:
View Healthcheck status through UI.

How to reproduce it (as minimally and precisely as possible):

Navigate to the /healthchecks-ui/ page
App then navigates to /healthchecks-ui#/healthchecks
See API Call retrieve status from /healthchecks-api/ successfully.

UI Client shows blank page.
Error in browser

Pulling down source, trying to source actual issue
The API data doesn't appear to be in the format of a liveness Array. So it's throwing.

Source code sample:

services.AddHealthChecks()
                .AddSqlServer(defaultConnection)
                .AddUrlGroup(new Uri("HTTP://www.google.com"), "Server");

            services.AddHealthChecksUI()
                .AddInMemoryStorage();

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

app.UseEndpoints(endpoints => {
 endpoints.MapControllerRoute(
                    name: "default",
                    pattern: "{controller=Home}/{action=Index}/{id?}");

 endpoints.MapHealthChecks("/health");
                endpoints.MapHealthChecksUI(options =>
                {
                     options.UIPath = "/healthchecks-ui";
                     options.ApiPath = "/healthchecks-api";
                });
}

Environment:

• .NET Core version 5
• Healthchecks version 5.0.1 (UI)
• Operative system: Windows 10
• Browser was Chrome v90

[CarlosLanderas]

Hello @jafin. You are using /healthchecks-api to expose the healthchecks from Microsoft Package, but also to expose the api path that Healthchecks UI uses. You are assigning the same endpoint to two different things. And the payload the UI is receiving is the one from Microsoft Diagnostics Healthchecks instead of the UI response.

Try using a different path in app.UseHealthchecks, something like /health , /healthz

[jafin]

@CarlosLanderas yes thank you, I did edit my issue diagnosis, the original issue is resolved (problem was as you have described).
But perhaps the UI should still function instead of erroring in console and showing a blank screen?

[CarlosLanderas]

Yes, we should check the response format and try to warn the user.