{ "summary": "Highest priority: activity refresh, save failure, and optimistic POST callbacks can write stale data after a project switch or concurrent reload (lines 169-192, 195-224, 246-249). Abort cleanup cancels cooperative fetch work but does not itself suppress already-resolved promise callbacks. Remove the ref-sync Effect and use request/project identities; retain the loading Effect or optionally adopt a cache/framework loader.", "detectedLanguage": "TypeScript", "framework": "React", "runtime": null, "detectedTechniques": [ { "name": "AbortController-based request cancellation", "category": "Cancellation", "evidence": "getProject and getActivity pass signals to fetch (lines 34-54), while saveProject, postActivity, and reloadActivity do not accept signals (lines 56-81, 195-224, 246-249)." }, { "name": "React effect cleanup for stale async work", "category": "React lifecycle", "evidence": "The loading Effect creates an AbortController and calls controller.abort(\"project changed\") in cleanup (lines 105-136)." }, { "name": "React transition-based async mutations", "category": "React concurrency", "evidence": "startSaving and startTransition wrap asynchronous save and activity actions (lines 179-209)." }, { "name": "Fetch API JSON service wrappers", "category": "Data access", "evidence": "readJson checks response.ok and casts response.json() to T (lines 27-33)." }, { "name": "React hooks", "category": "React state", "evidence": "The component uses top-level Hooks, including a ref-sync Effect at lines 99-103 and a network-loading Effect at lines 105-136." } ], "modernityAnalysis": [ { "technique": "AbortController-based request cancellation", "status": "acceptable", "explanation": "Passing AbortSignal through fetch is current cooperative cancellation. Save, POST, and manual reload currently cannot be cancelled.", "recommendation": "Thread signals through all request wrappers and classify cancellation with signal.aborted or its reason.", "citations": [ "S1" ] }, { "technique": "React effect cleanup for stale async work", "status": "acceptable", "explanation": "Cleanup is the appropriate lifecycle boundary for aborting obsolete external work, but abort is cooperative and does not guarantee that every later callback is harmless.", "recommendation": "Keep the network Effect when client fetching is intentional; add request and project guards before every state write.", "citations": [ "S9", "S1" ] }, { "technique": "React transition-based async mutations", "status": "acceptable", "explanation": "Transitions support interruptible non-urgent updates and async Actions, but updates after await may need another transition wrapper.", "recommendation": "Guard post-await writes and optionally wrap non-urgent post-await updates in startTransition.", "citations": [ "WEB-1" ] }, { "technique": "Fetch API JSON service wrappers", "status": "acceptable", "explanation": "Centralized status checking is useful, but the generic cast does not validate response shape.", "recommendation": "Validate JSON at the service boundary and consider parallel independent loading.", "citations": [ "citation undiscovered" ] }, { "technique": "React hooks", "status": "acceptable", "explanation": "The loading Effect synchronizes with the network, while selectedProjectRef merely mirrors state and is unnecessary synchronization.", "recommendation": "Remove the ref Effect and capture request-local project IDs and tokens.", "citations": [ "S9" ] } ], "securityConcerns": [ { "title": "Mutation concurrency is only partially protected.", "severity": "medium", "codeEvidence": "const nextActivity = await getActivity(project.id)\n setActivity(nextActivity)", "explanation": "A refresh or POST completion can write after the selected project or request ordering has changed. This is a stale-state integrity concern, not proof of a server vulnerability.", "recommendation": "Use per-request identity and project checks, plus cancellation and ordering for refreshes and mutations.", "citations": [ "S1", "S6" ], "codeLocation": { "filename": "project-workspace.tsx", "startLine": 212, "endLine": 213 } }, { "title": "Server JSON is trusted after a compile-time cast.", "severity": "medium", "codeEvidence": "return await response.json() as T", "explanation": "Successful HTTP decoding does not establish that the payload matches Project or Activity.", "recommendation": "Validate response schemas before storing data. This is an engineering judgment based on the supplied code.", "citations": [ "citation undiscovered" ], "codeLocation": { "filename": "project-workspace.tsx", "startLine": 43, "endLine": 43 } } ], "performanceConcerns": [ { "title": "Sequential project then activity fetch creates a waterfall.", "severity": "medium", "codeEvidence": "return getActivity(nextProject.id, controller.signal)", "explanation": "Activity begins only after the project request resolves.", "recommendation": "Fetch independent resources in parallel when possible, or use an optional cache/data loader.", "citations": [ "citation undiscovered" ], "codeLocation": { "filename": "project-workspace.tsx", "startLine": 137, "endLine": 137 } }, { "title": "Manual Effect fetching prevents preload and server data loading.", "severity": "low", "codeEvidence": "useEffect(() => {", "explanation": "Effects do not run during server rendering and manual fetching can miss caching and preload opportunities.", "recommendation": "Consider a cache or framework data loader only when SSR, deduplication, or initial latency matters; migration is optional.", "citations": [ "citation undiscovered" ], "codeLocation": { "filename": "project-workspace.tsx", "startLine": 117, "endLine": 117 } } ], "maintainability": { "assessment": "The code separates service calls from UI state, but multiple asynchronous paths write shared state without a common request-ordering policy.", "strengths": [ "Fetch wrappers centralize HTTP status handling.", "Project loading has lifecycle cleanup.", "Optimistic activity state is isolated in a reducer." ], "improvements": [ "Create request tokens containing project ID and operation identity.", "Guard success and failure writes consistently.", "Remove selectedProjectRef synchronization." ] }, "modernAlternatives": [ { "current": "Manual client-side Effect fetching.", "alternative": "A client cache or framework data-loading mechanism.", "rationale": "React identifies caching, deduplication, preload, and server-rendering benefits, but does not require framework migration.", "citations": [ "citation undiscovered" ] }, { "current": "Uncancelable save, POST, and reload requests.", "alternative": "AbortSignal-aware service functions.", "rationale": "The DOM abort model supports cooperative cancellation when signals are passed through the operation.", "citations": [ "S1" ] } ], "upgradeSuggestions": [ { "priority": "now", "title": "Prevent stale writes across project changes and races.", "steps": [ "Capture projectId and a monotonically increasing request token for each load, save, POST, and reload.", "Before every success and failure state write, verify both token and current project.", "Keep the existing loading cleanup abort, but do not rely on abort alone.", "Treat a concurrent reload as ordered work so an older snapshot cannot replace newer activity." ], "citations": [ "citation undiscovered" ] }, { "priority": "next", "title": "Make all requests cancellable.", "steps": [ "Add signal?: AbortSignal to saveProject, postActivity, and reloadActivity.", "Pass signals to fetch.", "Use signal.aborted or the signal reason to ignore cancellation rather than only checking DOMException AbortError." ], "citations": [ "S1" ] }, { "priority": "next", "title": "Remove unnecessary ref synchronization.", "steps": [ "Delete selectedProjectRef and its Effect.", "Use request-local project IDs and tokens for save guards.", "Keep the network Effect because it synchronizes with an external system." ], "citations": [ "S9" ] } ], "educationalExamples": [ { "title": "Abort plus request identity", "concept": "Cancellation does not replace stale-write protection.", "explanation": "The token rejects late completions even when the request has already resolved or does not observe abort.", "code": "const token = ++latest.current\nconst controller = new AbortController()\ntry {\n const value = await getActivity(id, controller.signal)\n if (token !== latest.current || id !== projectId) return\n setActivity(value)\n} catch (error) {\n if (controller.signal.aborted) return\n if (token === latest.current) setError(String(error))\n}", "language": "TypeScript", "citations": [ "S1", "citation undiscovered" ] }, { "title": "Transition after await", "concept": "Async transition work may need a new transition for later non-urgent updates.", "explanation": "Guard the result first, then explicitly mark the post-await state update as non-urgent.", "code": "startTransition(async () => {\n const saved = await saveProject(project, draft)\n if (requestId !== latest.current) return\n startTransition(() => {\n setProject(saved)\n setDraft({ name: saved.name, ownerId: saved.ownerId })\n })\n})", "language": "TypeScript", "citations": [ "WEB-1" ] } ], "generatedAt": "2026-08-12T14:41:05.799Z", "sources": [ { "title": "WHATWG DOM Standard: aborting ongoing activities", "url": "https://dom.spec.whatwg.org/#aborting-ongoing-activities", "publisher": "WHATWG", "kind": "standard", "summary": "Defines AbortController and AbortSignal cancellation semantics.", "relevance": "Provides primary semantics for cooperative cancellation of web-platform operations.", "official": true, "publishedAt": null, "id": "S1" }, { "title": "RFC 9110: HTTP Semantics", "url": "https://www.rfc-editor.org/rfc/rfc9110", "publisher": "RFC Editor", "kind": "standard", "summary": "The current core specification for HTTP semantics.", "relevance": "Provides normative evidence for status, method, and caching behavior.", "official": true, "publishedAt": "2022-06-01T00:00:00.000Z", "id": "S6" }, { "title": "React useEffect reference", "url": "https://react.dev/reference/react/useEffect", "publisher": "React", "kind": "official-doc", "summary": "Official guidance for synchronizing React components with external systems.", "relevance": "Documents effect cleanup and the lifecycle behavior relevant to cancelling asynchronous work.", "official": true, "publishedAt": null, "id": "S9" }, { "id": "WEB-1", "title": "React startTransition reference", "url": "https://react.dev/reference/react/startTransition", "publisher": "react.dev", "kind": "official-doc", "summary": "Current evidence retrieved by Luna web research.", "relevance": "Supplemental evidence used to verify current practice.", "official": true, "publishedAt": null } ] }