Skip to main content
ELYTE
MediumFrontendExtend

Add Error Handling and Retry to Data Fetcher

A data fetcher component loads items but silently swallows errors with no recovery path. Extend it: show `data-testid="loading-indicator"` while pending; on rejection show `data-testid="error-message"` and `data-testid=...

Start problemBrowse all problems

What you will practice

TypeScriptReactReact PatternsAPI IntegrationAsync PatternsError Handling

Requirements

  • Keep `App` as the default exported React component with the provided `fetchData` prop.
  • Call `fetchData` once on initial mount.
  • Show `loading-indicator` while a fetch is pending.
  • On rejection, show `error-message` and `retry-button`, and hide loading.
  • Clicking retry must call `fetchData` again and show loading while pending.
  • On success, render `data-list` with one `data-item` per returned item.

Starter files

App.tsxEditable starter

What the judge checks

  • Runs in the react environment with the react-testing-library runner.
  • Uses a 3000ms judge budget.
  • Checks repeated UI regions: data-item.
  • Provides APIs: fetchData.
  • Behavior rules include: Error Shown On Failure, Loading Shown While Fetching, Retry Calls Fetch Again.

Constraints

  • Error and loading states must be mutually exclusive
  • Retry button must only appear after a failed fetch — not during loading or after success

Example behavior

Input
`fetchData` rejects
Output
`error-message` and `retry-button` appear; `loading-indicator` is hidden

Follow-up

How would you add a maximum retry count (e.g. give up after 3 attempts) without changing the existing test behavior?