vjeka1 opened a new issue, #62697:
URL: https://github.com/apache/airflow/issues/62697
### Apache Airflow version
Other Airflow 3 version (please specify below)
### If "Other Airflow 3 version" selected, which one?
3.1.6
### What happened?
The Dashboard Home page (`/home`) crashes with an unhandled JavaScript
TypeError:
TypeError: Cannot read properties of undefined (reading 'status')
at K0s (index-BpILZJIF.js:1627:8481)
The error is thrown in `Health.tsx` when the `/api/v2/monitor/health`
endpoint returns
an error or empty response (e.g., due to a reverse proxy returning
400/403/502).
In this case `data` is `undefined`, and the component tries to access
`data?.metadatabase.status` — the optional chaining (`?.`) stops at
`metadatabase`
(which becomes `undefined`), but `.status` is accessed without optional
chaining,
causing the crash.
All other pages (e.g., `/dags`) work correctly because they use safe access
patterns
like `data?.dags ?? []`.
### What you think should happen instead?
The Health component should handle the case where `data` is `undefined`
gracefully,
without crashing the entire page. The optional chaining should be applied
consistently
to nested fields.
The fix is straightforward — change in `Health.tsx`:
```
// Current (buggy):
status={data?.metadatabase.status}
status={data?.scheduler.status}
status={data?.triggerer.status}
```
```
// Fixed:
status={data?.metadatabase?.status}
status={data?.scheduler?.status}
status={data?.triggerer?.status}
```
The `ErrorAlert` component is already present in `Health.tsx` and would
properly display
the error — but the crash happens before it can render, during props
evaluation.
Note: `dag_processor` is handled correctly in the same file via conditional
rendering:
`{data?.dag_processor ? <HealthBadge ... /> : undefined}`
### How to reproduce
1. Deploy Airflow 3.1.6 behind a reverse proxy (e.g., nginx) with mTLS
(ssl_verify_client on)
2. The proxy requires a client certificate for all endpoints
3. The browser does not send a client certificate for the anonymous fetch()
call
to `/api/v2/monitor/health` (this endpoint is intentionally
public/unauthenticated)
4. The proxy returns HTTP 400 "No required SSL certificate was sent"
5. `useMonitorServiceGetHealth` hook returns `data = undefined`, `error =
<Response>`
6. `Health.tsx` crashes on `data?.metadatabase.status` because
`data?.metadatabase` is `undefined` and `.status` throws TypeError
7. React Router catches the error and the entire `/home` page is blank
The crash can also be reproduced by:
- Temporarily blocking `/api/v2/monitor/health` at the proxy level
- Simulating a network error for this specific endpoint in browser DevTools
### Operating System
Linux
### Versions of Apache Airflow Providers
_No response_
### Deployment
Virtualenv installation
### Deployment details
-
### Anything else?
Root cause is in:
airflow-core/src/airflow/ui/src/pages/Dashboard/Health/Health.tsx
Affected lines (approximately):
status={data?.metadatabase.status} ← line ~42
status={data?.scheduler.status} ← line ~48
status={data?.triggerer.status} ← line ~54
The fix is a one-line change per field (add `?` before `.status`).
I am willing to submit a PR with the fix.
### Are you willing to submit PR?
- [x] Yes I am willing to submit a PR!
### Code of Conduct
- [x] I agree to follow this project's [Code of
Conduct](https://github.com/apache/airflow/blob/main/CODE_OF_CONDUCT.md)
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
