Web Geliştirmede Hata İzleme Neden Zorunlu?

Kullanıcı tarayıcısında patlayan JavaScript hataları sunucu loglarına düşmez. Sessiz çökmeler kullanıcı kaybı ve ciro düşüşü yaratır. Modern web geliştirme süreçlerinde hata izleme (error tracking) araçları, prod ortamındaki exception ve promise rejection kayıtlarını stack trace ile merkeze toplar.

Adım 1: Sentry Projesi ve DSN Tanımlama

Sentry panelinde yeni proje aç. Platform seç (React, Vue, Node.js). Verilen DSN (Data Source Name) anahtarını al. Bu anahtar istemci ve sunucunun logları doğru hedefe yollamasını sağlar.

Adım 2: Frontend Entegrasyonu (React / Vanilla JS)

Gereksiz bağımlılık ekleme. Yalnızca resmi çekirdek SDK paketini kur:

npm install @sentry/browser

Uygulama giriş noktasında (main.js / index.js) başlat:

import * as Sentry from "@sentry/browser";

Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
  integrations: [Sentry.browserTracingIntegration()],
  tracesSampleRate: 0.1,
  environment: process.env.NODE_ENV
});

Adım 3: Kaynak Haritaları (Source Maps) Yapılandırması

Minify edilmiş prod kodundaki stack trace anlamsızdır. Sentry CLI ile build esnasında source map yükle:

npm install @sentry/vite-plugin --save-dev

Build aracına ekle (vite.config.js):

import { sentryVitePlugin } from "@sentry/vite-plugin";

export default {
  build: {
    sourcemap: true
  },
  plugins: [
    sentryVitePlugin({
      org: "ajans-slug",
      project: "web-app",
      authToken: process.env.SENTRY_AUTH_TOKEN
    })
  ]
};

Güvenlik Uyarısı: Source map dosyalarını herkese açık sunucu dizininde bırakma. Sentry'e yükledikten sonra public dizinden sil veya build pipeline içinde dışarı aktarma.

Adım 4: Backend Hata Yakalama (Node.js / Express)

Yakalanmamış async hataları için backend middleware katmanı kur:

import * as Sentry from "@sentry/node";

Sentry.init({ dsn: process.env.SENTRY_DSN });

// Route tanımlarından sonra, en son middleware:
app.use(Sentry.expressErrorHandler());

Adım 5: Context ve Kullanıcı Verisi Ekleme

Hatanın kimde gerçekleştiğini bilmek çözüm süresini kısaltır. Hassas veri (KVKK/GDPR, parola, kredi kartı) göndermeden kullanıcı ID ve rolü ekle:

Sentry.setUser({
  id: user.id,
  role: user.role
});

Dijital Ajanslar İçin Hata İzleme Trendleri ve İpuçları

Noise Filtering: Reklam engelleyici (adblocker) veya 3. parti script hatalarını `beforeSend` filtresiyle ayıkla.
Alert Routing: Slack ve Discord webhookları ile sadece P1 kritik hatalarda bildirim gönder. Uyarı yorgunluğunu önle.
Session Replay: Kullanıcının hata anındaki DOM hareketlerini kaydeden modern trendleri aktif et; UI buglarını anında doğrula.
Release Tracking: Git commit SHA değerini release versiyonu yap. Hangi hatanın hangi dağıtımla girdiğini gör.