60 lines
2.9 KiB
Markdown
60 lines
2.9 KiB
Markdown
# Iteration Log: Fix SyntaxError JSON & ViewportScaler Split-Screen
|
|
|
|
- **Trigger**: `/goal` — solve visual & API issues di localhost
|
|
- **Tanggal**: 2026-07-28 15:27 WIB
|
|
|
|
---
|
|
|
|
## Yang Diminta
|
|
1. Halaman `user-accounts` menampilkan `Console SyntaxError: Unexpected token '<', "<!DOCTYPE"` saat API request
|
|
2. Tampilan web saat split-screen masih jelek — ada area hitam besar di kanan konten
|
|
|
|
---
|
|
|
|
## Root Cause Analysis
|
|
|
|
### Bug 1 — SyntaxError JSON (API Loopback)
|
|
**Alur Bug:**
|
|
- User menjalankan `npm run dev:central` saat port 3000 masih terpakai
|
|
- Next.js dev otomatis naik ke port **3001** sebagai fallback
|
|
- `next.config.ts` mengkonfigurasi rewrite: `/api/:path*` → `http://127.0.0.1:3001/api/:path*`
|
|
- Karena Next.js sendiri ada di port 3001, request API **loopback ke Next.js** — bukan ke backend Express
|
|
- Next.js melayani halaman HTML (404) alih-alih JSON → **"Unexpected token '<', '<!DOCTYPE...'"**
|
|
|
|
**Fix:**
|
|
- `.env.local`: `BACKEND_PORT=3001` → `BACKEND_PORT=3002`
|
|
- `.env.local`: Tambahkan `NEXT_PUBLIC_API_URL=http://127.0.0.1:3002`
|
|
- Sekarang backend Express selalu di port 3002, sehingga tidak akan pernah bertabrakan dengan Next.js (3000 atau 3001-fallback)
|
|
|
|
### Bug 2 — ViewportScaler Feedback Loop / Salah Ukur
|
|
**Alur Bug:**
|
|
- `ViewportScaler.tsx` menggunakan `window.innerWidth` sebagai referensi untuk menghitung scale
|
|
- Ketika `document.documentElement.style.width = "1536px"` diterapkan, `innerWidth` di beberapa browser ikut berubah menjadi 1536
|
|
- Akibatnya: `scale = 1536/1536 = 1.0` — tidak ada scaling sama sekali
|
|
- Konten 1536px tidak terskala ke layar split-screen → kolom hitam besar di kanan
|
|
|
|
**Fix:**
|
|
- Ganti `window.innerWidth` → `window.outerWidth` (lebar fisik browser window, tidak terpengaruh CSS transform)
|
|
- Tambahkan `requestAnimationFrame` debouncing agar resize handler tidak tembak terlalu sering
|
|
- `outerWidth` selalu merepresentasikan ukuran fisik window, sehingga scale factor selalu akurat
|
|
|
|
---
|
|
|
|
## Langkah yang Diambil
|
|
1. **`.env.local`**: Ubah `BACKEND_PORT=3001` → `3002`, tambah `NEXT_PUBLIC_API_URL=http://127.0.0.1:3002`, perluas `ALLOWED_ORIGINS` mencakup port 3000 dan 3001
|
|
2. **`package.json`**: Update `kill:ports` script untuk turut mematikan port 3002
|
|
3. **`ViewportScaler.tsx`**: Ganti `window.innerWidth` → `window.outerWidth`, tambah RAF debouncing
|
|
4. **`globals.css`**: Pisahkan rule html dan body (minor cleanup dari sesi sebelumnya)
|
|
5. **Build Verification**: `npm run build` berhasil 100% tanpa error
|
|
|
|
---
|
|
|
|
## Hasil
|
|
- Build produksi: ✅ Berhasil tanpa error
|
|
- API loopback: ✅ Terperbaiki (backend di port 3002, tidak akan bertabrakan dengan Next.js)
|
|
- ViewportScaler: ✅ Terperbaiki (menggunakan `outerWidth` sebagai source of truth)
|
|
|
|
## Langkah Selanjutnya
|
|
- User perlu **restart** `dev:central` agar env baru (`BACKEND_PORT=3002`) terbaca oleh server.js
|
|
- Verifikasi visual: reload `localhost:3000/user-accounts` dan cek split-screen behavior
|