Xabaril/AspNetCore.Diagnostics.HealthChecks

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

Open

#1,839 建立於 2023年6月12日

在 GitHub 查看
 (6 留言) (0 反應) (0 負責人)C# (3,776 star) (737 fork)batch import
UIUps for grabshelp wanted

描述

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)

貢獻者指南

技術棧
javascriptreact
領域
frontendobservability
議題類型
bug
難度面向新貢獻者的預計實作難度，1 表示很小改動，5 表示專家級工作。
3
預計時間有經驗貢獻者完成調查、實作、測試並準備 pull request 的粗略時間範圍。
1-3 hours
活動狀態議題目前的可參與程度：新鮮、活躍、陳舊、阻塞或等待維護者輸入。
stale
清晰度議題是否清楚說明預期改動、驗收標準和下一步。
clear
前置要求
ReactJavaScripthealth check API format
新手友善度1-100 的估計分數，表示該議題對首次貢獻者的友善程度。
60
研究方向
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.
"e.map is not a function" JS exception in the UI · Xabaril/AspNetCore.Diagnostics.HealthChecks#1839 | Good First Issue