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:

User menjalankan dev:central saat port 3000 masih terpakai
Next.js naik ke port 3001 (fallback)
Backend Express dikonfigurasi di port 3001 → GAGAL start
Rewrite /api/* → http://127.0.0.1:3001 mengarah ke Next.js sendiri (loop)
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

.env.local: BACKEND_PORT=3002, tambah NEXT_PUBLIC_API_URL=http://127.0.0.1:3002
package.json: kill:ports sekarang juga mematikan port 3002
ViewportScaler.tsx: window.innerWidth → window.outerWidth + RAF debouncing
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)

2.4 KiB Raw Blame History