Modern Web Geliştirmede Hata İzleme Neden Kritik?

Modern web uygulamaları dağıtık mimariler, mikro servisler ve karmaşık ön yüz mantıkları içerir. Kullanıcı tarafında patlayan JavaScript hataları çoğu zaman sunucu loglarına düşmez. Profesyonel bir dijital ajans veya kurumsal mühendislik ekibi için görünmeyen hata, kaybedilen kullanıcı ve ciro demektir. Güncel trendler, reaktif hata yönetiminden proaktif telemetri ve anlık izleme (error tracking) sistemlerine geçişi zorunlu kılar.

Sentry Nedir?

Sentry; tarayıcı, mobil ve sunucu ortamlarında oluşan istisnaları (exceptions) anında yakalayan, çağrı yığınını (stack trace), ortam değişkenlerini ve kullanıcı adımlarını (breadcrumbs) kaydeden açık kaynak tabanlı bir hata takip platformudur.

Adım Adım Sentry Entegrasyonu

1. Proje Oluşturma ve DSN Alma

Sentry panelinde yeni bir proje oluşturun. Projeye özel verilen Data Source Name (DSN) anahtarını kopyalayın. Bu anahtar, istemcinin hataları doğru Sentry havuzuna göndermesini sağlar.

2. Paket Kurulumu

Modern web projelerinde SDK kurulumunu NPM veya Yarn ile yapın:

npm install @sentry/browser @sentry/tracing

3. İstemci Tarafı Başlatma (Initialization)

Uygulamanın giriş noktasına (ör. index.js veya main.ts) 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: "proje-adi@1.0.0"
});

İpucu: Üretim ortamında tracesSampleRate değerini bütçe ve kota durumuna göre 0.1 - 0.2 bandında tutun. Geliştirme ortamında 1.0 yapabilirsiniz.

4. React / Modern UI Framework Entegrasyonu

React tabanlı modern web projelerinde bileşen ağacındaki kırılmaları yakalamak için Error Boundary kullanın:

import React from "react";
import * as Sentry from "@sentry/react";

function App() {
  return (
    <Sentry.ErrorBoundary fallback={({ error }) => <div>Hata oluştu: {error.message}</div>}>
      <MainComponent />
    </Sentry.ErrorBoundary>
  );
}

5. Manuel Hata Yakalama ve Özel Context Ekleme

Beklenmedik durumlarda manuel loglama ve kullanıcı bağlamı ekleyin:

try {
  criticalDatabaseOperation();
} catch (error) {
  Sentry.setContext("siparis_detay", { orderId: 1042 });
  Sentry.setUser({ id: "usr_892", email: "dev@ajans.com" });
  Sentry.captureException(error);
}

Üretim Ortamı İçin En İyi Pratikler

Source Maps Yükleme: Minify edilmiş JavaScript kodlarını Sentry CLI veya Webpack/Vite eklentisiyle derleme aşamasında yükleyin. Okunabilir stack trace elde edin.
Kişisel Veri (PII) Temizliği: beforeSend kancası kullanarak şifre, kredi kartı veya hassas token verilerini sunucuya gitmeden filtreleyin.
Release & Deploy Takibi: Hangi hatanın hangi commit/sürüm ile girdiğini tespit etmek için CI/CD hattında release etiketleme kullanın.
Alert Kuralları: Slack, Discord veya PagerDuty entegrasyonu ile kritik seviyedeki hatalarda anlık bildirim tetikleyin.