75 lines
2.9 KiB
Markdown
75 lines
2.9 KiB
Markdown
|
# 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
|
||
|
|
|