Studi Kasus Atmo LMS: Pakai Reporting API untuk Monitor CSP Violation Real-Time Tanpa Sentry di 2026

TL;DR: Atmo LMS mengganti Sentry (89 USD per bulan) dengan Reporting API native browser plus endpoint Supabase Edge Function. Per Mei 2026, sistem menangkap 240 sampai 380 laporan CSP violation per minggu, mayoritas false positive dari iklan retargeting yang lalu di-allowlist. CSP berhasil naik dari report-only ke enforce setelah 3 minggu monitoring tanpa rusak fitur produksi.

Saat membangun Atmo LMS (platform learning management untuk klien enterprise), kami memutuskan pasang CSP (Content Security Policy) sejak awal. Masalahnya, CSP yang terlalu ketat bisa mematikan script analytics, ads pixel, atau widget chat tanpa peringatan, dan kalau itu terjadi di production, ya sudah, fitur mati senyap.

Solusi awal: pakai Sentry untuk capture violation. Cocok, tapi biayanya 89 USD per bulan untuk plan team yang cukup buat traffic kami. Setelah 4 bulan, total biaya 356 USD untuk fitur yang sebenarnya cuma butuh "tahu kalau ada yang salah".

Kami migrasi ke Reporting API. Hasilnya bagus.

Setup yang Dipakai

Atmo LMS pakai stack: Next.js 15 App Router, Vercel Edge, Supabase. Reporting API dipasang lewat 3 lapisan.

1. Header di middleware.ts

const reportingEndpoints = `csp="/api/csp-report", default="/api/reports"`;
response.headers.set("Reporting-Endpoints", reportingEndpoints);
response.headers.set(
  "Content-Security-Policy-Report-Only",
  "default-src 'self'; report-to csp"
);

2. Route Handler di app/api/csp-report/route.ts

export async function POST(req: Request) {
  const reports = await req.json();
  await supabase.from("csp_violations").insert(
    reports.map((r: any) => ({
      blocked_uri: r.body?.["blocked-uri"],
      violated_directive: r.body?.["violated-directive"],
      document_uri: r.body?.["document-uri"],
      created_at: new Date().toISOString(),
    }))
  );
  return new Response(null, { status: 204 });
}

3. Dashboard di /admin/csp

Halaman Next.js yang query top 20 violation per minggu, grouped by blocked_uri dan violated_directive. Render pakai table sederhana.

Hasil 6 Minggu

Dari 280 violation per hari di minggu 1, mayoritas datang dari retargeting pixel yang load script third-party tanpa nonce. Setelah allowlist domain Facebook, Google Ads, dan Intercom, angka turun drastis.

Biaya Real

Setup ini gratis sampai 50 ribu request per hari. Storage Supabase 500 MB cukup untuk 6 bulan log dengan rotasi 30 hari. Total biaya tooling Atmo LMS turun dari 89 USD per bulan (Sentry plan team) ke 0 USD. Sentry tetap dipakai untuk exception JavaScript di tier free (5 ribu event per bulan), karena untuk error stack trace native, Sentry masih lebih baik.

Pelajaran yang Dipetik

Pelajaran 1: CSP report-only mode wajib jalan minimal 2-3 minggu sebelum naik ke enforce. Banyak violation legit (analytics, ads) baru muncul setelah marketing campaign berjalan, bukan saat audit awal.

Pelajaran 2: Reporting API menerima batch JSON, bukan satu per satu. Endpoint harus siap parse array. Awalnya kami salah desain dan miss 40% laporan.

Pelajaran 3: Browser membuffer report sampai user navigate atau tab close, bisa terlambat 5-30 detik. Bukan masalah untuk monitoring trend, tapi jangan andalkan untuk alerting realtime.

Untuk pendalaman best practice CSP, lihat Google web.dev: Strict CSP.

Pertanyaan Umum

Kenapa tidak pakai Cloudflare report endpoint langsung?

Cloudflare menawarkan report URI gratis, tapi data tidak bisa di-query custom. Untuk audit per minggu dengan dashboard sendiri, simpan ke Supabase lebih fleksibel.

Apakah Reporting API menggantikan Sentry sepenuhnya?

Tidak. Reporting API spesifik untuk laporan native browser: CSP, deprecation, intervention, crash. Untuk JavaScript exception, error API, stack trace, Sentry tetap relevan. Atmo LMS pakai keduanya, masing-masing untuk use case berbeda.

Berapa kompleksitas migrasi dari Sentry?

Untuk tim dengan akses ke middleware Next.js, kurang dari 1 hari. Yang lama bukan coding, tapi tuning CSP allowlist selama 3-4 minggu agar tidak rusak fitur.

Apakah cocok untuk personal brand atau hanya enterprise?

Cocok untuk skala mana saja. Personal brand seperti Yuanita Sekar yang traffic-nya 5 ribu pageview per bulan justru lebih untung, karena tidak perlu bayar tier minimum Sentry.

Apakah CSP enforce mode mengganggu performa?

Tidak. CSP dievaluasi browser hampir gratis, di bawah 1 ms per request. Beban ada di tahap setup, bukan runtime.

Penutup

Tool monitoring komersial menarik karena dashboard-nya cantik dan dokumentasinya jelas. Tapi untuk problem spesifik seperti CSP violation, native browser API ditambah Supabase sering cukup, kadang lebih fleksibel. Yang Atmo LMS dapat bukan cuma penghematan 89 USD per bulan, melainkan kontrol penuh atas data violation untuk audit kompliance.