fix(web): stop flooding console with 401 ApiError during initial load
Some checks failed
CI / E2E Tests (push) Has been skipped
CodeQL Analysis / CodeQL (javascript-typescript) (push) Failing after 1m5s
Deploy / Build API Image (push) Failing after 27s
Deploy / Build Web Image (push) Failing after 12s
Deploy / Build AI Services Image (push) Failing after 10s
E2E Tests / Playwright E2E (push) Failing after 16s
Security Scanning / Dependency Audit (pnpm) (push) Failing after 3s
Security Scanning / Trivy Scan — API Image (push) Failing after 57s
Deploy / Deploy to Staging (push) Has been cancelled
Deploy / Rollback Staging (push) Has been cancelled
Deploy / Smoke Test Production (push) Has been cancelled
Deploy / Rollback Production (push) Has been cancelled
CI / Lint → Typecheck → Test → Build (22) (push) Failing after 11s
Deploy / Smoke Test Staging (push) Has been cancelled
Deploy / Deploy to Production (push) Has been cancelled
Security Scanning / Trivy Scan — Web Image (push) Failing after 46s
Security Scanning / Trivy Filesystem Scan (push) Has been cancelled
Security Scanning / Security Gate (push) Has been cancelled
Security Scanning / Trivy Scan — AI Services Image (push) Has been cancelled
Some checks failed
CI / E2E Tests (push) Has been skipped
CodeQL Analysis / CodeQL (javascript-typescript) (push) Failing after 1m5s
Deploy / Build API Image (push) Failing after 27s
Deploy / Build Web Image (push) Failing after 12s
Deploy / Build AI Services Image (push) Failing after 10s
E2E Tests / Playwright E2E (push) Failing after 16s
Security Scanning / Dependency Audit (pnpm) (push) Failing after 3s
Security Scanning / Trivy Scan — API Image (push) Failing after 57s
Deploy / Deploy to Staging (push) Has been cancelled
Deploy / Rollback Staging (push) Has been cancelled
Deploy / Smoke Test Production (push) Has been cancelled
Deploy / Rollback Production (push) Has been cancelled
CI / Lint → Typecheck → Test → Build (22) (push) Failing after 11s
Deploy / Smoke Test Staging (push) Has been cancelled
Deploy / Deploy to Production (push) Has been cancelled
Security Scanning / Trivy Scan — Web Image (push) Failing after 46s
Security Scanning / Trivy Filesystem Scan (push) Has been cancelled
Security Scanning / Security Gate (push) Has been cancelled
Security Scanning / Trivy Scan — AI Services Image (push) Has been cancelled
Five compounding problems caused hundreds of "Console ApiError: Unauthorized" entries on every load of /dashboard (and friends) while unauthenticated or while the auth cookie was stale: 1. QueryClient had `throwOnError: true` as a blanket default, so every 401 from any react-query hook propagated to the nearest error boundary instead of staying in the query's `error` state. That also invited React to re-render and re-fire the boundary multiple times per failing query. 2. React Query retried all failures 3 times with exponential backoff, so a single 401 became four requests. 401 isn't fixable by retry, so this is just noise. 3. Dashboard layout rendered `<NotificationBell />` unconditionally, which polled /notifications/unread-count on mount even when no user was signed in → 401 on every mount. 4. Dashboard + Admin layouts had no redirect-to-login guard, so protected queries (market-report, heatmap, admin/dashboard, …) all mounted and fired against the API before the user ever saw the login screen. 5. Admin layout waited on `user` but had no way to distinguish "store still initialising" from "user genuinely absent" — so an expired cookie left the page stuck on a spinner while the same 401 storm played out in the background. Fixes - query-client.ts: `throwOnError` and `retry` are now predicates. Only 5xx / network errors bubble to boundaries and are retried; 4xx (auth, validation, not-found) stay in query error state so the component can render an empty/auth placeholder. - auth-store.ts: new `isInitialized` flag set in a finally block at the end of `initialize()`. Downstream guards use it to distinguish "still booting" from "definitely logged out". - (dashboard)/layout.tsx: redirects to /login?next=<path> once initialised and unauthenticated, and renders a lightweight loading screen in the meantime so child queries never mount. - (admin)/layout.tsx: same guard. Non-ADMIN logged-in users still bounce to /dashboard. - notification-bell.tsx: short-circuits `fetchUnreadCount` when `isAuthenticated` is false. Verified in dev: visiting /vi/dashboard unauthenticated now redirects to /login?redirect=/dashboard with zero console errors and no /analytics/… calls to the backend. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -21,7 +21,7 @@ import { cn } from '@/lib/utils';
|
||||
export default function AdminLayout({ children }: { children: React.ReactNode }) {
|
||||
const pathname = usePathname();
|
||||
const router = useRouter();
|
||||
const { user, logout } = useAuthStore();
|
||||
const { user, isAuthenticated, isInitialized, logout } = useAuthStore();
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
const t = useTranslations();
|
||||
|
||||
@@ -33,12 +33,20 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
// Once the auth store finished its initial cookie→profile probe:
|
||||
// - no session → push to /login (don't leave a spinner forever)
|
||||
// - authenticated but not ADMIN → push to regular dashboard
|
||||
if (!isInitialized) return;
|
||||
if (!isAuthenticated) {
|
||||
router.replace(`/login?next=${encodeURIComponent(pathname)}`);
|
||||
return;
|
||||
}
|
||||
if (user && user.role !== 'ADMIN') {
|
||||
router.replace('/dashboard');
|
||||
}
|
||||
}, [user, router]);
|
||||
}, [isInitialized, isAuthenticated, user, router, pathname]);
|
||||
|
||||
if (!user) {
|
||||
if (!isInitialized || !user) {
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center" role="status">
|
||||
<div className="text-muted-foreground">{t('common.loading')}</div>
|
||||
|
||||
Reference in New Issue
Block a user