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?

• Yes I am willing to submit a PR!

Code of Conduct

• I agree to follow this project's Code of Conduct