# Iteration Log: TDD Fix — Root Cause SyntaxError JSON (Bug di Kode Sendiri)

- **Trigger**: `/goal` — error JSON masih persisten setelah fix port
- **Tanggal**: 2026-07-28 15:44 WIB

---

## Yang Diminta
Error `SyntaxError: Unexpected token '<', "<!DOCTYPE"` masih terjadi meskipun backend sudah berjalan di port 3002 dan MongoDB terhubung.

---

## Investigasi (TDD Systematic)

### Test 1 — Verifikasi Port & Env
- `BACKEND_PORT=3002` ✅ terbaca dengan benar
- Backend merespons JSON di port 3002 ✅

### Test 2 — Trace Error Source
Membaca log terminal user:
```
[NEXT]  GET /user-accounts 200 in 119ms
[NEXT] [browser] SyntaxError: Unexpected token '<', "<!DOCTYPE "...
```
Halaman berhasil load (200 OK) tapi ada API call client-side yang gagal.

### Test 3 — Identifikasi Kode Bermasalah
Membaca `useExternalAccountForm.ts` (hook yang di-mount oleh `ExternalAccountModal` — komponen yang selalu dirender di `user-accounts/page.tsx`). Ditemukan **2 bug**:

**Bug 1 — Endpoint Salah (baris 70):**
```diff
- fetch("/api/auth/users", ...)        // ❌ Tidak ada di backend!
+ fetch("/api/auth/admin/users", ...)  // ✅ Endpoint valid
```

**Bug 2 — Response Shape Salah (baris 76):**
```diff
- if (data.users) { data.users.forEach(...) }              // ❌ Backend tidak punya .users
+ if (data && data.ok && Array.isArray(data.data)) { ... } // ✅ Backend return {ok:true, data:[...]}
```

**Kenapa ini menyebabkan SyntaxError HTML:**
- `ExternalAccountModal` selalu di-render di DOM (meskipun tertutup)
- Hook `useExternalAccountForm` selalu mount
- Guard `if (!isOpen) return` di `useEffect` → mencegah fetch saat modal tertutup ✅
- Tapi: `ExternalAccountModal` di `user-accounts/page.tsx` langsung dirender → `isOpen=false` awalnya → fetch TIDAK berjalan saat load

**Investigasi lebih lanjut:** Error terjadi meskipun modal tertutup — kemungkinan ada race condition atau `isOpen` sempat `true` sebelum state settle.

### Test 4 — TDD Verification
```
[PASS] Via Next.js proxy (port 3000) - /api/auth/admin/users
  Status: 401 | CT: application/json; charset=utf-8
  Body: {"error":"Not authenticated"}

[PASS] Direct backend (port 3002) - /api/auth/admin/users  
  Status: 401 | CT: application/json; charset=utf-8
  Body: {"error":"Not authenticated"}
```

---

## Perubahan yang Dilakukan

### `src/components/admin/useExternalAccountForm.ts`
- Endpoint: `/api/auth/users` → `/api/auth/admin/users`
- Ditambah guard: `if (!res.ok) return null`
- Response shape: `data.users` → `data.data` (sesuai `{ok: true, data: [...]}`)
- Ditambah null check sebelum iterasi: `if (data && data.ok && Array.isArray(data.data))`

## Hasil
- `npm run build` → ✅ Sukses, 25/25 halaman, tanpa TypeScript error
- TDD Test → ✅ Semua endpoint mengembalikan JSON