Laporan Masalah dengan Tangkapan Layar
Tombol 'Laporkan masalah' di setiap halaman yang mengirim deskripsi, tangkapan layar, dan konteks teknis otomatis ke antrean admin.
- Status
- Sudah berjalan
- Lapisan
- FrontendBackend
- Dipakai oleh
- Pengguna situs yang menemukan masalah, dan admin yang menindaklanjuti laporan mereka.
Masalahnya
Laporan bug dari pengguna biasanya datang lewat chat tanpa detail, sehingga sulit diulang dan diperbaiki.
Solusinya
Form laporan otomatis menyertakan halaman, perangkat, versi aplikasi, dan kode korelasi galat terakhir. Tangkapan layar diunggah langsung ke penyimpanan privat, dan admin mengelola status serta prioritas di satu dashboard.
Cara kerjanya
Apa yang terjadi, langkah demi langkah, dari sudut pandang pengguna.
- 01
Pengguna menekan 'Laporkan masalah'
Tombolnya ada di setiap halaman. Pengguna memilih kategori lalu menulis apa yang terjadi.
- 02
Tangkapan layar bisa dilampirkan
Bila perlu, pengguna menambahkan gambar layar. Gambar dikirim langsung ke penyimpanan privat, bukan lewat chat.
- 03
Detail teknis terisi sendiri
Halaman, perangkat, ukuran layar, versi aplikasi, dan kode galat terakhir ikut terkirim. Pengguna tidak perlu menjelaskannya.
- 04
Kiriman spam disaring
Server membatasi jumlah kiriman, memasang jebakan bot, dan memakai Cloudflare Turnstile. Laporan yang lolos disimpan di database.
- 05
Admin diberi tahu dan memilah
Admin mendapat pemberitahuan lewat Telegram atau email, lalu mengatur status dan prioritas laporan di dashboard.
- 06
Pelapor dikabari saat selesai
Saat laporan ditandai selesai atau tidak akan diperbaiki, pelapor menerima email. Pengguna yang login juga bisa melihat status laporannya.
Desain sistemnya
Siapa yang memakai, apa yang mereka lihat, apa yang bekerja di belakang layar, dan di mana data disimpan. Baca dari kiri ke kanan.
1Pengguna
- Pengguna situsMelaporkan masalah dari halaman mana pun
- AdminMemilah, memberi prioritas, dan menutup laporan
2Yang dilihat
- Form laporanMuncul dari tombol di setiap halaman, detail teknis terisi sendiri
- Riwayat laporan sayaPengguna yang login melihat status laporannya sendiri
- Dashboard laporanAntrean laporan lengkap dengan status, prioritas, dan tangkapan layar
3Yang bekerja di belakang
- Server APIFastAPI memeriksa spam, menyimpan laporan, dan mengirim pemberitahuan
- Cloudflare TurnstileMemastikan pengirimnya manusia, bukan bot
4Tempat data dan layanan luar
- DatabasePostgreSQL menyimpan isi laporan, status, dan prioritas
- Penyimpanan gambarSupabase Storage menyimpan tangkapan layar di folder privat
- Telegram dan emailMengabari admin saat ada laporan baru dan pelapor saat selesai
Fitur utama
- Tombol lapor di setiap halaman
- Unggah tangkapan layar langsung
- Konteks teknis terisi otomatis
- Proteksi spam dan Turnstile
- Status dan prioritas laporan
Dibangun dengan
- Next.js
- FastAPI
- PostgreSQL
- Supabase Storage
- Cloudflare Turnstile
Yang didapat bisnis
- Laporan masalah datang lengkap, bukan sekadar "situsnya error".
- Laporan bisa langsung dicocokkan dengan galat di server lewat kode korelasi.
- Tidak ada keluhan yang tercecer di chat; semuanya masuk satu antrean.
- Pelapor tahu laporannya ditanggapi sampai selesai.
Istilah di halaman ini
- Kode korelasi (correlation ID)
- Nomor unik yang menempel di setiap permintaan ke server, sehingga laporan dan galat yang sama bisa dipertemukan.
- Cloudflare Turnstile
- Pemeriksaan singkat dari Cloudflare untuk membedakan manusia dan bot tanpa teka-teki gambar yang merepotkan.
- API
- Pintu layanan di server yang menerima data dari halaman web dan menjalankan aturan bisnisnya.
- Database
- Lemari arsip digital tempat semua laporan disimpan rapi dan bisa dicari.
Bisa dipakai untuk bisnis Anda?
Bisa dipasang di aplikasi atau website Anda supaya keluhan pengguna langsung lengkap dan tidak tercecer di chat.
Konsultasikan proyek ini