# Chunk Load Error Handler

## Problem
ChunkLoadError terjadi ketika aplikasi Next.js mencoba memuat chunk JavaScript yang tidak lagi tersedia, biasanya terjadi karena:
- Deployment baru sementara user masih membuka halaman lama
- File chunk sudah berubah atau dihapus
- Network issues
- Cache issues

Error ini menyebabkan tampilan web bermasalah dan user tidak bisa menggunakan fitur tertentu.

## Solution
Implementasi automatic force refresh yang akan:
1. Mendeteksi ChunkLoadError secara otomatis
2. Melakukan force refresh **hanya sekali** untuk mencegah infinite reload loop
3. Menggunakan `sessionStorage` untuk tracking refresh state

## Implementation

### 1. Component: `chunk-load-error-handler.tsx`
Component client-side yang mendengarkan error events:
- `window.error` - untuk menangkap error reguler
- `window.unhandledrejection` - untuk menangkap promise rejections dari dynamic imports

Component ini akan:
- Mendeteksi berbagai variasi ChunkLoadError
- Check apakah sudah pernah refresh (via sessionStorage)
- Jika belum, lakukan `window.location.reload()` untuk force refresh
- Jika sudah refresh tapi masih error, tidak akan refresh lagi (mencegah infinite loop)

### 2. Integration di Root Layout
Component ditambahkan di root layout (`app/[locale]/layout.tsx`) agar berfungsi di seluruh aplikasi.

## How It Works

```
User opens app → Deployment happens → User navigates → ChunkLoadError occurs
                                                              ↓
                                              Handler detects error
                                                              ↓
                                              Check sessionStorage
                                                              ↓
                                      No refresh yet? → Yes → Set flag & Reload
                                                              ↓
                                      Already refreshed? → Show error in console
```

## Benefits
✅ User experience lebih baik - no more broken page  
✅ Automatic recovery dari ChunkLoadError  
✅ Aman - hanya refresh sekali, tidak ada infinite loop  
✅ Bekerja di background tanpa mengganggu user  
✅ Works untuk semua tipe lazy-loaded components  

## Testing
Untuk test handler ini:
1. Build aplikasi: `npm run build`
2. Start production: `npm run start`
3. Buka aplikasi di browser
4. Build ulang aplikasi (tanpa menutup browser)
5. Navigate ke halaman yang menggunakan dynamic imports
6. Handler akan otomatis refresh jika terjadi ChunkLoadError

## Monitoring
Check browser console untuk melihat log:
- `"ChunkLoadError detected. Refreshing page..."` - saat refresh pertama kali
- `"ChunkLoadError persists after refresh..."` - jika masih error setelah refresh

## Notes
- SessionStorage akan di-clear otomatis setelah 30 detik jika error persists
- Handler tidak render apapun (return null)
- Zero impact pada performance
- Compatible dengan semua browser modern