Skip to content

Frontend lacks an Error Boundary and guards on untrusted JSON.parse/localStorage #13

Open

Description

@lgnap

Contexte

A few frontend code paths trust input they do not control: JSON.parse on drag-and-drop payloads, on a story.json read from an uploaded ZIP and on an XHR response body; localStorage.getItem in the initial Redux state (throws in some private-browsing modes); and there is no React Error Boundary, so a single render error blanks the whole UI.

Description

Add small defensive guards, no behaviour change on valid input:

  • an ErrorBoundary component around the app root that shows a minimal "something went wrong" message instead of a blank page;
  • try/catch around each untrusted JSON.parse, ignoring/logging the bad payload;
  • a safe localStorage read helper used by the settings reducer.

Fichiers concernes

  • web-ui/javascript/src/components/ErrorBoundary.js (new) + web-ui/javascript/src/index.js — wrap the root
  • web-ui/javascript/src/components/PackLibrary.js:90, 281 — drag-and-drop JSON.parse
  • web-ui/javascript/src/components/diagram/widgets/PackDiagramWidget.js:149 — drag-and-drop JSON.parse
  • web-ui/javascript/src/utils/reader.js:25 — JSON.parse of story.json from uploaded ZIP
  • web-ui/javascript/src/services/library.js:34-35 — JSON.parse of XHR response (also drop the stray console.log)
  • web-ui/javascript/src/utils/storage.js (new) — safeGetItem(key) returning null on throw
  • web-ui/javascript/src/reducers/settings.js:14-15 and App.js:145 — use safeGetItem
  • Tests: ErrorBoundary.test.js, storage.test.js, and a case in the reader test for a malformed story.json

Plan d'implementation

  1. ErrorBoundary (class component with componentDidCatch) + wrap in index.js.
  2. utils/storage.js + use in settings.js and App.js.
  3. Guard the five JSON.parse sites.
  4. Tests for the boundary, the storage helper and the malformed ZIP case.
  5. yarn test green.

Criteres d'acceptation

  • A thrown render error shows the fallback instead of a blank page (tested)
  • Malformed drag payload / story.json / XHR body no longer throws out of the handler (tested for reader.js)
  • localStorage throwing during store creation no longer crashes startup (tested)
  • yarn test green on Ubuntu and Windows CI

Complexite

S

Activity

  1. lgnap commented on Sep 11, 2026

    @lgnap
    OwnerAuthor

    Prise en charge par Claude Code (instance tuxedo:40112:d397e957, branche fix/issue-13-frontend-defensive-guards).

  2. lgnap commented on Sep 11, 2026

    @lgnap
    OwnerAuthor

    Implemented in antoinevalentinHA#63: safeGetItem/safeSetItem on every localStorage use, parseJson on the five untrusted JSON.parse sites, ErrorBoundary at the root; 10 new tests, yarn build green under CI strictness. Awaiting the upstream owner.

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions