Error loading HealthCheck UI for AspNetCore

Question

I am experiencing some issues with the AspNetCore.HealthChecks.UI package. I made the necessary settings in the Startup class of my API project, but when I access the endpoint to view the HealthCheck interface, only a JSON is displayed.

My HealthCheck UI

My project is on version 3.1 of .NET Core, in which I installed the following nuget packages:

AspNetCore.HealthChecks.UI v3.1.3
AspNetCore.HealthChecks.UI.Client v3.1.2
AspNetCore.HealthChecks.UI.InMemory.Storage v3.1.2
Microsoft.Extensions.Diagnostics.HealthChecks v5.0.9

Below is the extension method in which I use the HealthCheck settings:

public static IServiceCollection AddHealthCheckConfiguration(
            this IServiceCollection services, 
            IConfiguration configuration)
        {
            string mongoConnectionString = configuration.GetSection("MongoSettings").GetSection("Connection").Value;
            string mongoDatabaseName = configuration.GetSection("MongoSettings").GetSection("DatabaseName").Value;
            string redisConnectionString = configuration.GetConnectionString("Redis");

            services
                .AddHealthChecks()
                .AddRedis(redisConnectionString)
                .AddMongoDb(mongoConnectionString, mongoDatabaseName: mongoDatabaseName);

            services.AddHealthChecksUI(opt =>
            {
                opt.SetEvaluationTimeInSeconds(15);
                opt.MaximumHistoryEntriesPerEndpoint(60);
                opt.SetApiMaxActiveRequests(1);

                opt.AddHealthCheckEndpoint("default api", "/api-health");
            })
            .AddInMemoryStorage();

            return services;
        }

And in another extension method I add the necessary settings for displaying the interface:

public static IApplicationBuilder UseMvcConfiguration(this IApplicationBuilder app)
        {
            app.UseHttpsRedirection();

            app.UseRouting();

            app.UseAuthorization();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers();

                endpoints.MapHealthChecks("/api-health", new HealthCheckOptions
                {
                    Predicate = _ => true,
                    ResponseWriter = UIResponseWriter.WriteHealthCheckUIResponse
                });

                endpoints.MapHealthChecksUI();
            });

            return app;
        }

Finally, my Startup class looks like this:

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

        public IConfiguration Configuration { get; }

        public void ConfigureServices(IServiceCollection services)
        {
            services.AddApiResponseCompressionConfig();

            services.AddApiCachingConfig(Configuration);

            services.AddHateoasConfig();

            services.AddMongoDbConfig();

            services.AddAutoMapper(typeof(Startup));

            services.AddWebApiConfig();

            services.AddHealthCheckConfiguration(Configuration);

            services.ResolveGeneralDependencies();

            services.ResolveRepositories();

            services.ResolveApplicationServices();

            services.AddSwaggerConfig();
        }

        public void Configure(
            IApplicationBuilder app, 
            IWebHostEnvironment env, 
            IApiVersionDescriptionProvider provider)
        {
            app.UseResponseCompression();

            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseMiddleware<ExceptionMiddleware>();

            app.UseHealthChecks("/healthcheck");

            app.UseMvcConfiguration();

            app.UseSwaggerConfig(provider);
        }
    }

I searched for similar errors here on StackOverflow, but none of the answers I found solved my problem.

Hi @lruizd, from the json string, it seems the error is cannot connect to redis server. — Rena, Sep 13 '21 at 07:28
I think health-check and health-check ui are two different things. In your startup you are mapping the json based healthcheck endpoint to the "api-health" route, and not setting anything in the "endpoints.MapHealthChecksUI();" method call. — fbede, Sep 13 '21 at 07:35
Hi @Rena! Many thanks for the reply. However, that was not the problem I was facing. When I took the print I hadn't really started the Redis service. But thanks for the answer. — lruizd, Sep 13 '21 at 21:22
Hi @fbede! Thanks a lot for the help. Your comment helped me solve the problem I was facing. It really was my failure to understand how healthcheck settings work. I will add an answer as a solution. — lruizd, Sep 13 '21 at 21:23

score 2 · Accepted Answer · edited Sep 14 '21 at 00:02

Thanks to @fbede help, I managed to solve the problem with the question.

I wasn't correctly mapping the healthcheck generation endpoints and the monitoring interface itself.

It was necessary to make adjustments to the code I presented in the question, starting with my extension method:

public static IServiceCollection AddHealthCheckConfiguration(
            this IServiceCollection services, 
            IConfiguration configuration)
        {
            string mongoConnectionString = configuration.GetSection("MongoSettings").GetSection("Connection").Value;
            string mongoDatabaseName = configuration.GetSection("MongoSettings").GetSection("DatabaseName").Value;

            services
                .AddHealthChecks()
                .AddMongoDb(mongoConnectionString, mongoDatabaseName: mongoDatabaseName);

            services.AddHealthChecksUI().AddInMemoryStorage();

            return services;
        }

And ending with the Configure method of my Startup class:

public void Configure(
            IApplicationBuilder app, 
            IWebHostEnvironment env, 
            IApiVersionDescriptionProvider provider)
        {
            app.UseResponseCompression();

            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

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

            app.UseHealthChecksUI(options =>
            {
                options.UIPath = "/healthchecks-ui";
                options.ApiPath = "/health-ui-api";
            });

            app.UseMiddleware<ExceptionMiddleware>();

            app.UseMvcConfiguration();

            app.UseSwaggerConfig(provider);
        }
    }

Also, I removed the following unnecessary configuration:

app.UseEndpoints(endpoints =>
            {    
                endpoints.MapHealthChecks("/api-health", new HealthCheckOptions
                {
                    Predicate = _ => true,
                    ResponseWriter = UIResponseWriter.WriteHealthCheckUIResponse
                });

                endpoints.MapHealthChecksUI();
            });

These fixes led to the expected loading of the interface:

HealthCheck UI

Error loading HealthCheck UI for AspNetCore

1 Answers1