49 lines
1.9 KiB
Markdown
49 lines
1.9 KiB
Markdown
|
# Storybook Audit Report
|
||
|
|
|
||
|
|
## Summary
|
||
|
|
- **Total Stories**: 963
|
||
|
|
- **Failed Stories**: 310 (~32% failure rate)
|
||
|
|
- **Total Errors**: 1,040 (Network + Console)
|
||
|
|
|
||
|
|
## Failure Categories
|
||
|
|
|
||
|
|
### 1. Unmocked Network Requests (Critical)
|
||
|
|
**Count**: 463 Network Failures
|
||
|
|
**Diagnosis**: Stories are attempting to hit real production endpoints (`api.veza.com`) instead of using mocks.
|
||
|
|
- `ERR_NAME_NOT_RESOLVED`: `https://api.veza.com/api/v1/api/v1/logs/frontend`
|
||
|
|
- `ERR_ABORTED`: `https://api.veza.com/api/v1/auth/me`
|
||
|
|
- `ERR_ABORTED`: `https://picsum.photos/200` (External images)
|
||
|
|
|
||
|
|
**Impact**: Components depending on data stay in "Loading" state indefinitely or crash when data is missing.
|
||
|
|
|
||
|
|
### 2. Missing Context Providers
|
||
|
|
**Count**: ~15-20 identified instances (estimated from sample)
|
||
|
|
**Diagnosis**: Components accessing global state that isn't provided in the story decorator.
|
||
|
|
- `Error: useAuth must be used within AuthProvider`
|
||
|
|
- `TypeError: Cannot read properties of undefined (reading 'name')` (Likely missing user object from auth context)
|
||
|
|
|
||
|
|
### 3. Runtime Crashes
|
||
|
|
- `TypeError: Cannot read properties of undefined`: Cascading failures from missing API data.
|
||
|
|
|
||
|
|
## Remediation Plan
|
||
|
|
|
||
|
|
### Step 1: Configure Mock Service Worker (MSW)
|
||
|
|
- [ ] Initialize MSW in Storybook.
|
||
|
|
- [ ] Create `handlers.ts` to mock core endpoints:
|
||
|
|
- `/auth/me` (User profile)
|
||
|
|
- `/api/v1/logs/frontend` (Prevent logging noise)
|
||
|
|
- Domain specific endpoints for failing stories.
|
||
|
|
|
||
|
|
### Step 2: Global Decorators
|
||
|
|
- [ ] Wrap all stories in `preview.tsx` with:
|
||
|
|
- `AuthProvider` (Mocked)
|
||
|
|
- `QueryClientProvider` (React Query)
|
||
|
|
- `MemoryRouter` (already likely present but need verification)
|
||
|
|
|
||
|
|
### Step 3: Fix Specific Issues
|
||
|
|
- [ ] Fix double-path URL bug (`/api/v1/api/v1/...`)
|
||
|
|
- [ ] Mock external image services or provide local fallbacks.
|
||
|
|
|
||
|
|
## Priority
|
||
|
|
High. 30% of the component library is broken in documentation, making it unreliable for development.
|