# 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