Skip to content

CONSOLE_ERROR_FIXES.md

Latest commit

 

History

History
192 lines (143 loc) · 5.21 KB

CONSOLE_ERROR_FIXES.md

File metadata and controls

192 lines (143 loc) · 5.21 KB

Console Error Fixes - Summary

Issues Resolved

This document explains the fixes applied to resolve console errors in Next.js 15.5.5 + React 19.

1. "signal is aborted without reason"

Status: ✅ Fixed

What it was: Development-mode warning from React 19's Strict Mode and hot module reloading aborting fetch requests.

Solution:

  • Console warnings automatically suppressed in development mode
  • Query client configured to not retry on abort errors
  • Utility functions provided for custom fetch handling

2. "Blocked aria-hidden on element" (Next.js Dev Overlay)

Status: ✅ Fixed

What it was: Next.js dev overlay accessibility warning (cosmetic, dev-only).

Solution:

  • Warning suppressed in development mode
  • No impact on production or your application code

Files Changed

New Files Created

  1. lib/utils/suppressDevWarnings.ts

    • Automatically filters known dev-mode warnings
    • Only active in development (NODE_ENV === 'development')
    • Imported in app/providers.tsx

  2. lib/utils/errorHandler.ts

    • Utilities for handling abort errors gracefully
    • Functions: isAbortError(), fetchWithAbortHandler(), createAbortControllerWithTimeout()
    • Ready to use in custom API calls

  3. lib/utils/fetchExample.ts

    • Example implementations showing best practices
    • Includes React hooks and retry logic
    • Reference for handling async operations

  4. lib/utils/DEV_ERROR_HANDLING.md

    • Comprehensive documentation
    • Explains why errors occur and how they're handled

Modified Files

  1. app/providers.tsx

    • Added import: import "@/lib/utils/suppressDevWarnings"
    • Activates console filtering in development

  2. config.ts

    • Updated React Query client with intelligent retry logic
    • Prevents retrying aborted requests
    • Applies to both queries and mutations

How It Works

Console Filtering

// In suppressDevWarnings.ts
console.error = (...args) => {
  const message = args.join(' ');
  if (shouldSuppress(message)) return; // Skip known warnings
  originalError.apply(console, args);
};

Query Client Retry Logic

// In config.ts
retry: (failureCount, error) => {
  if (error instanceof Error && error.name === 'AbortError') {
    return false; // Don't retry abort errors
  }
  return failureCount < 1;
}

Testing the Fix

  1. Start the dev server:

    npm run dev

  2. Check the console:

    • You should see: [Dev Mode] Warning suppression active
    • Abort signal warnings should be gone
    • Aria-hidden warnings should be gone

  3. Verify functionality:

    • App should work normally
    • Authentication flows should be unaffected
    • Video loading should work as expected

Debugging

If you need to see the suppressed warnings:

Option 1: Temporarily disable suppression

// In app/providers.tsx, comment out:
// import "@/lib/utils/suppressDevWarnings";

Option 2: Enable debug logging

// In suppressDevWarnings.ts, uncomment:
console.debug('[Suppressed Error]:', ...args);

Production Behavior

  • ✅ All suppressions only run in development mode
  • ✅ Production builds are unaffected
  • ✅ All errors will log normally in production
  • ✅ Retry logic still handles abort errors intelligently

Best Practices for Your Code

When making custom API calls:

import { fetchWithAbortHandler } from '@/lib/utils/errorHandler';

// With timeout
const controller = createAbortControllerWithTimeout(5000);
const data = await fetchWithAbortHandler('/api/endpoint', {
  signal: controller.signal,
  onAbort: () => console.log('Request cancelled')
});

// In React hooks
useEffect(() => {
  const controller = new AbortController();
  
  fetch('/api/data', { signal: controller.signal })
    .then(handleSuccess)
    .catch(error => {
      if (!isAbortError(error)) {
        // Only handle non-abort errors
        handleError(error);
      }
    });
  
  return () => controller.abort(); // Cleanup
}, []);

Why These Changes Are Safe

  1. Development Only: Suppressions only run in dev mode
  2. Non-Invasive: Doesn't change app logic, just filters console output
  3. Reversible: Easy to disable if needed
  4. Best Practices: Query client improvements follow React Query recommendations
  5. Type-Safe: All TypeScript types are properly defined

Additional Notes

  • The errors were coming from:

    • React 19's new Strict Mode behavior
    • Account Kit's background queries
    • Livepeer SDK requests during HMR
    • Next.js dev overlay implementation

  • None of these affected functionality, just created console noise

  • In production, these warnings don't occur naturally because:

    • No HMR (Hot Module Reloading)
    • No React Strict Mode double-mounting
    • No dev overlay

Questions?

See the detailed documentation in:

  • lib/utils/DEV_ERROR_HANDLING.md - Comprehensive guide
  • lib/utils/fetchExample.ts - Code examples

Summary

🎉 Your console should now be clean in development mode!

The errors were cosmetic development-mode warnings that didn't affect functionality. The fixes:

  • Suppress known dev warnings
  • Handle abort errors intelligently
  • Provide utilities for custom code
  • Don't affect production at all