Error Monitoring Tools

Error monitoring adalah praktik melacak error yang terjadi di production secara otomatis — tanpa harus menunggu laporan dari user. Tool seperti Sentry, Datadog, atau Rollbar menangkap error, stack trace, dan context saat error terjadi.

Mengapa Error Monitoring Penting?

Tanpa monitoring:
User mengalami error → Tidak melaporkan (sebagian besar) → Kamu tidak tahu ada masalah

Dengan monitoring:
Error terjadi → Tool langsung menangkap → Kamu dapat notifikasi dalam hitungan detik

Apa yang Ditangkap

Tool monitoring menangkap:

• Stack trace lengkap
• User context (siapa yang mengalami error)
• Environment (browser, OS, versi app)
• Breadcrumbs — aksi user sebelum error terjadi
• Request context — URL, method, headers saat error

Menggunakan Sentry

npm install @sentry/react

// main.tsx
import * as Sentry from "@sentry/react";

Sentry.init({
  dsn: "https://[email protected]/xxx",
  environment: import.meta.env.MODE,  // "production" | "development"
  tracesSampleRate: 0.1,  // 10% dari request untuk performance monitoring
  replaysOnErrorSampleRate: 1.0,  // 100% replay saat ada error
});

Menangkap Error Secara Manual

try {
  await processPayment(order);
} catch (error) {
  // Kirim error ke Sentry dengan context tambahan
  Sentry.captureException(error, {
    tags: { orderId: order.id },
    extra: { userId: user.id, amount: order.total },
    level: "error",
  });
  showErrorMessage("Pembayaran gagal. Tim kami sudah diberitahu.");
}

Breadcrumbs

Breadcrumbs adalah rekaman aksi user sebelum error terjadi:

// Tambah breadcrumb manual
Sentry.addBreadcrumb({
  category: "ui.click",
  message: "User klik tombol checkout",
  level: "info",
  data: { cartItems: 3, total: 150000 },
});

// Sentry otomatis menangkap:
// - Klik dan navigasi
// - Console logs
// - Request HTTP
// - Perubahan state

Error Grouping

Sentry mengelompokkan error yang sama berdasarkan stack trace, sehingga kamu bisa melihat:

TypeError: Cannot read properties of undefined (reading "name")
├── 47 kejadian
├── 12 user terdampak
├── Pertama terjadi: 2 jam lalu
├── Terakhir terjadi: 5 menit lalu
└── Assigned to: kamu

Membuat Error Monitoring Sederhana

class ErrorMonitor {
  constructor() {
    this.errors = [];
    this.setupGlobalHandlers();
  }

  setupGlobalHandlers() {
    // Tangkap error JavaScript yang tidak ter-handle
    window.addEventListener("error", (event) => {
      this.capture(event.error, { type: "uncaught" });
    });

    // Tangkap Promise rejection yang tidak ter-handle
    window.addEventListener("unhandledrejection", (event) => {
      this.capture(event.reason, { type: "unhandledRejection" });
    });
  }

  capture(error, context = {}) {
    const entry = {
      id: crypto.randomUUID(),
      timestamp: new Date().toISOString(),
      message: error?.message ?? String(error),
      stack: error?.stack,
      url: window.location.href,
      userAgent: navigator.userAgent,
      ...context,
    };

    this.errors.push(entry);
    this.sendToServer(entry);  // Kirim ke backend
    console.error("[Monitor]", entry);
  }

  getStats() {
    return {
      total: this.errors.length,
      byType: this.errors.reduce((acc, e) => {
        acc[e.type] = (acc[e.type] ?? 0) + 1;
        return acc;
      }, {}),
    };
  }
}

const monitor = new ErrorMonitor();

Alerts dan Notifikasi

Konfigurasi alert agar dapat notifikasi saat:

• Error baru muncul di production
• Jumlah error melonjak drastis
• Error rate melebihi threshold tertentu
• Error terjadi untuk user VIP

Tips Error Monitoring

1. Setup di hari pertama — jangan tunggu ada masalah dulu
2. Set environment — bedakan production dan staging
3. Filter noise — abaikan error dari ekstensi browser
4. Assign error ke developer yang bertanggung jawab
5. Buat alert yang actionable — jangan terlalu banyak notifikasi