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):

- fetch("/api/auth/users", ...)        // ❌ Tidak ada di backend!
+ fetch("/api/auth/admin/users", ...)  // ✅ Endpoint valid

Bug 2 — Response Shape Salah (baris 76):

- 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

2.7 KiB Raw Blame History