Adding Health Checks UI
This is the second article about Health Checks and application monitoring. 1. Adding Health Check endpoint [/adding-health-checks-to-net-core-application/] 2. Adding UI Health Check - this article 3. Endpoint Monitoring with Azure Application Insights [/endpoint-monitoring-with-azure-app…
Bookmark this

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

  1. Adding Health Check endpoint
  2. Adding UI Health Check - this article
  3. Endpoint Monitoring with Azure Application Insights
  4. Using Azure App Services Endpoint Monitoring

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.

health-check-ui-1

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

Source Code

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

References

Endpoint Monitoring with Azure Application Insights
Let’s work with Application Insights - an Microsoft Azure service - to monitor our application through the endpoint /healthcheck.This is the third article about Health Checks and Application Monitoring.
Next of the series - Endpoint Monitoring with Azure Application Insights