Bug: dashboard crashes with black screen (React runtime error)

[STRRL]

Description

The dashboard occasionally crashes to a black screen with a React runtime error in the console. The stack trace points to the minified bundle (index-5jPI-xyD.js) so the exact source is unclear.

Console stack trace

jt    @    index-5jPI-xyD.js:14
tn    @    index-5jPI-xyD.js:14
Co    @    index-5jPI-xyD.js:8
gc    @    index-5jPI-xyD.js:8
Nc    @    index-5jPI-xyD.js:8
Mu    @    index-5jPI-xyD.js:8
ku    @    index-5jPI-xyD.js:8
Ou    @    index-5jPI-xyD.js:8
gu    @    index-5jPI-xyD.js:8
ld    @    index-5jPI-xyD.js:8
id    @    index-5jPI-xyD.js:8
od    @    index-5jPI-xyD.js:8
(anonymous)    @    index-5jPI-xyD.js:8

Likely cause

Possibly related to #68 — when the API returns unexpected data (e.g., missing result field, null values), the frontend may throw an unhandled exception during rendering. The dashboard has no error boundary to catch and display the error gracefully.

Expected

• Dashboard should not crash to a black screen
• Add a React error boundary to catch rendering errors and show a fallback UI
• Investigate the actual error message (need source maps or dev mode to get a readable stack trace)

[STRRL]

Root Cause Found

Error: TypeError: Cannot read properties of undefined (reading 'split')

Source: dashboard/src/utils.ts:22-23

export function shortName(name: string): string {
  const parts = name.split('-')  // crashes when name is undefined

Call site: dashboard/src/components/JobRow.tsx:22

{shortName(job.runnerName)}

Why runnerName is undefined: Some job records from the API have no runnerName field. This happens when a job was inserted as a "completed-only" record (e.g., daemon restarted and only saw the completion event, not the start). See internal/management/jobs.go:82-88 — InsertCompletedJob doesn't set runnerName or runnerSetName.

Example API response with missing fields:

{
    "id": "2bc0dd5d-e87e-5aaf-8841-7ab405812fec",
    "startedAt": "2026-04-07T06:01:04.197093Z",
    "completedAt": "2026-04-07T06:01:04.197093Z"
}

No runnerName, no runnerSetName, no result — all missing.

Fix needed

1. shortName() should handle undefined/empty input gracefully (return "unknown" or "-")
2. JobRow.tsx should guard against missing runnerName
3. Add a React error boundary so rendering errors don't crash the entire dashboard to a black screen — show a fallback UI instead

[STRRL]

Why it worked before but crashes now

The crash is triggered by "orphan completion" job records — jobs that only have a completion event but no start event in the database.

How orphan records are created

When RecordJobCompleted() is called but no matching start record exists (UpdateJobCompleted affects 0 rows), it falls back to InsertCompletedJob (internal/management/jobs.go:81-88). The SQL for this path hardcodes empty strings for runner_name and runner_set_name:

INSERT OR IGNORE INTO jobs (id, runner_name, runner_set_name, result, started_at, completed_at)
VALUES (?, '', '', ?, ?, ?)

Additionally, RecordJobCompleted(jobID, result string) only accepts jobID and result — it doesn't receive runnerName at all, even though the caller (scaler.go:83) has access to job.RunnerName.

Why now

The daemon was recently restarted/redeployed. The SQLite database persists on disk (~/.elastic-fruit-runner/jobs.db), but the Scale Set API session is rebuilt on restart. Jobs that were running before the restart only received their completion event in the new session — the start event was already processed in the previous session and is in the DB, but the job IDs from the Scale Set API may not match, or the session missed the start entirely.

These orphan records (with empty runner_name) get mixed into the RECENT JOBS list. When JobRow.tsx calls shortName(job.runnerName) and runnerName is an empty string → protobuf omits it → frontend receives undefined → .split('-') crashes.

Previously this didn't happen because the daemon ran continuously without restarts, so all jobs had matching start + complete records with valid runnerName.

Fixes needed

1. shortName() — guard against undefined/empty input
2. InsertCompletedJob — accept and store runnerName/runnerSetName from the completion event
3. RecordJobCompleted signature — pass through runnerName and runnerSetName so orphan records still have context
4. Add React error boundary — prevent any single rendering error from taking down the entire dashboard