Kendala dalam Integrasi - Perwira Learning Center

Kendala Umum dalam Integrasi Frontend dan Backend

Integrasi antara frontend dan backend sering kali menghadapi berbagai kendala, terutama ketika kedua sistem belum sepenuhnya “sinkron” dalam cara berkomunikasi. Berikut beberapa masalah umum beserta penjelasan, cara deteksi, dan solusinya.

Error CORS (Cross-Origin Resource Sharing)

Deskripsi
CORS adalah mekanisme keamanan pada browser yang membatasi request dari origin (domain, protokol, atau port) yang berbeda. Biasanya error ditandai dengan pesan seperti:
Access to XMLHttpRequest at '...' from origin '...' has been blocked by CORS policy.

Analogi
Seperti barista yang hanya melayani pelanggan lokal. Ketika ada orang dari luar area, ia tidak akan dilayani kecuali ada aturan yang memperbolehkannya.

Cara Deteksi

• Periksa tab Console di DevTools untuk melihat pesan error CORS.
• Buka tab Network, lalu cek request yang gagal dan lihat bagian Response Headers.
• Uji menggunakan Postman. Jika berhasil di Postman tetapi gagal di browser, hampir pasti masalahnya adalah CORS.

Solusi

• Tambahkan header pada backend:

  Access-Control-Allow-Origin: https://frontend.example.com
  Access-Control-Allow-Methods: GET, POST, PUT, DELETE
  Access-Control-Allow-Headers: Content-Type, Authorization
  

• Pastikan backend merespons preflight request (OPTIONS) dengan status 2xx.
• Gunakan middleware CORS sesuai framework (misalnya cors di Node.js).
• Hindari penggunaan wildcard * jika menggunakan credentials.

Data Tidak Sesuai Schema

Deskripsi
Terjadi ketika data yang dikirim atau diterima tidak sesuai dengan struktur yang diharapkan backend. Hal ini dapat menyebabkan error seperti 400 Bad Request atau 422 Unprocessable Entity.

Analogi
Seperti memesan minuman dengan bahasa yang tidak dimengerti oleh pelayan. Permintaan tidak bisa diproses karena formatnya salah.

Cara Deteksi

• Cek Request Payload dan Response di DevTools Network.
• Periksa pesan error validasi dari backend.
• Uji payload melalui Postman sesuai dokumentasi API.
• Lihat log backend untuk detail kesalahan.

Solusi

• Gunakan kontrak API yang jelas (OpenAPI/Swagger).
• Terapkan validasi di backend (Joi, Zod, Yup, dll.).
• Validasi data di frontend sebelum dikirim.
• Gunakan TypeScript untuk menjaga konsistensi tipe data.
• Tampilkan pesan error validasi secara ramah ke pengguna.

Error Autentikasi / Token

Deskripsi
Error terjadi karena token tidak dikirim, sudah kedaluwarsa, atau formatnya tidak sesuai. Biasanya menghasilkan status 401 Unauthorized atau 403 Forbidden.

Analogi
Seperti mencoba masuk ke area khusus tanpa kartu akses yang valid.

Cara Deteksi

• Periksa status code di DevTools Network (401/403).
• Cek header Authorization, apakah sudah menggunakan format Bearer <token>.
• Uji token melalui Postman.
• Periksa log backend untuk detail penyebab error.

Solusi

• Kirim token melalui header:

  Authorization: Bearer <token>
  

• Gunakan mekanisme refresh token.
• Pastikan waktu server dan klien sinkron.
• Simpan token dengan aman (misalnya httpOnly cookie).
• Backend sebaiknya memberikan pesan error yang jelas.

API Tidak Merespons (Timeout / Server Down)

Deskripsi
Permintaan tidak mendapatkan respons karena server mati, overload, atau terjadi kesalahan jaringan. Biasanya muncul error seperti:

• ERR_CONNECTION_REFUSED
• ERR_TIMED_OUT
• Status 502 / 503

Analogi
Seperti restoran yang tutup atau tidak ada pelayan yang merespons.

Cara Deteksi

• Periksa tab Network (request gagal atau status 5xx).
• Uji endpoint menggunakan curl atau Postman.
• Cek log server (crash, memory, koneksi).
• Pastikan URL dan port benar.

Solusi

• Pastikan backend berjalan di port yang sesuai.
• Gunakan endpoint health check seperti /health.
• Terapkan timeout dan retry di frontend.
• Gunakan monitoring tools (PM2, Docker healthcheck, dll.).
• Periksa konfigurasi proxy (Nginx/Apache).

Debugging Dasar

Saat menghadapi masalah integrasi, lakukan langkah berikut secara sistematis:

• Isolasi Masalah
  Uji API tanpa frontend menggunakan Postman.
• Baca Pesan Error
  Perhatikan detail response dan log, bukan hanya status code.
• Periksa Environment
  Pastikan URL API dan environment variable sudah benar.
• Tambahkan Logging
  Gunakan console.log di frontend dan logging di backend.
• Gunakan Versi Minimal
  Mulai dari request sederhana, lalu tingkatkan kompleksitas secara bertahap.

Best Practice Integrasi

Agar integrasi berjalan lebih stabil dan minim error, terapkan praktik berikut:

• Kontrak API yang Jelas
  Gunakan OpenAPI/Swagger atau dokumentasi yang lengkap.
• Validasi di Kedua Sisi
  Backend dan frontend sama-sama melakukan validasi.

• Standarisasi Format Respons
  Contoh:

  {
    "success": true,
    "data": {},
    "message": "Berhasil"
  }
  

• Error Handling Informatif
  Backend memberikan pesan jelas, frontend menampilkan dengan ramah.
• Logging dan Monitoring
  Pantau performa dan error secara berkala.
• Konfigurasi CORS yang Aman
  Gunakan whitelist origin, hindari wildcard di production.
• Lingkungan Uji yang Konsisten
  Gunakan staging server yang menyerupai production.