Deep-Package-Inspection/docs/log/2026-07-28-1527-goal.md

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