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.

1.9 KiB Raw Blame History