From 050f1b030e95730f74701ef45f979ec2a31c123c Mon Sep 17 00:00:00 2001 From: Eric Gullickson <16152721+ericgullickson@users.noreply.github.com> Date: Tue, 4 Nov 2025 19:24:20 -0600 Subject: [PATCH] Enable console debugging and add debug statements MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- frontend/src/core/auth/auth-gate.ts | 12 ++++++++---- .../src/features/stations/hooks/useSavedStations.ts | 13 +++++++++++-- .../src/features/stations/pages/StationsPage.tsx | 6 +++++- frontend/vite.config.ts | 6 +++--- 4 files changed, 27 insertions(+), 10 deletions(-) diff --git a/frontend/src/core/auth/auth-gate.ts b/frontend/src/core/auth/auth-gate.ts index 6b6391b..92bf973 100644 --- a/frontend/src/core/auth/auth-gate.ts +++ b/frontend/src/core/auth/auth-gate.ts @@ -38,10 +38,11 @@ export const waitForAuthInit = (): Promise => { }; export const setAuthInitialized = (initialized: boolean) => { + console.log('[DEBUG] setAuthInitialized called with:', initialized, '(was:', authInitialized, ')'); authInitialized = initialized; if (initialized) { - console.log('[Auth Gate] Authentication fully initialized'); + console.log('[DEBUG Auth Gate] Authentication fully initialized'); // Resolve the auth promise if (resolveAuthInit) { @@ -108,16 +109,19 @@ const processRequestQueue = async () => { * Returns true once auth is fully initialized with token */ export const useIsAuthInitialized = () => { - const [initialized, setInitialized] = useState(authInitialized); + const [initialized, setInitialized] = useState(isAuthInitialized()); useEffect(() => { - if (authInitialized) { + // If already initialized, ensure state reflects that + if (isAuthInitialized()) { setInitialized(true); return; } - // Wait for auth to initialize + // Otherwise wait for initialization + console.log('[useIsAuthInitialized] Waiting for auth...'); waitForAuthInit().then(() => { + console.log('[useIsAuthInitialized] Auth initialized!'); setInitialized(true); }); }, []); diff --git a/frontend/src/features/stations/hooks/useSavedStations.ts b/frontend/src/features/stations/hooks/useSavedStations.ts index 4524273..027093a 100644 --- a/frontend/src/features/stations/hooks/useSavedStations.ts +++ b/frontend/src/features/stations/hooks/useSavedStations.ts @@ -36,13 +36,22 @@ interface UseSavedStationsOptions { export function useSavedStations(options?: UseSavedStationsOptions) { const isAuthInitialized = useIsAuthInitialized(); + console.log('[DEBUG useSavedStations] Hook called, isAuthInitialized:', isAuthInitialized); + return useQuery({ queryKey: SAVED_STATIONS_QUERY_KEY, - queryFn: () => stationsApi.getSavedStations(), + queryFn: async () => { + console.log('[DEBUG useSavedStations] Query function executing'); + const result = await stationsApi.getSavedStations(); + console.log('[DEBUG useSavedStations] Query result:', result); + return result; + }, staleTime: options?.staleTime ?? 5 * 60 * 1000, // 5 minutes default refetchOnWindowFocus: options?.refetchOnWindowFocus ?? true, refetchOnMount: true, - enabled: isAuthInitialized // Only fetch once auth is initialized + enabled: isAuthInitialized, // Only fetch once auth is initialized + retry: 1, + retryDelay: 1000 }); } diff --git a/frontend/src/features/stations/pages/StationsPage.tsx b/frontend/src/features/stations/pages/StationsPage.tsx index 1ba01c3..7d1ce2b 100644 --- a/frontend/src/features/stations/pages/StationsPage.tsx +++ b/frontend/src/features/stations/pages/StationsPage.tsx @@ -52,6 +52,8 @@ const TabPanel: React.FC = ({ children, value, index }) => { * Mobile: Stacks vertically */ export const StationsPage: React.FC = () => { + console.log('[DEBUG StationsPage] Rendering'); + const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down('md')); @@ -64,7 +66,9 @@ export const StationsPage: React.FC = () => { // Queries and mutations const { mutate: search, isPending: isSearching, error: searchError } = useStationsSearch(); - const { data: savedStations = [] } = useSavedStations(); + const { data: savedStations = [], isLoading: isSavedLoading, error: savedError } = useSavedStations(); + console.log('[DEBUG StationsPage] useSavedStations result:', { data: savedStations, isLoading: isSavedLoading, error: savedError }); + const { mutate: saveStation } = useSaveStation(); const { mutate: deleteStation } = useDeleteStation(); diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index 632dc29..9200211 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -57,9 +57,9 @@ export default defineConfig({ minify: 'terser', terserOptions: { compress: { - drop_console: true, // Remove console logs in production + drop_console: false, // DEBUGGING: Keep console logs enabled drop_debugger: true, - pure_funcs: ['console.log', 'console.info', 'console.debug'], + // pure_funcs: ['console.log', 'console.info', 'console.debug'], // DEBUGGING: Disabled for console output }, mangle: { safari10: true, // Ensure Safari 10 compatibility @@ -71,6 +71,6 @@ export default defineConfig({ }, // Production optimizations esbuild: { - drop: ['console', 'debugger'], // Additional cleanup + drop: ['debugger'], // DEBUGGING: Keep console, only drop debugger }, }); \ No newline at end of file