Pengembang perangkat lunak berbasis di Playa del Carmen, Meksiko, berhasil meningkatkan skor kualitas kode proyek tvview dari 85 menjadi 95+ melalui integrasi platform pemantauan kesalahan Sentry dan penguatan rangkaian pengujian End-to-End (E2E). Pencapaian ini didokumentasikan dalam seri "Build in Public" yang mengungkapkan proses teknis menyeluruh mulai dari konfigurasi sisi klien, edge runtime, hingga sisi server menggunakan Next.js. Proyek tvview sendiri merupakan aplikasi berbasis web yang dikembangkan secara terbuka (open source) di repositori GitHub zaerohell/tvview, dengan tujuan menyediakan antarmuka pemantauan konten streaming.
Sebelum integrasi ini, proyek tvview menghadapi tantangan klasik dalam pengembangan modern: ketiadaan pelacakan kesalahan (error tracking) yang komprehensif dan kerangka pengujian E2E yang minim. Kondisi ini menyulitkan tim untuk mengidentifikasi dan menyelesaikan isu yang muncul di lingkungan produksi dengan cepat. Pipeline CI/CD yang ada pun belum sepenuhnya mendukung praktik deployment berkelanjutan (continuous deployment) dengan standar keandalan tinggi, sehingga risiko regresi kode saat rilis baru tetap signifikan.
Tahap awal implementasi dimulai dengan upaya pengaturan pengujian E2E menggunakan Vitest, sebuah kerangka pengujian generasi baru yang dikenal cepat dan kompatibel dengan Vite. Namun, pengembang menghadapi hambatan pada konfigurasi lingkungan pengujian yang kompleks, terutama terkait isolasi dependensi dan simulasi browser. Secara paralel, upaya integrasi Sentry awal juga gagal akibat kesalahan konfigurasi DSN (Data Source Name), yang mengakibatkan data telemetri tidak terkirim ke dashboard Sentry. Kendala ini menjadi momen belajar krusial tentang pentingnya validasi kredensial dan pemisahan lingkungan konfigurasi.
Solusi teknis yang diterapkan mencakup pembuatan tiga berkas konfigurasi Sentry terpisah: sentry.client.config.ts untuk sisi klien (browser), sentry.edge.config.ts untuk runtime edge Next.js, dan sentry.server.config.ts untuk sisi server (Node.js). Pemisahan ini mengikuti arsitektur hybrid Next.js 13+ yang memanfaatkan App Router dan Server Components, memastikan konteks kesalahan tertangkap dengan akurat di setiap lapisan eksekusi. Setiap berkas diinisialisasi dengan DSN yang valid dan opsi tambahan seperti tracesSampleRate untuk performa monitoring dan replaysOnErrorSessionSampleRate untuk session replay.
Di lapisan orkestrasi, berkas alur kerja GitHub Actions .github/workflows/ci-e2e.yml diperbarui untuk mengotomatiskan seluruh siklus: pemasangan dependensi, generasi klien Prisma ORM dengan variabel lingkungan database dummy, dan eksekusi perintah npm run test:e2e. Pipeline dijadwalkan berjalan otomatis setiap jam 06:35 UTC harian serta pada setiap push ke cabang main, memastikan deteksi regresi dini. Penggunaan ubuntu-latest sebagai runner standar memberikan konsistensi lingkungan yang mereplikasi kondisi produksi berbasis Linux.
Modifikasi pada next.config.ts menjadi kunci integrasi mendalam dengan memanfaatkan wrapper withSentryConfig dari paket @sentry/nextjs. Wrapper ini menyuntikkan konfigurasi bundling otomatis seperti source map upload ke Sentry saat build produksi, pengaktifan instrumentasi serverless, dan penyembunyian kredensial sensitif dari bundle sisi klien. Pendekatan ini menghilangkan kebutuhan skrip terpisah untuk mengunggah source map, mengurangi kompleksitas maintenance.
Hasilnya, metrik observabilitas proyek melonjak signifikan. Sentry kini menyediakan visibilitas real-time terhadap pengecualian (exceptions), performa transaksi, dan rekaman sesi pengguna yang mengalami kesalahan. Tim dapat mereproduksi bug produksi dalam hitungan menit, bukan jam. Sementara rangkaian E2E yang distabilkan memberikan kepercayaan tinggi bahwa alur kritis seperti autentikasi, navigasi, dan pemutaran konten berfungsi sebagaimana mestinya sebelum kode mencapai pengguna akhir.
Ke depan, rencana pengembangan mencakup optimasi durasi eksekusi pengujian E2E melalui paralelisme dan pemilihan kasus uji berbasis risiko (risk-based testing), serta eksplorasi fitur Sentry lanjutan seperti custom alerts berbasis metrik bisnis, integrasi dengan Jira/Linear untuk triase otomatis, dan penggunaan profiling continuous untuk mengidentifikasi bottleneck performa di tingkat fungsi. Kasus tvview ini menjadi bukti nyata bahwa investasi pada tooling observabilitas dan quality assurance sejak awal siklus hidup pengembangan (shift-left) memberikan return on investment yang terukur berupa kecepatan rilis dan stabilitas produk.