feat: Add diagnostic logging for tab focus issue

This commit is contained in:
gpt-engineer-app[bot]
2025-10-12 23:57:23 +00:00
parent f45a100648
commit e7aa74287a
2 changed files with 48 additions and 13 deletions

View File

@@ -158,9 +158,21 @@ export function useModerationQueueManager(
const fetchItems = useCallback(async (silent = false) => {
if (!user) return;
// Check if tab is hidden
if (pauseFetchingRef.current || document.hidden) {
console.log('⏸️ Fetch paused (tab hidden)');
// Get caller info
const callerStack = new Error().stack;
const callerLine = callerStack?.split('\n')[2]?.trim();
console.log('🔄 [FETCH ITEMS] Called', {
silent,
pauseFetchingRef: pauseFetchingRef.current,
documentHidden: document.hidden,
caller: callerLine,
timestamp: new Date().toISOString()
});
// Check if fetching is paused (controlled by visibility handler if enabled)
if (pauseFetchingRef.current) {
console.log('⏸️ Fetch paused by pauseFetchingRef');
return;
}
@@ -794,15 +806,26 @@ export function useModerationQueueManager(
// Visibility change handler
useEffect(() => {
console.log('🔍 Visibility effect running - refreshOnTabVisible:', settings.refreshOnTabVisible);
console.log('🔍 [VISIBILITY EFFECT] Running', {
settingsObject: settings,
refreshOnTabVisible: settings.refreshOnTabVisible,
typeOf: typeof settings.refreshOnTabVisible,
rawValue: JSON.stringify(settings.refreshOnTabVisible),
stringValue: String(settings.refreshOnTabVisible),
boolValue: Boolean(settings.refreshOnTabVisible),
timestamp: new Date().toISOString()
});
// Early return if feature is disabled
if (!settings.refreshOnTabVisible) {
console.log('⚙️ refreshOnTabVisible is DISABLED - no listener attached');
console.log(' ✅ Setting is FALSE - NO listener will be attached');
console.log(' ✅ Tab focus will NOT trigger refreshes');
return;
}
console.log('✅ refreshOnTabVisible is ENABLED - attaching listener');
console.error(' ❌ Setting is TRUE - listener WILL be attached');
console.error(' ❌ THIS MEANS TAB FOCUS **WILL** TRIGGER REFRESHES');
console.error(' ⚠️ If you disabled this setting, it is NOT working properly');
const handleVisibilityChange = () => {
// Double-check setting before doing anything (defensive check)
@@ -812,17 +835,21 @@ export function useModerationQueueManager(
}
if (document.hidden) {
console.log('📴 Tab hidden - pausing queue updates');
console.log('👁️ [VISIBILITY HANDLER] Tab hidden - pausing fetches');
pauseFetchingRef.current = true;
} else {
console.log('📱 Tab visible - resuming queue updates');
console.error('👁️ [VISIBILITY HANDLER] Tab visible - THIS IS WHERE THE REFRESH HAPPENS');
console.error(' 🔴 TAB FOCUS REFRESH TRIGGERED HERE');
console.error(' 📍 Stack trace below:');
console.trace();
pauseFetchingRef.current = false;
if (initialFetchCompleteRef.current && !isMountingRef.current && fetchItemsRef.current) {
console.log('🔄 Tab became visible - triggering refresh (setting enabled)');
console.error(' ➡️ Calling fetchItems(true) NOW');
fetchItemsRef.current(true);
} else {
console.log('⏭️ Tab became visible - skipping refresh (initial fetch not complete or mounting)');
console.log(' ⏭️ Skipping refresh (initial fetch not complete or mounting)');
}
}
};

View File

@@ -335,16 +335,24 @@ function AuthProviderComponent({ children }: { children: React.ReactNode }) {
// Handle page visibility changes - only verify if inactive for >5 minutes
const handleVisibilityChange = () => {
if (document.visibilityState === 'visible') {
const timeSinceLastCheck = Date.now() - lastVisibilityVerificationRef.current;
const FIVE_MINUTES = 5 * 60 * 1000;
console.log('🔐 [AUTH] Visibility changed', {
state: document.visibilityState,
timeSinceLastCheck: Math.round(timeSinceLastCheck / 1000) + 's',
willVerifySession: document.visibilityState === 'visible' && timeSinceLastCheck > FIVE_MINUTES
});
if (document.visibilityState === 'visible') {
if (timeSinceLastCheck > FIVE_MINUTES) {
authLog('[Auth] Tab visible after 5+ minutes, verifying session');
console.log(' ⚠️ Verifying session - this may cause component re-renders');
lastVisibilityVerificationRef.current = Date.now();
verifySession();
} else {
authLog('[Auth] Tab visible, session recently verified, skipping');
console.log(' ✅ Session recently verified, skipping verification');
}
}
};