Angular: Sentry Kullanarak Hata Takibi

Angular: Sentry Kullanarak Hata Takibi

Giriş

Modern web uygulamaları, kullanıcı deneyimini merkeze alarak sürekli gelişmektedir. Angular gibi güçlü bir framework ile geliştirilen tek sayfa uygulamaları (SPA’lar), zengin etkileşimler ve karmaşık istemci tarafı mantığı sunar. Ancak bu karmaşıklık, aynı zamanda hata potansiyelini de artırır. Bir uygulamanın kararlılığı ve güvenilirliği, kullanıcı memnuniyeti ve iş sürekliliği için hayati öneme sahiptir. Kullanıcılar, hatalarla karşılaştıklarında hayal kırıklığına uğrar ve uygulamayı terk edebilirler. Geliştiriciler için ise, production ortamında ortaya çıkan bir hatayı tespit etmek, yeniden üretmek ve düzeltmek, yeterli araçlar olmadan adeta iğneyle kuyu kazmaya benzer.

Geleneksel hata ayıklama yöntemleri (tarayıcı konsolu, log dosyaları), geliştirme aşamasında faydalı olsa da, production ortamındaki gerçek dünya senaryolarında yetersiz kalır. Kullanıcıların farklı cihazlarda, farklı tarayıcılarda, farklı ağ koşullarında ve beklenmedik veri girişleriyle karşılaşabileceği durumlar, hata takibini zorlaştırır. İşte bu noktada, gerçek zamanlı hata izleme ve performans gözlemleme platformları devreye girer. Sentry, bu tür platformların önde gelen örneklerinden biridir.

Sentry, uygulamalarınızdaki hataları ve performans sorunlarını gerçek zamanlı olarak izlemenizi, kaydetmenizi ve analiz etmenizi sağlayan açık kaynaklı bir hata izleme aracıdır. Frontend (Angular, React, Vue), backend (Node.js, Python, Java, .NET) ve mobil (iOS, Android, React Native) dahil olmak üzere geniş bir teknoloji yelpazesini destekler. Angular uygulamalarında Sentry kullanmak, geliştiricilere hataları proaktif bir şekilde tespit etme, kök nedenlerini anlama ve hızlıca çözme yeteneği kazandırır. Bu makalede, Angular projesinde Sentry’yi nasıl kuracağımızı, temel ve gelişmiş özelliklerini nasıl kullanacağımızı ve en iyi uygulamaları ele alacağız. Amacımız, Angular uygulamalarınızın daha kararlı, güvenilir ve sürdürülebilir olmasına yardımcı olmaktır.

Sentry Nedir?

Sentry, modern yazılım geliştirme süreçlerinde hata izleme ve performans gözlemleme ihtiyaçlarını karşılamak üzere tasarlanmış, güçlü bir platformdur. Uygulamalarınızda meydana gelen istisnaları, hataları ve potansiyel sorunları gerçek zamanlı olarak yakalayarak merkezi bir kontrol paneline gönderir. Bu sayede geliştiriciler, kullanıcıların karşılaştığı sorunları anında görebilir ve hızlıca müdahale edebilirler. Sentry, yalnızca hataları bildirmekle kalmaz, aynı zamanda bu hataların bağlamını (context) ve kök nedenlerini anlamak için zengin bilgiler sunar.

Temel Özellikleri

Sentry’nin temel özellikleri, onu diğer hata izleme araçlarından ayıran ve geliştiriciler için vazgeçilmez kılan unsurlardır:

Gerçek Zamanlı Hata Bildirimi

Uygulamanızda bir hata meydana geldiğinde, Sentry bunu anında yakalar ve kontrol panelinize gönderir. Bu sayede sorunlardan haberdar olmak için kullanıcı şikayetlerini beklemenize gerek kalmaz.

Detaylı Hata Bilgileri (Stack Traces ve Context)

Sentry, bir hata oluştuğunda sadece hatanın kendisini değil, aynı zamanda hataya yol açan tüm çağrı yığınını (stack trace), kullanıcının tarayıcı/cihaz bilgilerini, işletim sistemini, URL’i, kullanılan API isteklerini ve hatta kullanıcı tarafından girilen verileri de kaydeder. Bu bağlamsal bilgiler, hatanın nedenini anlamak ve yeniden üretmek için kritik öneme sahiptir.

Akıllı Hata Gruplama

Sentry, benzer hataları otomatik olarak gruplandırır. Bu sayede aynı hatanın yüzlerce kez raporlanması yerine, tek bir hata olayı altında tüm örnekleri görebilirsiniz. Bu özellik, hata takibini çok daha yönetilebilir hale getirir.

Performans İzleme (APM – Application Performance Monitoring)

Hata takibinin yanı sıra Sentry, uygulamanızın performansını da izleyebilir. Yavaş yüklenen sayfalar, uzun süren API çağrıları veya kullanıcı etkileşimlerindeki gecikmeler gibi performans sorunlarını tespit ederek darboğazları belirlemenize yardımcı olur. Bu, kullanıcılara daha akıcı bir deneyim sunmak için önemlidir.

Kullanıcı Geri Bildirimleri

Kullanıcılar, bir hata ile karşılaştıklarında doğrudan Sentry üzerinden geri bildirim gönderebilirler. Bu geri bildirimler, hatanın oluştuğu anın ekran görüntüsü ve kullanıcının yorumlarıyla birlikte Sentry olayına eklenir. Bu, hatanın kullanıcı perspektifinden anlaşılmasına yardımcı olur.

Entegrasyonlar

Sentry, Slack, GitHub, Jira, GitLab gibi popüler geliştirici araçları ve CI/CD platformlarıyla sorunsuz bir şekilde entegre olur. Bu sayede hata bildirimlerini doğrudan ekiplerinizin iletişim kanallarına gönderebilir, sorunları otomatik olarak görevlere dönüştürebilir ve geliştirme iş akışınızı hızlandırabilirsiniz.

Esnek Yapılandırma

Sentry SDK’ları, hata yakalama seviyelerini, hangi hataların gönderileceğini, hassas verilerin nasıl maskeleneceğini ve daha birçok parametreyi özelleştirmenize olanak tanır. Bu esneklik, uygulamanızın özel ihtiyaçlarına göre hata takibini ayarlamanızı sağlar.

Özetle, Sentry sadece bir hata izleme aracı değil, aynı zamanda uygulamanızın sağlığını ve performansını kapsamlı bir şekilde gözlemlemenizi sağlayan bütünsel bir platformdur. Geliştiricilere, sorunları proaktif olarak tespit etme, analiz etme ve çözme gücü vererek, daha kaliteli ve güvenilir yazılımlar üretmelerine yardımcı olur.

Neden Angular için Sentry?

Angular, büyük ölçekli ve karmaşık istemci tarafı uygulamalar geliştirmek için tercih edilen güçlü bir framework’tür. Ancak, bu tür uygulamalar, doğası gereği birçok farklı bileşenin, servisin ve dış bağımlılığın etkileşimiyle çalışır. Bu da hata olasılığını artırır ve hataların kaynağını bulmayı zorlaştırır. Angular uygulamaları için Sentry kullanmanın pek çok avantajı vardır:

İstemci Tarafı Hataların Kapsamlı Takibi

Angular uygulamaları, tarayıcıda çalışır ve hatalar genellikle kullanıcının tarayıcısından, ağ koşullarından veya uygulamanın kendi mantığından kaynaklanır. Sentry, bu istemci tarafı hataları (JavaScript hataları, ağ hataları, UI hataları vb.) yakalamak ve detaylı bağlam bilgileriyle birlikte raporlamak için optimize edilmiştir. Bu, “benim makinemde çalışıyor” sorunlarının ötesine geçmenizi sağlar.

Gerçek Dünya Senaryolarını Anlama

Geliştirme ortamında her senaryoyu test etmek imkansızdır. Kullanıcılar, farklı tarayıcı versiyonları, işletim sistemleri, cihazlar ve ağ hızları ile uygulamanızı kullanır. Sentry, bu çeşitliliğin neden olduğu hataları yakalayarak, uygulamanızın gerçek dünya koşullarındaki davranışını anlamanıza yardımcı olur. Bir hatanın yalnızca belirli bir tarayıcıda veya mobil cihazda ortaya çıktığını anında görebilirsiniz.

Proaktif Sorun Tespiti

Kullanıcılar bir sorunla karşılaştığında şikayet etmeden önce hatayı tespit etmek, modern yazılım geliştirmenin altın kuralıdır. Sentry, hataları anında bildirdiği için, kullanıcılar bir sorun yaşadığını fark etmeden veya bir ticket açmadan önce siz sorunu çözmeye başlayabilirsiniz. Bu, kullanıcı memnuniyetini önemli ölçüde artırır.

Angular’ın Hata Yönetimi ile Entegrasyon

Angular, uygulamadaki istisnaları yakalamak için yerleşik bir ErrorHandler mekanizmasına sahiptir. Sentry, bu mekanizma ile sorunsuz bir şekilde entegre edilebilir. Özel bir SentryErrorHandler oluşturarak, Angular’ın yakaladığı tüm hataları Sentry’ye gönderebilirsiniz. Bu, hata yönetimini merkezi ve tutarlı hale getirir.

Kullanıcı Deneyimi ve Performans İlişkisi

Hatalar sadece uygulamanın çökmesine neden olmakla kalmaz, aynı zamanda performans düşüşlerine de yol açabilir. Sentry’nin performans izleme yetenekleri sayesinde, Angular uygulamalarınızdaki yavaş yüklenen rotaları, uzun süren HTTP isteklerini veya bileşen render sürelerini tespit edebilirsiniz. Bu, kullanıcı deneyimini doğrudan etkileyen faktörleri iyileştirmenize olanak tanır.

Geliştirme Sürecinde Verimlilik Artışı

Hata ayıklama, geliştirme sürecinin en zaman alıcı ve maliyetli kısımlarından biridir. Sentry, hatanın nerede, ne zaman ve hangi koşullar altında meydana geldiğine dair zengin bilgiler sağlayarak bu süreci dramatik bir şekilde hızlandırır. Geliştiriciler, hatayı yeniden üretmek için saatler harcamak yerine, doğrudan sorunun kök nedenine odaklanabilirler.

Özetle, Angular uygulamaları için Sentry kullanmak, uygulamanızın kararlılığını, güvenilirliğini ve performansını artırarak hem geliştiricilerin hem de kullanıcıların hayatını kolaylaştırır. Hataları proaktif bir şekilde yönetmek, uygulamanızın başarısı için kritik bir adımdır.

Angular Projesinde Sentry Kurulumu

Angular projenize Sentry entegrasyonu, birkaç basit adımı takip ederek kolayca gerçekleştirilebilir. Bu bölümde, adım adım kurulum sürecini ve temel yapılandırmaları ele alacağız.

Ön Gereksinimler

• Node.js ve npm/yarn yüklü olmalı.
• Mevcut bir Angular projeniz olmalı veya yeni bir Angular projesi oluşturmalısınız (ng new my-app).
• Bir Sentry hesabınız olmalı ve yeni bir Sentry projesi oluşturmuş olmalısınız (örneğin, “Angular” platformunu seçerek).

Adım 1: Sentry Hesabı ve Projesi Oluşturma

Sentry.io adresine gidin ve bir hesap oluşturun (eğer yoksa). Giriş yaptıktan sonra, “Projects” bölümüne giderek yeni bir proje oluşturun. Platform olarak “Angular”ı seçtiğinizden emin olun. Projeyi oluşturduğunuzda, Sentry size bir “DSN (Data Source Name)” sağlayacaktır. Bu DSN, uygulamanızın Sentry’ye hata göndermek için kullanacağı benzersiz anahtardır. DSN’i güvenli bir yere kaydedin.

Adım 2: Sentry SDK’sını Kurma

Angular projenizin kök dizininde terminali açın ve gerekli Sentry SDK paketlerini yükleyin:

npm install @sentry/angular @sentry/tracing
veya
yarn add @sentry/angular @sentry/tracing

@sentry/angular paketi, Angular özelinde hata yakalama ve bağlam sağlama yeteneklerini içerirken, @sentry/tracing paketi performans izleme (APM) özelliklerini etkinleştirmek için gereklidir.

Adım 3: Sentry’yi Başlatma (Initialize)

Sentry’yi uygulamanızın başlangıç noktasında, yani main.ts dosyasında başlatmanız en iyi yaklaşımdır. Bu, uygulamanızın ilk anından itibaren hataları yakalamaya başlamasını sağlar. DSN’i doğrudan kodda tutmak yerine, environment.ts dosyalarını kullanarak farklı ortamlar için (development, production) farklı DSN’ler veya yapılandırmalar sağlamak daha iyi bir pratiktir.

Öncelikle, src/environments/environment.ts ve src/environments/environment.prod.ts dosyalarınıza Sentry DSN’inizi ekleyin:

src/environments/environment.ts (Geliştirme Ortamı)

export const environment = {
  production: false,
  sentry: {
    dsn: 'YOUR_DEVELOPMENT_SENTRY_DSN', // Geliştirme DSN'i veya null
    enabled: false, // Geliştirme ortamında Sentry'yi devre dışı bırakabilirsiniz
  },
};

src/environments/environment.prod.ts (Üretim Ortamı)

export const environment = {
  production: true,
  sentry: {
    dsn: 'YOUR_PRODUCTION_SENTRY_DSN', // Üretim DSN'i
    enabled: true,
  },
};

Şimdi src/main.ts dosyasında Sentry’yi başlatın:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

import * as Sentry from '@sentry/angular';
import { Integrations } from '@sentry/tracing';

if (environment.production) {
  enableProdMode();
}

if (environment.sentry.enabled && environment.sentry.dsn) {
  Sentry.init({
    dsn: environment.sentry.dsn,
    integrations: [
      // Tarayıcı ve Angular ile ilgili otomatik izlemeyi etkinleştirir
      new Integrations.BrowserTracing({
        routingInstrumentation: Sentry.routingInstrumentation,
      }),
    ],
    // Hataların % kaçının performans izlemesi için örneklenmesi gerektiğini ayarlar.
    // %1.0 (100%) tüm işlemleri izler, bu genellikle çok fazla olabilir.
    // %0.1 (10%) iyi bir başlangıç noktasıdır.
    tracesSampleRate: 0.1,
    // Uygulamanızın sürümünü belirtin. Bu, hataları belirli sürümlerle ilişkilendirmenize yardımcı olur.
    release: 'my-angular-app@1.0.0', // CI/CD sürecinde otomatik güncellenebilir
    // Ortam adını belirtin (örn: 'production', 'development', 'staging')
    environment: environment.production ? 'production' : 'development',
  });
}

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch((err) => console.error(err));

Bu yapılandırmada:
* dsn: Sentry projenizin DSN’i.
* integrations: Sentry’nin farklı özelliklerini etkinleştiren eklentilerdir. BrowserTracing Angular yönlendirme olaylarını otomatik olarak izleyerek performans verilerini toplar.
* tracesSampleRate: Performans izleme için olayların yüzde kaçının örneklenmesi gerektiğini belirler. 0.1, olayların %10’unun izleneceği anlamına gelir.
* release: Uygulamanızın mevcut sürümünü belirtir. Bu, Sentry’de hataları belirli sürümlere göre filtrelemenize olanak tanır. Genellikle CI/CD sürecinde otomatik olarak güncellenir.
* environment: Hatanın hangi ortamdan geldiğini belirtir (örn: production, development, staging).

Adım 4: Angular’ın Hata İşleyicisini Sentry ile Entegre Etme

Angular, uygulamada yakalanmayan istisnaları işlemek için bir ErrorHandler servisi sağlar. Bu servisi kendi özel SentryErrorHandler sınıfınızla geçersiz kılarak, Angular’ın yakaladığı tüm hataları Sentry’ye gönderebiliriz.

src/app/sentry-error-handler.ts adında yeni bir dosya oluşturun:

import { ErrorHandler, Injectable } from '@angular/core';
import * as Sentry from '@sentry/angular';
import { environment } from '../environments/environment';

@Injectable()
export class SentryErrorHandler implements ErrorHandler {
  constructor() {}

  handleError(error: any): void {
    // Angular'ın orijinal hata işleyicisinin davranışını koruyabiliriz.
    // Konsola hata basmak gibi.
    // console.error(error); // İsteğe bağlı

    // Sadece Sentry etkinse ve DSN tanımlıysa hata gönder
    if (environment.sentry.enabled && environment.sentry.dsn) {
      Sentry.captureException(error);
    }
  }
}

Şimdi bu özel hata işleyiciyi app.module.ts dosyanızda sağlayın:

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http'; // Eğer HTTP istekleri yapıyorsanız

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SentryErrorHandler } from './sentry-error-handler'; // Özel hata işleyicimizi import ediyoruz

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, HttpClientModule],
  providers: [
    { provide: ErrorHandler, useClass: SentryErrorHandler }, // SentryErrorHandler'ı sağlıyoruz
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Bu adımlarla, Angular uygulamanızdaki tüm yakalanmayan hatalar artık Sentry’ye gönderilecektir.

Adım 5: Kurulumu Test Etme

Sentry entegrasyonunuzun doğru çalıştığından emin olmak için kasıtlı olarak bir hata oluşturabilirsiniz. Örneğin, app.component.ts dosyanıza basit bir hata fırlatan buton ekleyin:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: 
    
    Hata Oluştur
    
  ,
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  title = 'my-app';

  throwError(): void {
    throw new Error('Bu bir Sentry test hatasıdır!');
  }
}

Uygulamanızı production modunda (veya Sentry’nin etkin olduğu bir ortamda) çalıştırın (ng serve --configuration=production) ve butona tıklayın. Kısa bir süre sonra, Sentry kontrol panelinizde bu hatayı görmelisiniz.

Bu adımlarla, Angular projenizde Sentry’yi başarıyla kurmuş ve temel hata takibini etkinleştirmiş olursunuz. Artık uygulamanızdaki hataları gerçek zamanlı olarak izleyebilir ve yönetebilirsiniz.

Gelişmiş Sentry Özellikleri ile Angular

Sentry, sadece temel hata yakalamanın ötesinde, hataların kök nedenlerini daha iyi anlamak ve uygulama performansını optimize etmek için bir dizi gelişmiş özellik sunar. Bu bölümde, Angular uygulamanızda bu gelişmiş özellikleri nasıl kullanacağınızı inceleyeceğiz.

Kullanıcı Bağlamı (User Context) Ekleme

Bir hata meydana geldiğinde, hangi kullanıcının etkilendiğini bilmek sorun giderme için çok önemlidir. Sentry, oturum açmış kullanıcıların kimliğini ve diğer ilgili bilgilerini hata olaylarına eklemenizi sağlar.

import * as Sentry from '@sentry/angular';

// Kullanıcı oturum açtığında bu kodu çağırın
login(user: any) {
  Sentry.setUser({
    id: user.id,
    email: user.email,
    username: user.username,
    // Diğer özel bilgiler...
  });
  // ...
}

// Kullanıcı oturumu kapattığında veya kimliği bilinmediğinde
logout() {
  Sentry.setUser(null); // Kullanıcı bağlamını temizle
  // ...
}

Sentry.setUser() metodu ile kullanıcı kimliği, e-posta, kullanıcı adı gibi bilgileri hata olaylarına ekleyebilirsiniz. Bu sayede Sentry panelinde hataları belirli kullanıcılara göre filtreleyebilir ve kimlerin etkilendiğini görebilirsiniz.

Ekmek Kırıntıları (Breadcrumbs)

Ekmek kırıntıları, bir hata oluşmadan önce kullanıcının uygulama içinde yaptığı eylemleri (gezinme, tıklamalar, HTTP istekleri, konsol mesajları vb.) gösteren bir olay dizisidir. Sentry SDK’sı birçok breadcrumb’ı otomatik olarak yakalar. Ancak manuel olarak da ekmek kırıntıları ekleyerek daha spesifik bir bağlam sağlayabilirsiniz.

import * as Sentry from '@sentry/angular';

// Örneğin, bir form gönderimi öncesinde
submitForm(formData: any) {
  Sentry.addBreadcrumb({
    category: 'form',
    message: 'Kullanıcı formu göndermeye çalıştı',
    data: {
      formName: 'Kaydolma Formu',
      // formData.username, formData.email gibi hassas olmayan veriler
    },
    level: 'info',
  });
  // Form gönderme mantığı...
}

// Bir API çağrısı öncesinde
fetchData(url: string) {
  Sentry.addBreadcrumb({
    category: 'http',
    message: API çağrısı: ${url},
    level: 'info',
  });
  // HTTP isteği yapma mantığı...
}

Bu, bir hata meydana geldiğinde kullanıcının tam olarak ne yaptığını anlamanıza yardımcı olur.

Özel Etiketler (Custom Tags) ve Ekstra Veriler (Extra Data)

Hata olaylarına özel etiketler ve ek veriler ekleyerek, hataları daha iyi kategorize edebilir ve filtreleyebilirsiniz.

import * as Sentry from '@sentry/angular';

// Özel bir etiket ekleme (örneğin, uygulamanın modülü)
Sentry.setTag('module', 'dashboard');

// Ekstra veri ekleme (hata ayıklama için faydalı olabilecek herhangi bir JSON veri)
Sentry.setExtra('configVersion', 'v2.1');
Sentry.setExtra('userPreferences', { theme: 'dark', language: 'tr' });

// Bir kapsam (scope) içinde etiket ve ekstra veri ayarlama
Sentry.withScope(scope => {
  scope.setTag('component', 'ProductDetail');
  scope.setExtra('productId', 123);
  scope.captureException(new Error('Ürün detayı yüklenemedi'));
});

setTag() ile anahtar-değer çiftleri halinde etiketler ekleyebilir, setExtra() ile daha karmaşık veri yapılarını ekleyebilirsiniz. withScope() ise belirli bir hata olayı veya işlem için geçici olarak bağlam verileri ayarlamanıza olanak tanır.

Sürüm Yönetimi (Release Management)

Sentry’de sürüm takibi, hataları belirli uygulama sürümleriyle ilişkilendirmenizi sağlar. Bu, yeni bir sürüm yayınladığınızda hataların artıp artmadığını veya belirli bir sürümdeki hataları hızlıca izole etmenizi kolaylaştırır.

main.ts dosyasında release değerini dinamik olarak ayarlamak en iyisidir. Genellikle bu, CI/CD sürecinde otomatik olarak yapılır. Örneğin, package.json dosyanızdaki sürümü kullanabilirsiniz:

// main.ts dosyasında
// ...
import packageInfo from '../../package.json'; // package.json dosyasını import edin

if (environment.sentry.enabled && environment.sentry.dsn) {
  Sentry.init({
    // ...
    release: my-angular-app@${packageInfo.version},
    // ...
  });
}

package.json dosyasını TypeScript’te import edebilmek için tsconfig.json dosyanıza "resolveJsonModule": true ve "esModuleInterop": true eklemeniz gerekebilir.

Performans İzleme (APM – Application Performance Monitoring)

@sentry/tracing paketi ile Angular uygulamanızın performansını izleyebilirsiniz. Bu, yavaş yüklenen rotaları, uzun süren HTTP isteklerini ve diğer performans darboğazlarını tespit etmenize yardımcı olur.

main.ts dosyasında zaten BrowserTracing entegrasyonunu eklemiştik:

import { Integrations } from '@sentry/tracing';
// ...
Sentry.init({
  // ...
  integrations: [
    new Integrations.BrowserTracing({
      routingInstrumentation: Sentry.routingInstrumentation,
      // URL'leri gruplamak için regex tanımlayabilirsiniz
      // Örneğin, /users/123 ve /users/456'yı /users/:id olarak gruplamak için
      // tracingOrigins: ['localhost', 'my-api.com', /^\//],
    }),
  ],
  tracesSampleRate: 0.1, // İşlemlerin %10'unu örnekle
  // ...
});

routingInstrumentation: Sentry.routingInstrumentation sayesinde, Angular Router olayları otomatik olarak Sentry’de işlemler (transactions) olarak kaydedilir. Bu, her bir rota değişiminin ne kadar sürdüğünü ve bu işlem içinde hangi alt işlemlerin (spans) (örn. HTTP istekleri) gerçekleştiğini görmenizi sağlar.

Manuel işlemler ve alt işlemler de oluşturabilirsiniz:

import * as Sentry from '@sentry/angular';

async loadProduct(productId: string) {
  const transaction = Sentry.startTransaction({ name: Load Product ${productId} });
  Sentry.configureScope(scope => scope.setSpan(transaction));

  try {
    const apiSpan = transaction.startChild({ op: 'api-call', description: 'Fetch product from API' });
    const product = await this.productService.getProduct(productId).toPromise();
    apiSpan.finish();

    const renderSpan = transaction.startChild({ op: 'render', description: 'Render product details' });
    // Ürün detaylarını render etme mantığı
    renderSpan.finish();

    return product;
  } catch (error) {
    Sentry.captureException(error);
    throw error;
  } finally {
    transaction.finish();
  }
}

Bu örnek, belirli bir iş akışının (ürün yükleme) performansını manuel olarak izlemenizi sağlar ve API çağrıları ile render işlemlerinin ne kadar sürdüğünü ayrı ayrı gösterir.

Kaynak Haritaları (Source Maps)

Minify edilmiş ve birleştirilmiş JavaScript kodunda hataları ayıklamak zordur. Sentry’ye kaynak haritalarınızı yükleyerek, hata izlemelerinin orijinal, okunabilir kodunuzu göstermesini sağlayabilirsiniz.

Kaynak haritalarını Sentry’ye yüklemek için genellikle Sentry CLI aracı kullanılır ve bu işlem CI/CD pipeline’ınızın bir parçası olmalıdır.

1. Sentry CLI Kurulumu:

npm install -g @sentry/cli

2. Sentry CLI Yapılandırması:
~/.sentryclirc dosyanızı oluşturun veya düzenleyin:

[auth]
    token=YOUR_SENTRY_AUTH_TOKEN # Sentry ayarlarınızdan alın

    [defaults]
    org=YOUR_ORG_SLUG
    project=YOUR_PROJECT_SLUG

3. CI/CD Sürecinde Kaynak Haritalarını Yükleme:
Angular projenizi build ettikten sonra (genellikle ng build --prod --source-map), aşağıdaki komutları çalıştırarak kaynak haritalarını Sentry’ye yükleyebilirsiniz:

# Yeni bir sürüm oluştur
    sentry-cli releases new "my-angular-app@1.0.0"

    # Kaynak haritalarını yükle
    sentry-cli releases files "my-angular-app@1.0.0" upload-sourcemaps ./dist/my-angular-app --url-prefix '~/assets'

    # Sürümü finalize et
    sentry-cli releases finalize "my-angular-app@1.0.0"

--url-prefix önemli bir parametredir; tarayıcının kaynak haritalarını aradığı yolu Sentry’ye bildirir. Angular varsayılan olarak assets klasörüne statik dosyaları koyar ve genellikle /assets önekiyle sunulur. Bu değeri kendi sunum yolunuza göre ayarlamalısınız. my-angular-app@1.0.0 yerine package.json‘dan okunan dinamik bir sürüm kullanmak en iyisidir.

Bu gelişmiş özellikler, Angular uygulamanızın hatalarını ve performansını daha derinlemesine anlamanıza ve kullanıcılarınıza daha iyi bir deneyim sunmanıza olanak tanır.

Angular’da Sentry İçin En İyi Uygulamalar

Sentry’yi Angular uygulamanızla kullanırken, en iyi uygulamaları takip etmek hem hata takibinin etkinliğini artıracak hem de gereksiz maliyetlerden veya veri gizliliği sorunlarından kaçınmanızı sağlayacaktır.

Koşullu Başlatma (Conditional Initialization)

Sentry’yi yalnızca belirli ortamlarda (örneğin, production ve staging) başlatmak iyi bir uygulamadır. Geliştirme ortamında her hatayı Sentry’ye göndermek, gereksiz gürültü oluşturabilir ve Sentry kotalarınızı hızla tüketebilir. environment.ts dosyalarını kullanarak bu kontrolü sağlayabilirsiniz, daha önce yaptığımız gibi:

// main.ts
import { environment } from './environments/environment';
import * as Sentry from '@sentry/angular';

if (environment.sentry.enabled && environment.sentry.dsn) {
  Sentry.init({
    dsn: environment.sentry.dsn,
    // ... diğer yapılandırmalar
  });
}

Bu, geliştirme sırasında Sentry’nin devre dışı kalmasını ve yalnızca üretimde etkinleşmesini sağlar.

Hassas Veri Maskeleme ve Filtreleme

Kullanıcıların kişisel olarak tanımlanabilir bilgilerini (PII) veya diğer hassas verileri Sentry’ye göndermekten kaçınmak çok önemlidir. Sentry, bu tür verileri otomatik olarak maskelemek veya filtrelemek için çeşitli mekanizmalar sunar:

* inboundFilters entegrasyonu: Belirli URL’lerden, hata mesajlarından veya yığın izlerinden gelen olayları filtreleyebilirsiniz.
* beforeSend callback’i: Bir hata olayı Sentry’ye gönderilmeden hemen önce tetiklenen bir fonksiyondur. Bu fonksiyonda, olayı inceleyebilir, hassas verileri kaldırabilir veya hatta olayın gönderilmesini tamamen iptal edebilirsiniz.

// main.ts
Sentry.init({
  // ...
  beforeSend(event, hint) {
    // Örneğin, belirli bir hatayı gönderme
    if (event.message && event.message.includes('Ignore this error')) {
      return null; // Olayı gönderme
    }

    // Hassas verileri temizleme (örneğin, bir formdaki parola alanını)
    if (event.request && event.request.data) {
      // event.request.data genellikle string veya object olabilir
      if (typeof event.request.data === 'string') {
        event.request.data = event.request.data.replace(/password=([^&]+)/g, 'password=[MASKED]');
      } else if (typeof event.request.data === 'object' && event.request.data !== null) {
        if ('password' in event.request.data) {
          event.request.data.password = '[MASKED]';
        }
      }
    }

    return event; // Değiştirilmiş olayı gönder
  },
});

GDPR ve diğer veri gizliliği düzenlemelerine uymak için bu adımlar hayati öneme sahiptir.

Hata Gruplamasını Anlama ve Yönetme

Sentry, benzer hataları otomatik olarak gruplandırır. Bu, aynı kök nedene sahip binlerce hatayı tek bir sorun olarak görmenizi sağlar. Ancak bazen Sentry’nin gruplaması beklentilerinizi karşılamayabilir.

* fingerprint özelliği: Bir olayın fingerprint‘ini manuel olarak ayarlayarak, Sentry’nin gruplama mantığını geçersiz kılabilirsiniz. Bu, farklı görünen ancak aynı kök nedene sahip hataları bir araya getirmek veya benzer görünen ancak farklı kök nedenlere sahip hataları ayırmak için kullanışlıdır.
* Sentry UI’dan Gruplama Kuralları: Sentry kontrol panelinden de gruplama kuralları oluşturarak, belirli hataların nasıl gruplandırılacağını özelleştirebilirsiniz.

Release (Sürüm) Takibi ve CI/CD Entegrasyonu

Uygulamanızın her yeni sürümünü Sentry’ye bildirmek, hataları belirli dağıtımlarla ilişkilendirmenizi sağlar. Bu, yeni bir sürümün hatalara neden olup olmadığını hızlıca görmenizi veya belirli bir sürümdeki tüm hataları düzeltildi olarak işaretlemenizi kolaylaştırır.

CI/CD pipeline’ınızda Sentry CLI kullanarak:
1. Uygulamanızı build edin.
2. sentry-cli releases new komutuyla yeni bir sürüm oluşturun.
3. sentry-cli releases files upload-sourcemaps komutuyla kaynak haritalarını yükleyin.
4. sentry-cli releases set-commits --auto komutuyla ilgili commit’leri bağlayın.
5. sentry-cli releases finalize komutuyla sürümü tamamlayın.

Bu otomasyon, manuel hataları önler ve hata takibinizi daha verimli hale getirir.

Performans İzleme İçin tracesSampleRate ve sampleRate Ayarları

Performans izleme (APM) ve hata raporlama için örnekleme oranlarını dikkatlice ayarlayın.
* tracesSampleRate: Performans işlemleri (transactions) için örnekleme oranıdır. Genellikle %1 (0.01) ile %10 (0.1) arasında bir değer iyi bir başlangıç noktasıdır. Tüm işlemleri izlemek (1.0) üretim ortamında çok fazla veri göndermenize neden olabilir.
* sampleRate: Hata olayları için örnekleme oranıdır. Çok yüksek hacimli hata olayları alıyorsanız, bu oranı düşürerek Sentry’ye gönderilen hata sayısını azaltabilirsiniz. Ancak genellikle %100 (1.0) tutulur, çünkü her hatanın önemli olma potansiyeli vardır.

Hata Raporlama Kalitesini Artırma

* Kullanıcı Geri Bildirimleri: Sentry’nin kullanıcı geri bildirimleri widget’ını uygulamanıza entegre ederek, kullanıcıların bir hata ile karşılaştıklarında doğrudan geri bildirim göndermelerini sağlayın.
* Manuel Hata Yakalama: Bazen yakalanmayan hataların yanı sıra, belirli bir iş mantığı içinde bilerek yakaladığınız ancak yine de Sentry’ye bildirmek istediğiniz hatalar olabilir (try-catch blokları içinde). Bu durumlarda Sentry.captureException(error) kullanın.
* Mesaj Yakalama: Bilgilendirici mesajları (örneğin, bir API’nin beklenen bir hata kodu döndürmesi) Sentry.captureMessage('API returned 404 for product X') ile Sentry’ye gönderebilirsiniz. Bu, hata olmasa bile önemli bir durumu izlemenizi sağlar.

Sentry Entegrasyonunu Test Etme

Entegrasyonunuzun doğru çalıştığından emin olmak için düzenli olarak testler yapın. Kasıtlı olarak bir hata oluşturun (örneğin, throw new Error('Test hatası');) ve Sentry panelinde göründüğünden emin olun. Performans izlemesi için de uygulamanızda gezinerek Sentry Transactions bölümünde verilerin göründüğünü kontrol edin.

Bu en iyi uygulamaları takip ederek, Angular uygulamanızdaki Sentry entegrasyonundan en yüksek verimi alabilir, hataları daha etkili bir şekilde yönetebilir ve daha kararlı bir uygulama sunabilirsiniz.

Potansiyel Zorluklar ve Çözümleri

Sentry, Angular uygulamalarınızda hata takibini büyük ölçüde kolaylaştırsa da, entegrasyon ve kullanım sırasında bazı potansiyel zorluklarla karşılaşılabilir. Bu zorlukları önceden bilmek ve olası çözümlerini anlamak, sorunsuz bir deneyim sağlamak için önemlidir.

1. Aşırı Raporlama (Over-reporting) ve Kota Tüketimi

Zorluk: Özellikle geliştirme ortamında veya çok sık meydana gelen önemsiz hatalar nedeniyle Sentry kotalarınızın hızla tükenmesi.
Çözüm:
* Koşullu Başlatma: Sentry’yi yalnızca üretim veya sahneleme gibi kritik ortamlarda etkinleştirin (environment.sentry.enabled). Geliştirme ortamında devre dışı bırakın.
* beforeSend Callback: Önemsiz veya bilinen hataları filtrelemek için beforeSend callback’ini kullanın. Örneğin, belirli bir HTTP durum kodu hatasını veya tarayıcı eklentilerinden kaynaklanan hataları göndermeyin.
* sampleRate ve tracesSampleRate: Hata ve performans olayları için örnekleme oranlarını dikkatlice ayarlayın. Yüksek trafikli uygulamalarda sampleRate (hata olayları için) değerini 1.0‘dan daha düşük bir değere (örn. 0.1 veya 0.05) çekmeyi düşünebilirsiniz, ancak bu, tüm hataları görmeyeceğiniz anlamına gelir.

2. Performans Yükü

Zorluk: Sentry SDK’sının kendisinin veya özellikle performans izlemenin (tracing) uygulamaya bir performans yükü getirmesi.
Çözüm:
* Asenkron Yükleme: Sentry SDK’sını uygulamanızın kritik olmayan bir anında asenkron olarak yüklemeyi düşünebilirsiniz. Ancak Angular entegrasyonunda genellikle main.ts‘de erken başlatma tercih edilir.
* Optimize Edilmiş Entegrasyonlar: Yalnızca ihtiyacınız olan Sentry entegrasyonlarını kullanın. Örneğin, performans izlemeye ihtiyacınız yoksa @sentry/tracing paketini ve BrowserTracing entegrasyonunu dahil etmeyin.
* tracesSampleRate Ayarı: Performans izleme için tracesSampleRate değerini düşük tutarak (örn. 0.01 veya 0.001), Sentry’ye gönderilen performans verisi miktarını azaltın.

3. Hassas Veri Sızıntısı

Zorluk: Kullanıcıların kişisel verileri, parolalar veya diğer hassas bilgiler Sentry’ye yanlışlıkla gönderilmesi.
Çözüm:
* beforeSend Callback: Bu, hassas verileri filtrelemek için en güçlü araçtır. Gönderilmeden önce tüm olayları inceleyin ve potansiyel PII’yi maskeleyin veya kaldırın.
* data ve url Filtreleri: Sentry’nin kendi kontrol panelinde, belirli URL’lerden veya veri alanlarından gelen bilgileri filtrelemek için sunucu tarafı kurallar tanımlayabilirsiniz.
* Global Veri Temizleme: Sentry’nin normalizeDepth ayarını kullanarak derin iç içe geçmiş nesnelerin normalleştirilmesini sınırlayabilir veya maxValueLength ile dize uzunluklarını kısaltabilirsiniz.

4. Kaynak Haritalarının Düzgün Çalışmaması

Zorluk: Minify edilmiş üretim kodundaki hataların, Sentry’de okunabilir orijinal kod olarak görünmemesi.
Çözüm:
* Doğru Kaynak Haritası Yükleme: sentry-cli kullanarak kaynak haritalarını doğru release ve url-prefix ile Sentry’ye yüklediğinizden emin olun. url-prefix değeri, tarayıcının kaynak haritasını nerede aradığıyla eşleşmelidir (genellikle Angular için ~/ veya ~/assets).
* Sürüm Eşleşmesi: Sentry’ye yüklediğiniz kaynak haritalarının sürümü ile uygulamanızın Sentry.init içinde belirttiği release değeri tam olarak eşleşmelidir.
* CI/CD Otomasyonu: Kaynak haritası yükleme sürecini CI/CD pipeline’ınıza entegre ederek manuel hataları önleyin.

5. Hata Gruplama Beklentileri Karşılamıyor

Zorluk: Sentry’nin bazı hataları yanlış gruplaması (farklı hataları birleştirmesi veya aynı hataları ayırması).
Çözüm:
* fingerprint Kullanımı: Hataların nasıl gruplandırılacağını manuel olarak kontrol etmek için Sentry.captureException veya Sentry.captureMessage çağrılarında fingerprint seçeneğini kullanın.
* Sentry UI Gruplama Kuralları: Sentry kontrol panelinde, belirli kriterlere (hata mesajı, yığın izi vb.) göre özel gruplama kuralları tanımlayabilirsiniz.

6. Ağ İstekleri veya API Hataları

Zorluk: Sentry’nin otomatik olarak yakalayamadığı veya yeterli bağlam sağlayamadığı belirli ağ istekleri veya API hataları.
Çözüm:
* HTTP Interceptor Kullanımı: Angular’da bir HTTP Interceptor oluşturarak, tüm HTTP isteklerini ve yanıtlarını merkezi olarak izleyebilir, başarısız olanları Sentry.captureException ile manuel olarak Sentry’ye gönderebilirsiniz. Bu, özellikle API’den dönen belirli hata kodlarını (örn. 4xx veya 5xx) yakalamak için faydalıdır.
* Sentry.addBreadcrumb: Önemli API çağrılarından önce ve sonra ekmek kırıntıları ekleyerek, ağ isteğiyle ilgili daha fazla bağlam sağlayın.

Bu zorlukları ve çözümlerini göz önünde bulundurarak, Angular uygulamanızda Sentry entegrasyonunu daha sağlam ve verimli hale getirebilirsiniz.

Sonuç

Angular gibi modern web framework’leriyle geliştirilen uygulamaların karmaşıklığı arttıkça, hata takibi ve performans gözlemleme süreçleri de kritik bir öneme sahip olmuştur. Geleneksel hata ayıklama yöntemleri, üretim ortamındaki gerçek dünya senaryolarında yetersiz kalırken, Sentry gibi güçlü platformlar geliştiricilere paha biçilmez içgörüler sunar.

Bu makalede, Angular projesinde Sentry’yi adım adım nasıl kuracağımızı, temel hata takibi için ErrorHandler entegrasyonunu ve gelişmiş özelliklerini (kullanıcı bağlamı, ekmek kırıntıları, özel etiketler, sürüm yönetimi, performans izleme ve kaynak haritaları) detaylı bir şekilde inceledik. Ayrıca, Sentry’yi kullanırken karşılaşabileceğiniz potansiyel zorlukları ve bu zorlukların üstesinden gelmek için en iyi uygulamaları (koşullu başlatma, hassas veri maskeleme, CI/CD entegrasyonu) ele aldık.

Sentry’nin Angular uygulamalarınıza entegrasyonu, sadece hataları yakalamakla kalmaz, aynı zamanda bu hataların kök nedenlerini anlamanıza, etkilenen kullanıcıları belirlemenize ve uygulamanızın performans darboğazlarını tespit etmenize olanak tanır. Bu proaktif yaklaşım, kullanıcılarınızın karşılaştığı sorunları onlar fark etmeden veya bir şikayette bulunmadan önce çözmenizi sağlar. Sonuç olarak, daha kararlı, güvenilir ve yüksek performanslı bir uygulama sunarak kullanıcı memnuniyetini artırırsınız.

Unutmayın ki Sentry entegrasyonu tek seferlik bir işlem değildir. Uygulamanız geliştikçe ve yeni özellikler eklendikçe Sentry yapılandırmalarınızı gözden geçirmek, release bilgilerini güncel tutmak ve kaynak haritalarını düzenli olarak yüklemek, sürekli bir hata izleme ve performans optimizasyonu döngüsünün parçası olmalıdır. Sentry’yi tam potansiyeliyle kullanarak, Angular uygulamalarınızın kalitesini ve sürdürülebilirliğini önemli ölçüde artırabilirsiniz.