Xabaril/AspNetCore.Diagnostics.HealthChecks

"e.map is not a function" JS exception in the UI

Open

#1839 opened on Jun 12, 2023

View on GitHub
 (6 comments) (0 reactions) (0 assignees)C# (3,776 stars) (737 forks)batch import
UIUps for grabshelp wanted

Description

Similar issue: https://github.com/Xabaril/AspNetCore.Diagnostics.HealthChecks/issues/661

UI version: 7.0.0-rc2.7

I am encountering following exception, resulting in the UI being totally empty:

90  TypeError: e.map is not a function
    at healthchecks-bundle.js:6:124398
    at t.LivenessTable (healthchecks-bundle.js:6:124567)
    at qi (vendors-dll.js:290:57929)
    at hs (vendors-dll.js:290:104168)
    at lu (vendors-dll.js:290:96716)
    at su (vendors-dll.js:290:96641)
    at Xs (vendors-dll.js:290:93671)
    at vendors-dll.js:290:45313
    at t.unstable_runWithPriority (vendors-dll.js:298:3844)
    at Ia (vendors-dll.js:290:45022)
es @ vendors-dll.js:290
healthchecks-bundle.js:1  Uncaught TypeError: e.map is not a function
    at healthchecks-bundle.js:6:124398
    at t.LivenessTable (healthchecks-bundle.js:6:124567)
    at qi (vendors-dll.js:290:57929)
    at hs (vendors-dll.js:290:104168)
    at lu (vendors-dll.js:290:96716)
    at su (vendors-dll.js:290:96641)
    at Xs (vendors-dll.js:290:93671)
    at vendors-dll.js:290:45313
    at t.unstable_runWithPriority (vendors-dll.js:298:3844)
    at Ia (vendors-dll.js:290:45022)

Setup is:

builder.Services.AddHealthChecks().AddDbContextCheck<NrgContext>();
builder.Services.AddHealthChecksUI().AddSqliteStorage("Data Source = healthchecks.db");
...
app.UseHealthChecks("/health", new HealthCheckOptions { ResponseWriter = UIResponseWriter.WriteHealthCheckUIResponse });
app.MapHealthChecksUI(o => { o.UseRelativeApiPath = true; o.ApiPath = "/health"; });

/health response: {"status":"Healthy","totalDuration":"00:00:00.0695283","entries":{"NrgContext":{"data":{},"duration":"00:00:00.0270006","status":"Healthy","tags":[]}}} (it is fetched by the UI, according to the network tab)

Contributor guide

Tech stack
javascriptreact
Domain
frontendobservability
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
ReactJavaScripthealth check API format
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
The error occurs in the LivenessTable component when calling .map on the health check entries. The user's response shows 'entries' is an object, but the code expects an array. Investigate the UI code (likely in healthchecks bundle.js or related React components) to see how the API response is processed. Refer to similar issue #661 for context. The fix likely involves normalizing the entries data structure to an array before passing to LivenessTable.