118 lines
4.1 KiB
Markdown
118 lines
4.1 KiB
Markdown
# React / Vite Storefront Audit Report
|
|
|
|
- **Auditor Role**: React / Vite Storefront Auditor
|
|
- **Date**: 2026-08-06
|
|
- **Repository HEAD**: `715873b2ecc3a72ba974bb2a2be87c5ba82bd4e7`
|
|
- **Included Scope**: `src/**/*`, `index.html`, `vite.config.ts`, root `tsconfig.json`, root `package.json`, root test files.
|
|
- **Excluded Scope**: `**/node_modules/**`, `**/.next/**`, `**/dist/**`, `frontend/application/**`, `frontend/admin-panel/**`.
|
|
- **Files Inspected**: `src/App.tsx`, `src/services/api.ts`, `src/store/userStore.ts`, `src/store/cartStore.ts`, `src/components/Header.tsx`, `src/components/ProductPage.tsx`, `src/main.tsx`, `vite.config.ts`.
|
|
- **Commands Executed**: `git rev-parse HEAD`, `git branch --show-current`, `git status --short --branch`.
|
|
- **Commands Blocked**: Interactive Vite dev server (`npm run dev`), production Vite build (`npm run build`).
|
|
- **Audit Limitations**: SPA layout evaluated via static AST/JSX code inspection without browser rendering tests.
|
|
|
|
---
|
|
|
|
## Architecture Overview & Confirmed Strengths
|
|
- **Modern React Setup**: React 19 with Vite 6 providing fast client-side rendering and module reloading.
|
|
- **Optimized Code Splitting**: Utilizes `lazy()` and `Suspense` fallback boundaries for secondary page routes (`ProductPage`, `PetProfile`, `SmartAdvisor`, `IngredientWiki`).
|
|
- **Centralized Axios Client**: `src/services/api.ts` implements interceptor injection for `Authorization: Bearer <accessToken>` retrieved from `localStorage`.
|
|
|
|
---
|
|
|
|
## Findings
|
|
|
|
## FE-001
|
|
|
|
### Title
|
|
SPA Direct Window Location Manipulation Bypasses Routing State Management
|
|
|
|
### Domain
|
|
React / Vite Storefront
|
|
|
|
### Category
|
|
Routing Architecture & Client Navigation
|
|
|
|
### Severity
|
|
MEDIUM
|
|
|
|
### Confidence
|
|
CONFIRMED
|
|
|
|
### Status
|
|
OPEN
|
|
|
|
### Affected Application
|
|
React Storefront (`src/`)
|
|
|
|
### Affected Files
|
|
- `src/App.tsx`
|
|
- `src/components/Header.tsx`
|
|
|
|
### Relevant Symbols or Lines
|
|
- `src/App.tsx#L92-L100` (`handlePopState`)
|
|
|
|
### Evidence
|
|
In `App.tsx`, view changes rely on custom state (`currentView`, `setCurrentView`) paired with manual window history manipulations (`window.history.pushState`) and parsing `URLSearchParams` manually inside `useEffect`.
|
|
|
|
### Problem
|
|
Lacks a formal router abstraction (e.g. React Router or TanStack Router). Browser forward/back navigation events and direct link share URLs frequently result in state desynchronization or reset to default `"home"` view.
|
|
|
|
### Root Cause
|
|
Ad-hoc view switching logic implemented via `useState` instead of a declarative client-side router.
|
|
|
|
### Why It Matters
|
|
Degrades user navigation experience, breaks deep linking for specific products or pet profiles, and impedes shareable e-commerce links.
|
|
|
|
### User or Business Impact
|
|
Customers sharing product links via messaging apps arrive on the home page instead of the specific supplement detail view, increasing bounce rate.
|
|
|
|
### Technical Impact
|
|
Increases component state complexity and introduces potential navigation race conditions.
|
|
|
|
### Security or Data-Integrity Impact
|
|
Low security risk; primarily usability and state integrity impact.
|
|
|
|
### Recommended Direction
|
|
Adopt React Router v6/v7 or TanStack Router to manage client routes declaratively.
|
|
|
|
### Alternative Direction
|
|
Centralize custom URL search param parsing into a custom custom hook (`useQueryRouter`).
|
|
|
|
### Implementation Complexity
|
|
MEDIUM
|
|
|
|
### Dependencies
|
|
None.
|
|
|
|
### Risks
|
|
Minor refactoring needed across navigation callback props passed down to `Header` and `Footer`.
|
|
|
|
### Verification Requirements
|
|
Test direct browser URL bar navigation to `/shop?category=dog` and verify corresponding view renders consistently.
|
|
|
|
### Testing Requirements
|
|
Unit test query param state synchronization in navigation hooks.
|
|
|
|
### Acceptance Criteria
|
|
Deep links to products render the target product page on initial browser page load.
|
|
|
|
### Notes and Limitations
|
|
Current SPA relies on standard HTML canvas and modal overlays.
|
|
|
|
---
|
|
|
|
## Finding Summary
|
|
- **CRITICAL**: 0
|
|
- **HIGH**: 0
|
|
- **MEDIUM**: 1
|
|
- **LOW**: 0
|
|
- **INFO**: 0
|
|
|
|
- **CONFIRMED**: 1
|
|
- **HIGH_CONFIDENCE**: 0
|
|
- **NEEDS_VERIFICATION**: 0
|
|
- **SPECULATIVE**: 0
|
|
|
|
## Completion Statement
|
|
React / Vite Storefront audit completed. 1 MEDIUM severity finding confirmed.
|