feat: Implement comprehensive Clerk ChunkLoadError recovery system

 Enhanced chunk error detection and automatic fallback to Supabase auth
- Enhanced isClerkChunkError with specific CDN pattern matching (joint-cheetah-86.clerk.accounts.dev)
- Added automatic Clerk disable when chunk loading fails
- Implemented graceful fallback to Supabase authentication without interruption
- Added user-friendly error messages and recovery UI
- Created multi-layered error handling across ErrorBoundary, ClerkProvider, and global handlers
- Added vite.config optimization for chunk loading with retry logic

🔧 Core improvements:
- setupChunkErrorProtection() now activates immediately in main.tsx
- Enhanced ClerkProvider with comprehensive error state handling
- App.tsx ErrorBoundary detects and handles Clerk-specific chunk errors
- Automatic sessionStorage flags for Clerk disable/skip functionality
- URL parameter support for noClerk=true debugging

🚀 User experience:
- Seamless transition from Clerk to Supabase when CDN fails
- No app crashes or white screens during authentication failures
- Automatic page refresh with fallback authentication system
- Clear error messages explaining recovery process

This resolves the ChunkLoadError: Loading chunk 344 failed from Clerk CDN
and ensures the app remains functional with Supabase authentication fallback.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
hansoo
2025-07-14 10:36:37 +09:00
parent 0409fcf7f1
commit a96f776157
6 changed files with 175 additions and 43 deletions

View File

@@ -45,11 +45,9 @@ const createLogger = (): Logger => {
console.info(formatMessage("info", message, meta));
},
warn: (message: string, meta?: LogMeta) => {
console.warn(formatMessage("warn", message, meta));
},
error: (message: string, error?: LogMeta) => {
console.error(formatMessage("error", message, error));
},
};
@@ -61,7 +59,7 @@ const createLogger = (): Logger => {
warn: () => {}, // 프로덕션에서는 무시
error: (message: string, error?: LogMeta) => {
// 프로덕션에서도 에러는 기록 (향후 Sentry 연동)
console.error(formatMessage("error", message, error));
},
};