Belajar Capacitorjs - Monitoring & Crash Reporting

#Pendahuluan

Setelah di episode 22 kita mengamankan aplikasi, pada episode ini kita membangun observability — kemampuan untuk melihat apa yang terjadi di aplikasi setelah release. Crash reporting dan monitoring adalah mata dan telinga kalian di production.

Mengapa monitoring penting? Karena di mobile, kalian tidak bisa membuka DevTools seperti di web. Ketika aplikasi crash di perangkat user, satu-satunya cara memahami masalahnya adalah lewat crash reports dan logs yang dikirim ke server.

#Sentry untuk Capacitor

#Instalasi

Install Sentry SDK

npx @sentry/wizard -i capacitor

Wizard akan otomatis:

Install SDK yang diperlukan.
Konfigurasi iOS dan Android native.
Upload sourcemaps ke Sentry.

#Konfigurasi JavaScript

sentry.config.ts

import * as Sentry from '@sentry/capacitor';
 
Sentry.init({
  dsn: 'https://your-dsn@sentry.io/project-id',
  environment: __DEV__ ? 'development' : 'production',
  release: '1.0.0',
 
  // Performance monitoring
  tracesSampleRate: __DEV__ ? 1.0 : 0.2,
 
  // Breadcrumbs
  enableAutoBreadcrumbs: true,
 
  // Attachments
  attachStacktrace: true,
});

#Native Setup (iOS)

AppDelegate.swift - Sentry iOS

import Sentry
 
@UIApplicationMain
class AppDelegate: CAPBridgingAppDelegate {
    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        SentrySDK.start { options in
            options.dsn = "https://your-dsn@sentry.io/project-id"
            options.tracesSampleRate = 0.2
            options.attachScreenshot = true
        }
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }
}

#Native Setup (Android)

#Firebase Crashlytics

#Instalasi

Install Crashlytics

npm install @capacitor-firebase/crashlytics
npx cap sync

#Konfigurasi

Crashlytics setup

import { Crashlytics } from '@capacitor-firebase/crashlytics';
 
// Log error
await Crashlytics.recordException({
  message: 'Payment failed',
  stacktrace: new Error('Payment processing error'),
});
 
// Log non-fatal
await Crashlytics.log({
  message: 'User started checkout',
});
 
// Set user identifier
await Crashlytics.setUser({ uid: 'user-123' });
 
// Trigger crash (untuk testing)
await Crashlytics.crash();

#Analytics Funnel

#Track User Journey

Analytics funnel

import { FirebaseAnalytics } from '@capacitor-firebase/analytics';
 
async function trackFunnel() {
  await FirebaseAnalytics.logEvent({
    name: 'screen_view',
    params: { screen_name: 'home' },
  });
 
  await FirebaseAnalytics.logEvent({
    name: 'add_to_cart',
    params: { product_id: 'prod-123', price: 99000 },
  });
 
  await FirebaseAnalytics.logEvent({
    name: 'purchase',
    params: { product_id: 'prod-123', price: 99000, currency: 'IDR' },
  });
}

#Alerting

#Sentry Alerts

Di Sentry dashboard:

Settings → Alerts → Create Alert Rule.
Set conditions: "Number of errors > 10 in 5 minutes".
Set action: email / Slack notification.

#Crashlytics Alerts

Di Firebase Console:

Crashlytics → Settings → Alerts.
Aktifkan alerts untuk new crashes.
Set threshold dan notification recipients.

#Release Health

#Sentry Release Health

Release health tracking

Sentry.init({
  // ...
  release: '1.2.0',
  dist: '42',
});
 
// Sentry otomatis track:
// - Crash-free rate per versi
// - User adoption per versi
// - Regression detection

#Dashboard Metrics

Metric	Target	Action
Crash-free rate	≥ 99.5%	Investigate jika < 99%
ANR rate (Android)	≤ 0.5%	Optimize jika > 1%
User adoption	≥ 80% dalam 7 hari	Promote jika > 90%

Tip

Upload sourcemaps (JS) dan dSYM (iOS) / mapping files (Android) ke Sentry setiap build. Ini memungkinkan stack trace yang readable bukan minified code.

#Simulasikan Crash

Untuk testing integrasi:

Test crash reporting

function simulateCrash() {
  // JavaScript crash
  throw new Error('Test crash from JavaScript');
}
 
async function testNativeCrash() {
  // Sentry native crash
  await Sentry.nativeCrash();
}
 
function testOutOfMemory() {
  // Simulate OOM
  const bigArray = new Array(100000000).fill('x');
}

Note

Selalu test crash reporting di development sebelum release. Pastikan crash muncul di dashboard dengan stack trace yang readable dan user context yang benar.

#Penutup

Pada episode 23 ini, kalian telah memahami:

Sentry: SDK JS + native, sourcemaps, performance monitoring.
Firebase Crashlytics: crash reports, user context, native crashes.
Analytics funnel: track user journey dari browse sampai purchase.
Alerting: email/Slack notification untuk error threshold.
Release health: crash-free rate, user adoption, regression detection.

Di episode 24 selanjutnya, kita akan membahas migrasi Cordova & upgrade major version — plugin mapping dari Cordova ke Capacitor, config translation, upgrade path dari Capacitor 7 → 8, strategi mengikuti major baru, dan praktik upgrade dengan checklist breaking changes. Sampai jumpa!