62 lines
2.4 KiB
Markdown
62 lines
2.4 KiB
Markdown
# 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)
|