Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
zorgoz opened this issue Jun 12, 2023 · 6 comments · May be fixed by #2269
Open

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

zorgoz opened this issue Jun 12, 2023 · 6 comments · May be fixed by #2269
Labels
help wanted Extra attention is needed UI Ups for grabs Issue is available to anyone who is interested

Comments

@zorgoz
Copy link

zorgoz commented Jun 12, 2023

Similar issue: #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)

@sungam3r sungam3r added UI help wanted Extra attention is needed Ups for grabs Issue is available to anyone who is interested labels Jul 3, 2023
@sungam3r
Copy link
Collaborator

sungam3r commented Jul 3, 2023

PR to fix this is welcome.

@cieciurm
Copy link
Contributor

Hello,

I've spent some time looking into this issue and have some conclusions.

I've reproduced this issue "e.map is not a function",
but I'm wondering if it's not due to a fact of misuse of HealthCheck URL and HealthCheckUI back-end URL.

app.UseHealthChecks("/health", new HealthCheckOptions { ResponseWriter = UIResponseWriter.WriteHealthCheckUIResponse });

This line configures the HealthCheck URL. So when you call /health you get a Health Check Result, also a ResponseWriter is specificed so it's formatted as nice JSON. All good.

app.MapHealthChecksUI(o => { o.UseRelativeApiPath = true; o.ApiPath = "/health"; });

This line configures HealthCheckUI back-end URL. This is the back-end URL front-end is polling to get summary of all Health Checks displayed by the UI. In this scenario, there is only one Health Check but there could be more. That's why the expected response is an array of HealthCheck results.

Please see the comparison of Health Check response vs Health Check UI back-end response

{
  "status": "Healthy",
  "totalDuration": "00:00:00.0018501",
  "entries": { /* ... */ }
}
[
    {
        "id": 1,
        "status": "Healthy",
        "onStateFrom": "2023-07-26T10:37:56.660717+02:00",
        /* ... */
     }
]

In the setup provided in the issue, identical URL is used as both Health Check URL and Health Check UI back-end URL which is incorrect.

Health Check UI back-end is iterating over all configured Health Checks and combines them in a single response (with multiple Health Check Results).

The issue can be mitigated by using any different Health Check UI back-end URL. For example:

app.MapHealthChecksUI(o => { o.UseRelativeApiPath = true; o.ApiPath = "/health-all"; });

Could you try this solution @zorgoz?

I don't think it's a bug in this package, but you can prove me wrong 😄 .

cc @sungam3r

@sungam3r
Copy link
Collaborator

Sorry, almost all UI stuff is out of my scope for now. So far I am not ready to discuss this area.

@cieciurm
Copy link
Contributor

Hi again @zorgoz,

Any chance you could have a look if the provided answer/solution works for you?

Thanks 👍🏽

@cieciurm
Copy link
Contributor

cieciurm commented Aug 5, 2023

ping @zorgoz

1 similar comment
@cieciurm
Copy link
Contributor

ping @zorgoz

@smnsht smnsht mentioned this issue Jul 27, 2024
5 tasks
smnsht pushed a commit to smnsht/AspNetCore.Diagnostics.HealthChecks that referenced this issue Jul 28, 2024
@smnsht smnsht linked a pull request Jul 28, 2024 that will close this issue
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted Extra attention is needed UI Ups for grabs Issue is available to anyone who is interested
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants