Skip to content

fix(components): add missing override modifiers to ErrorBoundary - #2042

Open
liutingqiu wants to merge 1 commit into
Commitlabs-Org:masterfrom
liutingqiu:fix/1880-errorboundary-override
Open

liutingqiu wants to merge 1 commit into
Commitlabs-Org:masterfrom
liutingqiu:fix/1880-errorboundary-override

Conversation

@liutingqiu

Copy link
Copy Markdown

Context

Follows #1880. tsconfig.json sets noImplicitOverride: true, but src/components/ErrorBoundary.tsx overrides three React base-class members without the override modifier. With the repo's own compiler options, that file reports:

src/components/ErrorBoundary.tsx(25,3): error TS4114: This member must have an 'override' modifier because it overrides a member in the base class 'Component<ErrorBoundaryProps, ErrorBoundaryState, any>'.
src/components/ErrorBoundary.tsx(31,3): error TS4114: ...
src/components/ErrorBoundary.tsx(43,3): error TS4114: ...

The three members are the state field, componentDidCatch, and render. This component is used by src/app/commitments/[id]/page.tsx to keep the health-metrics and attestation sections independently recoverable, so it is live code rather than a leftover.

What changed

  • src/components/ErrorBoundary.tsx — added the three override modifiers. No behaviour change; override is a compile-time annotation only.
  • src/components/ErrorBoundary.test.tsx (new, 5 tests) — the component had no test file at all. It now covers: children render normally with no panel; a child that throws produces the role="alert" panel and surfaces the thrown message; a caller-supplied fallback replaces the built-in panel; onError receives the Error and its errorInfo; and clicking "Try again" leaves the boundary operational rather than throwing out of the tree.

How to verify

npm ci
npx vitest run src/components/ErrorBoundary.test.tsx   # 5 passed
npm run format:check
npx tsc --noEmit

To reproduce the defect and the fix in isolation (the full-repo tsc run cannot show it — see the caveat below):

npx tsc --noEmit --jsx react-jsx --target ES2020 --module esnext --moduleResolution bundler \
  --strict --noImplicitOverride --exactOptionalPropertyTypes --skipLibCheck --esModuleInterop \
  --lib dom,dom.iterable,esnext src/components/ErrorBoundary.tsx
# before: 3 × TS4114, exit 2
# after:  no output, exit 0

Local results on this branch (Windows, node v24.21.0 — not the pinned Node 20 from .nvmrc, so CI on Node 20 is the authoritative run):

  • src/components/ErrorBoundary.test.tsx: 5/5 pass.
  • npx prettier --check and npx eslint on both files: clean.
  • Full npm run test:coverage: the failing-test set is identical to unmodified master (192 items, no additions, no removals), and the new suite passes.
  • Full npx tsc --noEmit: 58 errors, the same count as unmodified master.

Caveat on the typecheck signal

You should know why the full-repo error count does not drop by three. src/lib/backend/env.ts and src/components/create/ResumeDraftPrompt.tsx currently fail with syntax errors (TS1005/TS1109/TS1382 etc.). A parse failure in a file suppresses type checking of the rest of the program, so the whole repo reports 58 errors regardless of this fix — that is also why none of these 58 mention ErrorBoundary. The per-file command above is what demonstrates the change, and the TS4114 errors will disappear from the full run once those parse errors are repaired. Fixing them is outside the scope of this issue.

Closes #1880

tsconfig sets noImplicitOverride, but ErrorBoundary overrode the React base class state field, componentDidCatch and render without the modifier, producing three TS4114 errors under the repo's own compiler options.

Add the modifiers and cover the component, which had no test file, including the fallback, onError and recovery paths.
@vercel

vercel Bot commented Oct 1, 2026

Copy link
Copy Markdown

@liutingqiu is attempting to deploy a commit to the 1nonly's projects Team on Vercel.

A member of the Team first needs to authorize it.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

ErrorBoundary.tsx missing required override modifiers on lifecycle methods

1 participant