web-antrean/docs/EVLOG.md

🚨 EVLOG — Event & Error Log

Project: Web Antrean — Sistem Manajemen Antrean Rawat Jalan RSSA Author: Akbar Stack: JavaScript · Vue 3 · TypeScript · Nuxt 3 · Vuetify 3 · Pinia

---

🧠 AI Prompt — Cara Menggunakan Dokumen Ini

Salin prompt berikut ke Claude untuk menganalisis dan mendokumentasikan error:

Kamu adalah senior engineer Nuxt 3 + TypeScript. Aku menemukan error berikut:

Error message: [paste error]
Stack trace: [paste stack trace]
Context: [dimana terjadi, langkah reproduksi]
Tech: Nuxt 3, Vue 3, TypeScript, Vuetify 3, Pinia, WebSocket, Keycloak

Bantu aku:
1. Analisis root cause error ini
2. Berikan solusi step-by-step
3. Sarankan cara mencegah error serupa
4. Format hasilnya untuk EVLOG dalam Markdown

---

Severity Legend

Level	Icon	Deskripsi	SLA
Critical	🔴	App down / data loss / security	< 4 jam
High	🟠	Fitur utama break	< 1 hari
Medium	🟡	Fitur minor terganggu	< 3 hari
Low	🟢	UI/kosmetik	Backlog

---

Format Entry

### [EV-XXX] — [Judul Singkat Error/Event]

| Field | Value |
|-------|-------|
| **ID** | EV-XXX |
| **Tanggal** | YYYY-MM-DD |
| **Severity** | 🔴 Critical / 🟠 High / 🟡 Medium / 🟢 Low |
| **Environment** | Development / Staging / Production |
| **Status** | 🔍 Investigating / 🔧 In Fix / ✅ Resolved / ⏭ Wontfix |
| **Reporter** | Akbar |

**Error Message:**
> [paste error message]

**Langkah Reproduksi:**
1. ...

**Root Cause:**
> ...

**Solusi / Fix:**
> ...

**Prevention:**
> ...

**Related:** [commit / file]

---

Event Log

---

[EV-012] — Info Klinik Ruang Tidak Muncul di Layar Display

Field	Value
ID	EV-012
Tanggal	2026-05-21
Severity	🟠 High
Environment	Development
Status	✅ Resolved
Reporter	Akbar

Error Message:

Layar informasi klinik ruang menampilkan data kosong — tidak ada info klinik ruang yang muncul.

Langkah Reproduksi:

1. Buka halaman display screen klinik ruang
2. Data klinik ruang seharusnya muncul
3. Layar kosong — tidak ada informasi tampil

Root Cause:

Data binding untuk info klinik ruang tidak ter-update setelah fetch dari API. Kemungkinan reactive state tidak di-watch dengan benar sehingga UI tidak re-render saat data berubah.

Solusi / Fix:

Perbaikan data binding dan reactive state untuk informasi klinik ruang pada layar display.

Related: Commit ec9dac0 — "push perbaikan layar informasi info klinik ruang tidak muncul"

---

[EV-011] — Data Antrean Tidak Sinkron Antar Display Screen

Field	Value
ID	EV-011
Tanggal	2026-05-22
Severity	🔴 Critical
Environment	Development
Status	✅ Resolved
Reporter	Akbar

Error Message:

Display screen di lokasi berbeda menampilkan nomor panggil yang berbeda. Admin memanggil pasien tapi layar display tidak update, atau update terlambat > 10 detik.

Langkah Reproduksi:

1. Buka admin loket di PC A
2. Buka display screen di TV/monitor B
3. Panggil pasien berikutnya di PC A
4. Display di monitor B tidak menampilkan nomor panggil terbaru

Root Cause:

WebSocket client ID menggunakan random ID, sehingga server tidak bisa menargetkan pesan ke device tertentu secara reliable. Saat koneksi putus lalu reconnect, client ID berubah dan device kehilangan subscription.

Solusi / Fix:

// ❌ Before — random client ID
const clientId = `client_${Math.random().toString(36).substr(2, 9)}`

// ✅ After — deterministic client ID berdasarkan page + device
const clientId = `${pageType}_${loketId || 'global'}_${deviceFingerprint}`

Ditambahkan juga polling fallback setiap 30 detik sebagai safety net.

Prevention:

Selalu gunakan deterministic identifier untuk WebSocket client. Implementasi polling fallback untuk semua halaman yang bergantung pada real-time data.

Related: Conversation 6fe234cf — "Stabilizing WebSocket Queue Synchronization"

---

[EV-010] — Cross-Loket Interference pada Patient Processing

Field	Value
ID	EV-010
Tanggal	2026-05-21
Severity	🔴 Critical
Environment	Development
Status	✅ Resolved
Reporter	Akbar

Error Message:

Loket A memproses pasien yang seharusnya milik Loket B. currentProcessingPatient menampilkan pasien dari loket yang salah.

Langkah Reproduksi:

1. Login sebagai admin loket A di browser tab 1
2. Login sebagai admin loket B di browser tab 2
3. Panggil pasien di loket A
4. Loket B menampilkan pasien yang sama sebagai "sedang diproses"

Root Cause:

currentProcessingPatient menggunakan key persisted state yang sama untuk semua loket. Karena pinia-plugin-persistedstate menyimpan ke localStorage dengan key yang sama, operasi di satu loket menimpa state loket lain.

Solusi / Fix:

// ❌ Before — shared key
persist: { key: 'currentProcessingPatient' }

// ✅ After — unique key per loket
persist: { key: `currentPatient_loket_${loketId}` }

Ditambahkan juga strict filter di processNextQueue dan callNext berdasarkan loketId, serta guard check di WebSocket event handler.

Prevention:

Setiap state yang bersifat per-instance (per loket, per klinik) HARUS menggunakan unique key. Jangan pernah share persisted state key antar instance.

Related: Conversation 7a37e693 — "Isolating Loket Queue Operations"

---

[EV-009] — Bug Tampilan Loket

Field	Value
ID	EV-009
Tanggal	2026-05-20
Severity	🟡 Medium
Environment	Development
Status	✅ Resolved
Reporter	Akbar

Error Message:

Layout admin loket tidak render dengan benar — elemen UI tumpang tindih atau alignment salah.

Langkah Reproduksi:

1. Login sebagai admin loket
2. Buka halaman /admin-loket
3. Layout tampilan loket tidak sesuai desain

Root Cause:

CSS layout issue dan data binding yang tidak sinkron dengan state loket.

Solusi / Fix:

Perbaikan layout dan data binding di halaman admin loket.

Related: Commit f622052 — "perbaikan bug tampilan loket"

---

[EV-008] — Memory Leak & Request Spam dari doctorStore

Field	Value
ID	EV-008
Tanggal	2026-05-18
Severity	🟠 High
Environment	Development
Status	✅ Resolved
Reporter	Akbar

Error Message:

Internal Server Error (500) — /klinik-api/doctors/...

Error terjadi berulang-ulang tanpa henti, menyebabkan request spam ke backend.

Langkah Reproduksi:

1. Buka halaman yang memuat doctorStore.js
2. Backend endpoint /doctors return 500
3. Store terus retry tanpa batas
4. Network tab penuh dengan request gagal, memory usage naik terus

Root Cause:

doctorStore.js tidak memiliki mekanisme backoff atau blacklist untuk endpoint yang gagal. Setiap kali fetch gagal, store langsung retry tanpa delay, menyebabkan infinite loop request ke server.

Solusi / Fix:

// ✅ Implementasi blacklist endpoint gagal
const blacklistedEndpoints = new Set()

async function fetchDoctors(endpoint) {
  if (blacklistedEndpoints.has(endpoint)) {
    return [] // skip, sudah di-blacklist
  }
  try {
    return await $fetch(endpoint)
  } catch (error) {
    if (error.status === 500) {
      blacklistedEndpoints.add(endpoint)
      console.warn(`Endpoint blacklisted: ${endpoint}`)
    }
    return []
  }
}

Prevention:

Semua API fetch HARUS memiliki: (1) error handling, (2) retry limit atau backoff, (3) blacklist mechanism untuk persistent failures. Jangan pernah retry tanpa batas.

Related: Conversation c7502197 — "Optimizing Web Antrean Memory Usage", commit cb3310b

---

[EV-007] — Console.log Verbose Memperlambat Performa

Field	Value
ID	EV-007
Tanggal	2026-05-18
Severity	🟢 Low
Environment	Development
Status	✅ Resolved
Reporter	Akbar

Error Message:

Tidak ada error message, tapi browser DevTools penuh dengan log output, menyebabkan performa menurun terutama di device yang lebih lambat.

Langkah Reproduksi:

1. Buka halaman yang menggunakan WebSocket atau QR scanner
2. Buka browser DevTools → Console
3. Log membanjir setiap detik dari useWebSocket.ts dan QR scanner di checkIn.vue

Root Cause:

console.log debugging statements di high-frequency code paths (WebSocket message handler yang dipanggil per-detik, QR scanner frame processing) tidak dihapus setelah debugging selesai.

Solusi / Fix:

Cleanup semua console.log di:

• composables/useWebSocket.ts — WebSocket message handler
• pages/CheckInPasien/checkIn.vue — QR scanner frame processing Hanya sisakan console.warn dan console.error untuk kondisi yang benar-benar perlu.

Prevention:

Gunakan convention: console.log hanya untuk debugging sementara, console.warn/console.error untuk production logging. Tambahkan lint rule atau pre-commit hook untuk mendeteksi console.log yang tersisa.

Related: Conversation c7502197 — "Optimizing Web Antrean Memory Usage"

---

[EV-006] — Header Origin/Referer Tidak Konsisten di Proxy Routes

Field	Value
ID	EV-006
Tanggal	2026-05-22
Severity	🟡 Medium
Environment	Development
Status	✅ Resolved
Reporter	Akbar

Error Message:

CORS error atau origin validation failure saat memanggil backend API melalui proxy routes. Beberapa request berhasil, beberapa gagal secara intermittent.

Langkah Reproduksi:

1. Panggil API via proxy route stats-api, visit-api, atau klinik-api
2. Beberapa request gagal dengan CORS error
3. Request yang sama kadang berhasil, kadang gagal

Root Cause:

Setiap proxy route handler (server/routes/stats-api/, visit-api/, klinik-api/) menggunakan header origin dan referer yang berbeda-beda. Backend melakukan validasi origin, dan header yang tidak konsisten menyebabkan intermittent failure.

Solusi / Fix:

Standardisasi semua proxy route handler agar menggunakan origin dan referer yang sama:

// ✅ Semua proxy routes menggunakan header yang sama
headers: {
  'Origin': 'http://10.10.150.175:3000',
  'Referer': 'http://10.10.150.175:3000',
}

Prevention:

Buat shared utility function untuk proxy header configuration agar semua route handler menggunakan config yang sama. Hindari copy-paste header config per file.

Related: Conversation 97867794 — "Standardizing Header Configurations Across APIs"

---

[EV-005] — Duplikasi Tiket di Admin Klinik Loket

Field	Value
ID	EV-005
Tanggal	2026-02-11
Severity	🟠 High
Environment	Development
Status	✅ Resolved
Reporter	Akbar

Error Message:

Daftar pasien di admin klinik menampilkan tiket yang sama dua kali. Setelah check-in, tiket pasien menghilang dari daftar.

Langkah Reproduksi:

1. Pasien ambil antrean di anjungan
2. Buka admin klinik loket
3. Pasien yang sama muncul 2x di daftar
4. Setelah check-in, tiket menghilang dari daftar

Root Cause:

WebSocket event handler menambahkan pasien ke allPatients tanpa deduplication check. Saat event masuk bersamaan dari multiple sources (initial load + WebSocket), data terduplikasi. Saat check-in, state update menghapus entry yang salah.

Solusi / Fix:

// ✅ Deduplication check sebelum add ke allPatients
function addPatient(patient) {
  const exists = allPatients.value.find(p => p.nomorAntrean === patient.nomorAntrean)
  if (!exists) {
    allPatients.value.push(patient)
  } else {
    // Update existing instead of duplicate
    Object.assign(exists, patient)
  }
}

Prevention:

Semua operasi mutasi pada allPatients harus melalui function yang melakukan deduplication check. Jangan pernah langsung push tanpa cek duplikat.

Related: Commit c02905e — "fix duplication and ticket disappear in adminklinik loket"

---

[EV-004] — WebSocket Check-in Tidak Trigger UI Update

Field	Value
ID	EV-004
Tanggal	2026-02-10
Severity	🟠 High
Environment	Development
Status	✅ Resolved
Reporter	Akbar

Error Message:

Pasien check-in via QR berhasil (API return success), tapi status di admin loket tidak berubah. UI tetap menampilkan pasien sebagai "belum hadir".

Langkah Reproduksi:

1. Pasien scan QR di halaman check-in
2. API return success — pasien tercatat hadir
3. Buka admin loket — status pasien masih "belum hadir"
4. Perlu manual refresh untuk melihat update

Root Cause:

WebSocket event listener untuk check-in event tidak ter-bind dengan benar. Event checkin_success diterima oleh WebSocket, tapi handler tidak melakukan state update ke Pinia store.

Solusi / Fix:

Fix event listener binding di useWebSocket.ts — pastikan checkin_success event memicu update pada queueStore.allPatients.

Prevention:

Setiap WebSocket event type harus memiliki dedicated handler yang ter-test. Buat mapping event → handler yang eksplisit.

Related: Commits e686dda, b6dc252 — "fix socket checkin", "update bug ws checkin loket"

---

[EV-003] — HTTPS Implementation Gagal di Check-in

Field	Value
ID	EV-003
Tanggal	2026-02-02
Severity	🟡 Medium
Environment	Development
Status	✅ Resolved
Reporter	Akbar

Error Message:

Check-in via QR tidak berfungsi saat HTTPS aktif. Kamera QR scanner tidak bisa diakses.

Langkah Reproduksi:

1. Aktifkan HTTPS di dev server
2. Buka halaman check-in
3. QR scanner gagal — kamera tidak muncul

Root Cause:

Browser memerlukan HTTPS untuk akses kamera (MediaDevices API), tapi mixed content policy memblokir request ke backend HTTP. Konfigurasi HTTPS tidak lengkap — SSL certificate self-signed tidak dipercaya browser.

Solusi / Fix:

Fix implementasi HTTPS menggunakan @vitejs/plugin-basic-ssl di nuxt.config.ts. Konfigurasi dev server untuk HTTPS dengan self-signed cert yang di-trust browser.

Prevention:

Saat menggunakan Web API yang memerlukan secure context (kamera, geolocation), pastikan HTTPS sudah configured end-to-end termasuk backend.

Related: Commit c899a71 — "fix https implementation and checkin"

---

[EV-002] — Loop & Duplikasi Data di Fetch API

Field	Value
ID	EV-002
Tanggal	2026-01-29
Severity	🟠 High
Environment	Development
Status	✅ Resolved
Reporter	Akbar

Error Message:

Data pasien terduplikasi di daftar antrean. Fetch API dipanggil berulang-ulang dalam loop.

Langkah Reproduksi:

1. Buka halaman yang memuat data antrean
2. Data pasien muncul berkali-kali
3. Network tab menunjukkan API dipanggil berulang-ulang

Root Cause:

watch atau computed yang bergantung pada reactive state memicu re-fetch setiap kali state berubah, dan hasil fetch mengubah state lagi — menyebabkan infinite loop.

Solusi / Fix:

Fix logic watch/computed agar tidak circular. Tambahkan guard condition untuk mencegah re-fetch saat data sudah di-load.

Prevention:

Hindari circular dependency antara watcher dan state mutation. Gunakan flag isLoading untuk mencegah concurrent fetch.

Related: Commit 0bd5311 — "fix loop dan duplicate data"

---

[EV-001] — Session & Tampilan Screen Tidak Sinkron

Field	Value
ID	EV-001
Tanggal	2026-01-30
Severity	🟡 Medium
Environment	Development
Status	✅ Resolved
Reporter	Akbar

Error Message:

Display screen menampilkan data lama setelah session expire. Setelah re-login, data tidak refresh otomatis.

Langkah Reproduksi:

1. Login dan buka display screen
2. Tunggu session expire (1 jam)
3. Re-login
4. Display masih menampilkan data dari session sebelumnya

Root Cause:

Pinia persisted state menyimpan data lama di localStorage. Saat session expire dan user re-login, store tidak di-reset — data lama masih tampil.

Solusi / Fix:

Reset persisted state saat login baru. Pastikan display screen melakukan fresh fetch setelah session recovery.

Prevention:

Implementasi session lifecycle hooks: on session expire → clear stale state, on re-login → fresh fetch semua data.

Related: Commit 8dd94ed — "update fix session dan tampilan screen"

---

📊 Error Statistics

Bulan	Critical	High	Medium	Low	Total
Jan 2026	0	1	1	0	2
Feb 2026	0	3	1	0	4
Mar 2026	0	0	0	0	0
Apr 2026	0	0	0	0	0
Mei 2026	2	2	1	1	6
Total	2	6	3	1	12

---

🔁 Recurring Issues

Daftar error yang muncul lebih dari sekali — kandidat untuk refactor/improvement permanen.

Error Pattern	Frekuensi	Action
WebSocket disconnect → data tidak sinkron	3x (EV-004, EV-011, EV-012)	✅ Implemented: polling fallback 30 detik + auto-reconnect + deterministic client ID
Duplikasi data pasien di daftar	2x (EV-002, EV-005)	✅ Implemented: deduplication check di allPatients mutation
Session/state stale setelah reconnect	2x (EV-001, EV-011)	✅ Implemented: fresh fetch on reconnect + state reset on re-login
Request spam ke endpoint yang gagal	1x (EV-008)	✅ Implemented: blacklist + retry limit. Monitor untuk recurring
Cross-instance state conflict (loket)	1x (EV-010)	✅ Implemented: unique persisted state key per instance. Audit untuk klinik/penunjang