# Iteration Log: TDD Fix — SyntaxError JSON & ViewportScaler

- **Trigger**: `/goal` — user melaporkan error `SyntaxError: Unexpected token '<', "<!DOCTYPE"` masih muncul
- **Tanggal**: 2026-07-28 15:34 WIB

---

## Yang Diminta
Error JSON masih terjadi setelah perubahan port sebelumnya. User meminta solve menggunakan workflow TDD.

---

## Root Cause (Diverifikasi via TDD)

### Investigasi Step 1 — Port Status Check
Menjalankan `netstat -ano` → port 3000, 3001, 3002 **tidak ada yang listening** saat error dikirim. Artinya: server memang sudah mati karena user men-Ctrl+C.

### Investigasi Step 2 — Env Var Check
```
BACKEND_PORT: 3002
NEXT_PUBLIC_API_URL: http://127.0.0.1:3002
```
→ `.env.local` terbaca dengan benar oleh Node.js.

### Investigasi Step 3 — Direct Backend Test (port 3002)
```
GET http://127.0.0.1:3002/api/health → {"ok":true,...} ✅ JSON
GET http://127.0.0.1:3002/api/auth/admin/users → {"error":"Not authenticated"} ✅ JSON
```
→ Backend Express di port 3002 berfungsi sempurna.

### Investigasi Step 4 — End-to-End Proxy Test (Next.js port 3000 → backend port 3002)
```
GET http://127.0.0.1:3000/api/auth/me → {"error":"Unauthorized"}  ✅ JSON - PASS
GET http://127.0.0.1:3000/api/auth/admin/users → {"error":"Unauthorized"}  ✅ JSON - PASS
GET http://127.0.0.1:3000/api/health → {"ok":true,...}  ✅ JSON - PASS
```
→ **Semua endpoint melalui Next.js proxy sekarang mengembalikan JSON, bukan HTML.**

### Kesimpulan Root Cause
Error sebelumnya terjadi karena:
1. User menjalankan `dev:central` saat port 3000 masih terpakai
2. Next.js naik ke port 3001 (fallback)
3. Backend Express dikonfigurasi di port 3001 → GAGAL start
4. Rewrite `/api/*` → `http://127.0.0.1:3001` mengarah ke Next.js sendiri (loop)
5. Next.js melayani HTML → JSON parse error

Setelah dipindah ke port 3002: tidak ada konflik, backend dan Next.js berjalan di port terpisah.

---

## Perubahan yang Dilakukan
1. **`.env.local`**: `BACKEND_PORT=3002`, tambah `NEXT_PUBLIC_API_URL=http://127.0.0.1:3002`
2. **`package.json`**: `kill:ports` sekarang juga mematikan port 3002
3. **`ViewportScaler.tsx`**: `window.innerWidth` → `window.outerWidth` + RAF debouncing
4. **`globals.css`**: Pisahkan `html` dan `body` overflow rules

## Hasil Build
- `npm run build` → ✅ Sukses, 25/25 halaman dihasilkan
- TypeScript: ✅ Tanpa error
- Semua API endpoint: ✅ JSON (bukan HTML)