74 lines
2.7 KiB
Markdown
74 lines
2.7 KiB
Markdown
# 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
|