Adding Health Checks UI

This is the second article about Health Checks and application monitoring.

1 Adding Health Check endpoint
2 Adding UI Health Check - this article
3 Using Azure to monitor the URL
4 Building your own monitoring tool

This article assumes that you already have Health Checks up and running.
If not go back to article.

The source code of the last article can be found (here)[https://github.com/ricardodemauro/Health-Check-Series] - branch article-1.

In the last blog post we discuss how to add health checks to your application returning JSON format.

But would be nice to have some UI to easily check the status of your application.

Remember JSON is machine friendly and UI is human friendly.

Adding UI to our Health Checks

First add the dependency packages to our project.

• AspNetCore.HealthChecks.UI
• AspNetCore.HealthChecks.UI.Client
• AspNetCore.HealthChecks.UI.InMemory.Storage

Now let's register the dependencies.

public void ConfigureServices(IServiceCollection services)
{
        //adding health check services to container
        services.AddHealthChecks()
                .AddMongoDb(mongodbConnectionString: _configuration.GetConnectionString("DefaultMongo"),
                        name: "mongo",
                        failureStatus: HealthStatus.Unhealthy); //adding MongoDb Health Check

        //adding healthchecks UI
        services.AddHealthChecksUI(opt =>
        {
                opt.SetEvaluationTimeInSeconds(15); //time in seconds between check
                opt.MaximumHistoryEntriesPerEndpoint(60); //maximum history of checks
                opt.SetApiMaxActiveRequests(1); //api requests concurrency

                opt.AddHealthCheckEndpoint("default api", "/healthz"); //map health check api
        })
        .AddInMemoryStorage();
}

And them add to the application pipeline.

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    app.UseRouting();

    app.UseEndpoints(endpoints =>
    {
        //adding endpoint of health check for the health check ui in UI format
        endpoints.MapHealthChecks("/healthz", new HealthCheckOptions
        {
            Predicate = _ => true,
            ResponseWriter = UIResponseWriter.WriteHealthCheckUIResponse
        });

        //map healthcheck ui endpoing - default is /healthchecks-ui/
        endpoints.MapHealthChecksUI();

        endpoints.MapGet("/", async context => await context.Response.WriteAsync("Hello World!"));
    });
}

Startup.cs

Note that we're adding another health check API endpoint called /healthz with a specific configuration. This is will be used by the UI Health Check.

All done. Now build, run, and open the browser Url http://{YOUR-SERVER}/healthchecks-ui.

You can also customize the branding though CSS. For that I recommend going to the official website - xabaril's site.

References

• https://www.hanselman.com/blog/HowToSetUpASPNETCore22HealthChecksWithBeatPulsesAspNetCoreDiagnosticsHealthChecks.aspx

• https://github.com/xabaril/AspNetCore.Diagnostics.HealthChecks