ROOT CAUSE: Race condition where StationsPage renders before auth
token is ready, causing DOM state mismatch.
Timeline of the bug:
1. Auth0 sets isAuthenticated=true
2. App renders StationsPage before isAuthInitialized=true
3. useSavedStations hook is disabled (enabled: false)
4. Google Maps loads and manipulates DOM
5. Auth token finally acquired, isAuthInitialized=true
6. Component re-renders with query now enabled
7. React tries to remove DOM nodes already removed by Google Maps
8. NotFoundError: removeChild fails
SOLUTION: Add isAuthGateReady check in App.tsx before rendering
protected routes. Show "Initializing session..." until auth gate is
fully initialized.
Changes:
- Import useIsAuthInitialized hook in App.tsx
- Call hook in App component
- Add guard check after isAuthenticated check
- Show loading UI if authenticated but auth gate not ready
- Add debug logs to track render flow
Now the page won't render until BOTH:
1. isAuthenticated=true (Auth0)
2. isAuthInitialized=true (our token gate)
This prevents the race condition that causes the removeChild DOM error.
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
- Enable console logging in vite.config.ts:
- Set drop_console to false
- Disabled pure_funcs stripping for console.log
- Changed esbuild to only drop debugger, keep console
- Add debug logging to auth-gate.ts:
- Log setAuthInitialized calls
- Add debug logging to useSavedStations.ts:
- Log hook invocations
- Log query function execution and results
- Added retry configuration
- Add debug logging to StationsPage.tsx:
- Log component renders
- Log useSavedStations result state
These logs will show us what's happening with auth initialization and
query state transitions that are causing the React DOM removeChild error.
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
- Add useIsAuthInitialized hook to auth-gate for reactive auth state
- Returns true once auth token is acquired and ready
- Waits for waitForAuthInit() promise to resolve
- Update useSavedStations hook to wait for auth before fetching
- Add 'enabled: isAuthInitialized' to useQuery config
- Prevents 401 errors from requests made before token is ready
- Fixes race condition where hook fires before interceptor is set up
The stations page was blank because useSavedStations() made an API call
with refetchOnMount:true before the auth token interceptor was added,
causing a 401 response that made the component unmount/remount, creating
a React DOM error in the error boundary.
Now the hook waits for isAuthInitialized to be true before making the
initial API call, ensuring the token interceptor is ready.
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
- Fix: Remove double /api prefix in stations API calls
- stations.api.ts was using '/api/stations' but apiClient already prepends '/api'
- Changed API_BASE from '/api/stations' to '/stations'
- This resolves 404 errors on /api/api/stations/saved and similar endpoints
- Fix: Remove invalid access-log middleware from Traefik config
- The accessLog field is only valid in traefik.yml main config, not as a middleware
- Removed the invalid access-log middleware definition
- This resolves Traefik configuration errors during startup
These changes resolve the console errors:
- GET https://motovaultpro.com/api/vehicles 404
- GET https://motovaultpro.com/api/api/stations/saved 404
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
