Web Uygulamalarında Hata İzleme: Adım Adım Sentry Entegrasyon Rehberi
Modern web uygulamalarında proaktif hata izleme stratejilerini uygulayın. Sentry kurulumu, context yönetimi ve performans izleme adımlarını içeren kapsamlı rehber.
Sistem Yöneticisi
Kıdemli Yazılım Mimarı
Web Uygulamalarında Hata İzleme (Error Tracking) Nedir?
Hata izleme (Error Tracking), production ortamında çalışan web uygulamalarında meydana gelen istisnaları (runtime exceptions), çökmeleri ve performans darboğazlarını gerçek zamanlı yakalama, gruplama ve analiz etme sürecidir. Log kayıtlarını manuel taramak yerine merkezi hata izleme araçları kullanmak, modern dijital strateji süreçlerinin ayrılmaz parçasıdır.
Kullanıcı bildirmeden hatayı tespit etmek, Mean Time to Resolution (MTTR) süresini doğrudan düşürür.
Modern Hata Yönetimi Trendleri
Dağıtık mimariler ve single-page application (SPA) yapılarının yaygınlaşmasıyla hata izleme pratiklerinde öne çıkan trendler:
- Gerçek Zamanlı Telemetri: Hataların anlık Slack/PagerDuty entegrasyonlarıyla bildirilmesi.
- Session Replay: Hatadan hemen önceki kullanıcı etkileşimlerini DOM bazlı video formatında izleme.
- Tracing & Performance Monitoring: API gecikmeleri ile client hatalarını aynı trace ID altında birleştirme.
- Release Tracking: Hatanın tam olarak hangi commit/deployment ile tetiklendiğini otomatik eşleme.
Adım Adım Sentry Kurulumu ve Entegrasyonu
Adım 1: Sentry Projesi Oluşturma
Sentry panelinde yeni proje oluşturup platformu (Browser JavaScript, React, Node.js vb.) seçin. Size özel üretilen DSN (Data Source Name) anahtarını kaydedin.
Adım 2: SDK Kurulumu ve Başlatma
Tarayıcı veya Node.js ortamına göre resmi SDK paketini projeye dahil edin:
npm install --save @sentry/browserUygulama giriş noktasına (index.js / main.ts) SDK başlatma kodunu ekleyin:
import * as Sentry from "@sentry/browser";
Sentry.init({
dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
integrations: [new Sentry.BrowserTracing()],
tracesSampleRate: 0.2,
environment: process.env.NODE_ENV,
release: "app@1.0.0"
});Adım 3: Context ve Kullanıcı Bilgisi Ekleme
Hata analizi sırasında hangi kullanıcının etkilendiğini anlamak için context verilerini SDK oturumuna bağlayın:
// Auth sonrasi calisir
Sentry.setUser({
id: "usr_8492",
email: "dev@firma.com"
});
// Ozel etiket ekleme
Sentry.setTag("subscription_plan", "enterprise");Adım 4: Manuel Hata Yakalama (Try/Catch)
Kritik iş akışlarında beklenmeyen durumları yakalayıp Sentry'ye iletin:
try {
processPayment(payload);
} catch (error) {
Sentry.captureException(error, {
extra: { orderId: payload.orderId }
});
}Adım 5: Source Maps Yükleme
Minify edilmiş production bundle dosyalarındaki hataları orijinal kod satırlarıyla eşleştirmek için build pipeline'ına Source Map yükleme adımını ekleyin. @sentry/webpack-plugin veya @sentry/vite-plugin kullanın.
En İyi Uygulamalar (Best Practices)
- PII Maskeleme: Kredi kartı, şifre ve kişisel verilerin Sentry sunucularına gitmesini engellemek için
beforeSendkancasını kullanın. - Sampling Oranları: Yüksek trafikli uygulamalarda işlem maliyetlerini düşürmek için transaction örnekleme oranını (
tracesSampleRate) %10-%20 aralığında tutun. - Noise Filtering: Reklam engelleyiciler veya tarayıcı eklentilerinden kaynaklanan anlamsız hataları
ignoreErrorslistesiyle filtreleyin.