Enable console debugging and add debug statements

- 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>
This commit is contained in:
Eric Gullickson
2025-11-04 19:24:20 -06:00
parent 0e8d8e7d5e
commit 050f1b030e
4 changed files with 27 additions and 10 deletions

View File

@@ -38,10 +38,11 @@ export const waitForAuthInit = (): Promise<void> => {
};
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);
});
}, []);

View File

@@ -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
});
}

View File

@@ -52,6 +52,8 @@ const TabPanel: React.FC<TabPanelProps> = ({ 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();