Modern web uygulamalar\u0131, kullan\u0131c\u0131 deneyimini merkeze alarak s\u00fcrekli geli\u015fmektedir. Angular gibi g\u00fc\u00e7l\u00fc bir framework ile geli\u015ftirilen tek sayfa uygulamalar\u0131 (SPA’lar), zengin etkile\u015fimler ve karma\u015f\u0131k istemci taraf\u0131 mant\u0131\u011f\u0131 sunar. Ancak bu karma\u015f\u0131kl\u0131k, ayn\u0131 zamanda hata potansiyelini de art\u0131r\u0131r. Bir uygulaman\u0131n kararl\u0131l\u0131\u011f\u0131 ve g\u00fcvenilirli\u011fi, kullan\u0131c\u0131 memnuniyeti ve i\u015f s\u00fcreklili\u011fi i\u00e7in hayati \u00f6neme sahiptir. Kullan\u0131c\u0131lar, hatalarla kar\u015f\u0131la\u015ft\u0131klar\u0131nda hayal k\u0131r\u0131kl\u0131\u011f\u0131na u\u011frar ve uygulamay\u0131 terk edebilirler. Geli\u015ftiriciler i\u00e7in ise, production ortam\u0131nda ortaya \u00e7\u0131kan bir hatay\u0131 tespit etmek, yeniden \u00fcretmek ve d\u00fczeltmek, yeterli ara\u00e7lar olmadan adeta i\u011fneyle kuyu kazmaya benzer.<\/p>\n
Geleneksel hata ay\u0131klama y\u00f6ntemleri (taray\u0131c\u0131 konsolu, log dosyalar\u0131), geli\u015ftirme a\u015famas\u0131nda faydal\u0131 olsa da, production ortam\u0131ndaki ger\u00e7ek d\u00fcnya senaryolar\u0131nda yetersiz kal\u0131r. Kullan\u0131c\u0131lar\u0131n farkl\u0131 cihazlarda, farkl\u0131 taray\u0131c\u0131larda, farkl\u0131 a\u011f ko\u015fullar\u0131nda ve beklenmedik veri giri\u015fleriyle kar\u015f\u0131la\u015fabilece\u011fi durumlar, hata takibini zorla\u015ft\u0131r\u0131r. \u0130\u015fte bu noktada, ger\u00e7ek zamanl\u0131 hata izleme ve performans g\u00f6zlemleme platformlar\u0131 devreye girer. Sentry, bu t\u00fcr platformlar\u0131n \u00f6nde gelen \u00f6rneklerinden biridir.<\/p>\n
Sentry, uygulamalar\u0131n\u0131zdaki hatalar\u0131 ve performans sorunlar\u0131n\u0131 ger\u00e7ek zamanl\u0131 olarak izlemenizi, kaydetmenizi ve analiz etmenizi sa\u011flayan a\u00e7\u0131k kaynakl\u0131 bir hata izleme arac\u0131d\u0131r. Frontend (Angular, React, Vue), backend (Node.js, Python, Java, .NET) ve mobil (iOS, Android, React Native) dahil olmak \u00fczere geni\u015f bir teknoloji yelpazesini destekler. Angular uygulamalar\u0131nda Sentry kullanmak, geli\u015ftiricilere hatalar\u0131 proaktif bir \u015fekilde tespit etme, k\u00f6k nedenlerini anlama ve h\u0131zl\u0131ca \u00e7\u00f6zme yetene\u011fi kazand\u0131r\u0131r. Bu makalede, Angular projesinde Sentry’yi nas\u0131l kuraca\u011f\u0131m\u0131z\u0131, temel ve geli\u015fmi\u015f \u00f6zelliklerini nas\u0131l kullanaca\u011f\u0131m\u0131z\u0131 ve en iyi uygulamalar\u0131 ele alaca\u011f\u0131z. Amac\u0131m\u0131z, Angular uygulamalar\u0131n\u0131z\u0131n daha kararl\u0131, g\u00fcvenilir ve s\u00fcrd\u00fcr\u00fclebilir olmas\u0131na yard\u0131mc\u0131 olmakt\u0131r.<\/p>\n
Sentry, modern yaz\u0131l\u0131m geli\u015ftirme s\u00fcre\u00e7lerinde hata izleme ve performans g\u00f6zlemleme ihtiya\u00e7lar\u0131n\u0131 kar\u015f\u0131lamak \u00fczere tasarlanm\u0131\u015f, g\u00fc\u00e7l\u00fc bir platformdur. Uygulamalar\u0131n\u0131zda meydana gelen istisnalar\u0131, hatalar\u0131 ve potansiyel sorunlar\u0131 ger\u00e7ek zamanl\u0131 olarak yakalayarak merkezi bir kontrol paneline g\u00f6nderir. Bu sayede geli\u015ftiriciler, kullan\u0131c\u0131lar\u0131n kar\u015f\u0131la\u015ft\u0131\u011f\u0131 sorunlar\u0131 an\u0131nda g\u00f6rebilir ve h\u0131zl\u0131ca m\u00fcdahale edebilirler. Sentry, yaln\u0131zca hatalar\u0131 bildirmekle kalmaz, ayn\u0131 zamanda bu hatalar\u0131n ba\u011flam\u0131n\u0131 (context) ve k\u00f6k nedenlerini anlamak i\u00e7in zengin bilgiler sunar.<\/p>\n
Sentry’nin temel \u00f6zellikleri, onu di\u011fer hata izleme ara\u00e7lar\u0131ndan ay\u0131ran ve geli\u015ftiriciler i\u00e7in vazge\u00e7ilmez k\u0131lan unsurlard\u0131r:<\/p>\n
Uygulaman\u0131zda bir hata meydana geldi\u011finde, Sentry bunu an\u0131nda yakalar ve kontrol panelinize g\u00f6nderir. Bu sayede sorunlardan haberdar olmak i\u00e7in kullan\u0131c\u0131 \u015fikayetlerini beklemenize gerek kalmaz.<\/p>\n
Sentry, bir hata olu\u015ftu\u011funda sadece hatan\u0131n kendisini de\u011fil, ayn\u0131 zamanda hataya yol a\u00e7an t\u00fcm \u00e7a\u011fr\u0131 y\u0131\u011f\u0131n\u0131n\u0131 (stack trace), kullan\u0131c\u0131n\u0131n taray\u0131c\u0131\/cihaz bilgilerini, i\u015fletim sistemini, URL’i, kullan\u0131lan API isteklerini ve hatta kullan\u0131c\u0131 taraf\u0131ndan girilen verileri de kaydeder. Bu ba\u011flamsal bilgiler, hatan\u0131n nedenini anlamak ve yeniden \u00fcretmek i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n
Sentry, benzer hatalar\u0131 otomatik olarak grupland\u0131r\u0131r. Bu sayede ayn\u0131 hatan\u0131n y\u00fczlerce kez raporlanmas\u0131 yerine, tek bir hata olay\u0131 alt\u0131nda t\u00fcm \u00f6rnekleri g\u00f6rebilirsiniz. Bu \u00f6zellik, hata takibini \u00e7ok daha y\u00f6netilebilir hale getirir.<\/p>\n
Hata takibinin yan\u0131 s\u0131ra Sentry, uygulaman\u0131z\u0131n performans\u0131n\u0131 da izleyebilir. Yava\u015f y\u00fcklenen sayfalar, uzun s\u00fcren API \u00e7a\u011fr\u0131lar\u0131 veya kullan\u0131c\u0131 etkile\u015fimlerindeki gecikmeler gibi performans sorunlar\u0131n\u0131 tespit ederek darbo\u011fazlar\u0131 belirlemenize yard\u0131mc\u0131 olur. Bu, kullan\u0131c\u0131lara daha ak\u0131c\u0131 bir deneyim sunmak i\u00e7in \u00f6nemlidir.<\/p>\n
Kullan\u0131c\u0131lar, bir hata ile kar\u015f\u0131la\u015ft\u0131klar\u0131nda do\u011frudan Sentry \u00fczerinden geri bildirim g\u00f6nderebilirler. Bu geri bildirimler, hatan\u0131n olu\u015ftu\u011fu an\u0131n ekran g\u00f6r\u00fcnt\u00fcs\u00fc ve kullan\u0131c\u0131n\u0131n yorumlar\u0131yla birlikte Sentry olay\u0131na eklenir. Bu, hatan\u0131n kullan\u0131c\u0131 perspektifinden anla\u015f\u0131lmas\u0131na yard\u0131mc\u0131 olur.<\/p>\n
Sentry, Slack, GitHub, Jira, GitLab gibi pop\u00fcler geli\u015ftirici ara\u00e7lar\u0131 ve CI\/CD platformlar\u0131yla sorunsuz bir \u015fekilde entegre olur. Bu sayede hata bildirimlerini do\u011frudan ekiplerinizin ileti\u015fim kanallar\u0131na g\u00f6nderebilir, sorunlar\u0131 otomatik olarak g\u00f6revlere d\u00f6n\u00fc\u015ft\u00fcrebilir ve geli\u015ftirme i\u015f ak\u0131\u015f\u0131n\u0131z\u0131 h\u0131zland\u0131rabilirsiniz.<\/p>\n
Sentry SDK’lar\u0131, hata yakalama seviyelerini, hangi hatalar\u0131n g\u00f6nderilece\u011fini, hassas verilerin nas\u0131l maskelenece\u011fini ve daha bir\u00e7ok parametreyi \u00f6zelle\u015ftirmenize olanak tan\u0131r. Bu esneklik, uygulaman\u0131z\u0131n \u00f6zel ihtiya\u00e7lar\u0131na g\u00f6re hata takibini ayarlaman\u0131z\u0131 sa\u011flar.<\/p>\n
\u00d6zetle, Sentry sadece bir hata izleme arac\u0131 de\u011fil, ayn\u0131 zamanda uygulaman\u0131z\u0131n sa\u011fl\u0131\u011f\u0131n\u0131 ve performans\u0131n\u0131 kapsaml\u0131 bir \u015fekilde g\u00f6zlemlemenizi sa\u011flayan b\u00fct\u00fcnsel bir platformdur. Geli\u015ftiricilere, sorunlar\u0131 proaktif olarak tespit etme, analiz etme ve \u00e7\u00f6zme g\u00fcc\u00fc vererek, daha kaliteli ve g\u00fcvenilir yaz\u0131l\u0131mlar \u00fcretmelerine yard\u0131mc\u0131 olur.<\/p>\n
Angular, b\u00fcy\u00fck \u00f6l\u00e7ekli ve karma\u015f\u0131k istemci taraf\u0131 uygulamalar geli\u015ftirmek i\u00e7in tercih edilen g\u00fc\u00e7l\u00fc bir framework’t\u00fcr. Ancak, bu t\u00fcr uygulamalar, do\u011fas\u0131 gere\u011fi bir\u00e7ok farkl\u0131 bile\u015fenin, servisin ve d\u0131\u015f ba\u011f\u0131ml\u0131l\u0131\u011f\u0131n etkile\u015fimiyle \u00e7al\u0131\u015f\u0131r. Bu da hata olas\u0131l\u0131\u011f\u0131n\u0131 art\u0131r\u0131r ve hatalar\u0131n kayna\u011f\u0131n\u0131 bulmay\u0131 zorla\u015ft\u0131r\u0131r. Angular uygulamalar\u0131 i\u00e7in Sentry kullanman\u0131n pek \u00e7ok avantaj\u0131 vard\u0131r:<\/p>\n
Angular uygulamalar\u0131, taray\u0131c\u0131da \u00e7al\u0131\u015f\u0131r ve hatalar genellikle kullan\u0131c\u0131n\u0131n taray\u0131c\u0131s\u0131ndan, a\u011f ko\u015fullar\u0131ndan veya uygulaman\u0131n kendi mant\u0131\u011f\u0131ndan kaynaklan\u0131r. Sentry, bu istemci taraf\u0131 hatalar\u0131 (JavaScript hatalar\u0131, a\u011f hatalar\u0131, UI hatalar\u0131 vb.) yakalamak ve detayl\u0131 ba\u011flam bilgileriyle birlikte raporlamak i\u00e7in optimize edilmi\u015ftir. Bu, “benim makinemde \u00e7al\u0131\u015f\u0131yor” sorunlar\u0131n\u0131n \u00f6tesine ge\u00e7menizi sa\u011flar.<\/p>\n
Geli\u015ftirme ortam\u0131nda her senaryoyu test etmek imkans\u0131zd\u0131r. Kullan\u0131c\u0131lar, farkl\u0131 taray\u0131c\u0131 versiyonlar\u0131, i\u015fletim sistemleri, cihazlar ve a\u011f h\u0131zlar\u0131 ile uygulaman\u0131z\u0131 kullan\u0131r. Sentry, bu \u00e7e\u015fitlili\u011fin neden oldu\u011fu hatalar\u0131 yakalayarak, uygulaman\u0131z\u0131n ger\u00e7ek d\u00fcnya ko\u015fullar\u0131ndaki davran\u0131\u015f\u0131n\u0131 anlaman\u0131za yard\u0131mc\u0131 olur. Bir hatan\u0131n yaln\u0131zca belirli bir taray\u0131c\u0131da veya mobil cihazda ortaya \u00e7\u0131kt\u0131\u011f\u0131n\u0131 an\u0131nda g\u00f6rebilirsiniz.<\/p>\n
Kullan\u0131c\u0131lar bir sorunla kar\u015f\u0131la\u015ft\u0131\u011f\u0131nda \u015fikayet etmeden \u00f6nce hatay\u0131 tespit etmek, modern yaz\u0131l\u0131m geli\u015ftirmenin alt\u0131n kural\u0131d\u0131r. Sentry, hatalar\u0131 an\u0131nda bildirdi\u011fi i\u00e7in, kullan\u0131c\u0131lar bir sorun ya\u015fad\u0131\u011f\u0131n\u0131 fark etmeden veya bir ticket a\u00e7madan \u00f6nce siz sorunu \u00e7\u00f6zmeye ba\u015flayabilirsiniz. Bu, kullan\u0131c\u0131 memnuniyetini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r.<\/p>\n
Angular, uygulamadaki istisnalar\u0131 yakalamak i\u00e7in yerle\u015fik bir Hatalar sadece uygulaman\u0131n \u00e7\u00f6kmesine neden olmakla kalmaz, ayn\u0131 zamanda performans d\u00fc\u015f\u00fc\u015flerine de yol a\u00e7abilir. Sentry’nin performans izleme yetenekleri sayesinde, Angular uygulamalar\u0131n\u0131zdaki yava\u015f y\u00fcklenen rotalar\u0131, uzun s\u00fcren HTTP isteklerini veya bile\u015fen render s\u00fcrelerini tespit edebilirsiniz. Bu, kullan\u0131c\u0131 deneyimini do\u011frudan etkileyen fakt\u00f6rleri iyile\u015ftirmenize olanak tan\u0131r.<\/p>\n Hata ay\u0131klama, geli\u015ftirme s\u00fcrecinin en zaman al\u0131c\u0131 ve maliyetli k\u0131s\u0131mlar\u0131ndan biridir. Sentry, hatan\u0131n nerede, ne zaman ve hangi ko\u015fullar alt\u0131nda meydana geldi\u011fine dair zengin bilgiler sa\u011flayarak bu s\u00fcreci dramatik bir \u015fekilde h\u0131zland\u0131r\u0131r. Geli\u015ftiriciler, hatay\u0131 yeniden \u00fcretmek i\u00e7in saatler harcamak yerine, do\u011frudan sorunun k\u00f6k nedenine odaklanabilirler.<\/p>\n \u00d6zetle, Angular uygulamalar\u0131 i\u00e7in Sentry kullanmak, uygulaman\u0131z\u0131n kararl\u0131l\u0131\u011f\u0131n\u0131, g\u00fcvenilirli\u011fini ve performans\u0131n\u0131 art\u0131rarak hem geli\u015ftiricilerin hem de kullan\u0131c\u0131lar\u0131n hayat\u0131n\u0131 kolayla\u015ft\u0131r\u0131r. Hatalar\u0131 proaktif bir \u015fekilde y\u00f6netmek, uygulaman\u0131z\u0131n ba\u015far\u0131s\u0131 i\u00e7in kritik bir ad\u0131md\u0131r.<\/p>\n Angular projenize Sentry entegrasyonu, birka\u00e7 basit ad\u0131m\u0131 takip ederek kolayca ger\u00e7ekle\u015ftirilebilir. Bu b\u00f6l\u00fcmde, ad\u0131m ad\u0131m kurulum s\u00fcrecini ve temel yap\u0131land\u0131rmalar\u0131 ele alaca\u011f\u0131z.<\/p>\n Sentry.io adresine gidin ve bir hesap olu\u015fturun (e\u011fer yoksa). Giri\u015f yapt\u0131ktan sonra, “Projects” b\u00f6l\u00fcm\u00fcne giderek yeni bir proje olu\u015fturun. Platform olarak “Angular”\u0131 se\u00e7ti\u011finizden emin olun. Projeyi olu\u015fturdu\u011funuzda, Sentry size bir “DSN (Data Source Name)” sa\u011flayacakt\u0131r. Bu DSN, uygulaman\u0131z\u0131n Sentry’ye hata g\u00f6ndermek i\u00e7in kullanaca\u011f\u0131 benzersiz anahtard\u0131r. DSN’i g\u00fcvenli bir yere kaydedin.<\/p>\n Angular projenizin k\u00f6k dizininde terminali a\u00e7\u0131n ve gerekli Sentry SDK paketlerini y\u00fckleyin:<\/p>\n Sentry’yi uygulaman\u0131z\u0131n ba\u015flang\u0131\u00e7 noktas\u0131nda, yani \u00d6ncelikle, \u015eimdi Bu yap\u0131land\u0131rmada: Angular, uygulamada yakalanmayan istisnalar\u0131 i\u015flemek i\u00e7in bir \u015eimdi bu \u00f6zel hata i\u015fleyiciyi Bu ad\u0131mlarla, Angular uygulaman\u0131zdaki t\u00fcm yakalanmayan hatalar art\u0131k Sentry’ye g\u00f6nderilecektir.<\/p>\n Sentry entegrasyonunuzun do\u011fru \u00e7al\u0131\u015ft\u0131\u011f\u0131ndan emin olmak i\u00e7in kas\u0131tl\u0131 olarak bir hata olu\u015fturabilirsiniz. \u00d6rne\u011fin, ErrorHandler<\/code> mekanizmas\u0131na sahiptir. Sentry, bu mekanizma ile sorunsuz bir \u015fekilde entegre edilebilir. \u00d6zel bir SentryErrorHandler<\/code> olu\u015fturarak, Angular’\u0131n yakalad\u0131\u011f\u0131 t\u00fcm hatalar\u0131 Sentry’ye g\u00f6nderebilirsiniz. Bu, hata y\u00f6netimini merkezi ve tutarl\u0131 hale getirir.<\/p>\nKullan\u0131c\u0131 Deneyimi ve Performans \u0130li\u015fkisi<\/h3>\n
Geli\u015ftirme S\u00fcrecinde Verimlilik Art\u0131\u015f\u0131<\/h3>\n
Angular Projesinde Sentry Kurulumu<\/h2>\n
\u00d6n Gereksinimler<\/h3>\n
\n
ng new my-app<\/code>).<\/li>\nAd\u0131m 1: Sentry Hesab\u0131 ve Projesi Olu\u015fturma<\/h3>\n
Ad\u0131m 2: Sentry SDK’s\u0131n\u0131 Kurma<\/h3>\n
npm install @sentry\/angular @sentry\/tracing\nveya<\/h2>\nyarn add @sentry\/angular @sentry\/tracing<\/code><\/pre>\n
@sentry\/angular<\/code> paketi, Angular \u00f6zelinde hata yakalama ve ba\u011flam sa\u011flama yeteneklerini i\u00e7erirken, @sentry\/tracing<\/code> paketi performans izleme (APM) \u00f6zelliklerini etkinle\u015ftirmek i\u00e7in gereklidir.<\/p>\nAd\u0131m 3: Sentry’yi Ba\u015flatma (Initialize)<\/h3>\n
main.ts<\/code> dosyas\u0131nda ba\u015flatman\u0131z en iyi yakla\u015f\u0131md\u0131r. Bu, uygulaman\u0131z\u0131n ilk an\u0131ndan itibaren hatalar\u0131 yakalamaya ba\u015flamas\u0131n\u0131 sa\u011flar. DSN’i do\u011frudan kodda tutmak yerine, environment.ts<\/code> dosyalar\u0131n\u0131 kullanarak farkl\u0131 ortamlar i\u00e7in (development, production) farkl\u0131 DSN’ler veya yap\u0131land\u0131rmalar sa\u011flamak daha iyi bir pratiktir.<\/p>\nsrc\/environments\/environment.ts<\/code> ve src\/environments\/environment.prod.ts<\/code> dosyalar\u0131n\u0131za Sentry DSN’inizi ekleyin:<\/p>\nsrc\/environments\/environment.ts<\/code> (Geli\u015ftirme Ortam\u0131)<\/strong><\/p>\nexport const environment = {\n production: false,\n sentry: {\n dsn: 'YOUR_DEVELOPMENT_SENTRY_DSN', \/\/ Geli\u015ftirme DSN'i veya null\n enabled: false, \/\/ Geli\u015ftirme ortam\u0131nda Sentry'yi devre d\u0131\u015f\u0131 b\u0131rakabilirsiniz\n },\n};<\/code><\/pre>\nsrc\/environments\/environment.prod.ts<\/code> (\u00dcretim Ortam\u0131)<\/strong><\/p>\nexport const environment = {\n production: true,\n sentry: {\n dsn: 'YOUR_PRODUCTION_SENTRY_DSN', \/\/ \u00dcretim DSN'i\n enabled: true,\n },\n};<\/code><\/pre>\nsrc\/main.ts<\/code> dosyas\u0131nda Sentry’yi ba\u015flat\u0131n:<\/p>\nimport { enableProdMode } from '@angular\/core';\nimport { platformBrowserDynamic } from '@angular\/platform-browser-dynamic';\n\nimport { AppModule } from '.\/app\/app.module';\nimport { environment } from '.\/environments\/environment';\n\nimport * as Sentry from '@sentry\/angular';\nimport { Integrations } from '@sentry\/tracing';\n\nif (environment.production) {\n enableProdMode();\n}\n\nif (environment.sentry.enabled && environment.sentry.dsn) {\n Sentry.init({\n dsn: environment.sentry.dsn,\n integrations: [\n \/\/ Taray\u0131c\u0131 ve Angular ile ilgili otomatik izlemeyi etkinle\u015ftirir\n new Integrations.BrowserTracing({\n routingInstrumentation: Sentry.routingInstrumentation,\n }),\n ],\n \/\/ Hatalar\u0131n % ka\u00e7\u0131n\u0131n performans izlemesi i\u00e7in \u00f6rneklenmesi gerekti\u011fini ayarlar.\n \/\/ %1.0 (100%) t\u00fcm i\u015flemleri izler, bu genellikle \u00e7ok fazla olabilir.\n \/\/ %0.1 (10%) iyi bir ba\u015flang\u0131\u00e7 noktas\u0131d\u0131r.\n tracesSampleRate: 0.1,\n \/\/ Uygulaman\u0131z\u0131n s\u00fcr\u00fcm\u00fcn\u00fc belirtin. Bu, hatalar\u0131 belirli s\u00fcr\u00fcmlerle ili\u015fkilendirmenize yard\u0131mc\u0131 olur.\n release: 'my-angular-app@1.0.0', \/\/ CI\/CD s\u00fcrecinde otomatik g\u00fcncellenebilir\n \/\/ Ortam ad\u0131n\u0131 belirtin (\u00f6rn: 'production', 'development', 'staging')\n environment: environment.production ? 'production' : 'development',\n });\n}\n\nplatformBrowserDynamic()\n .bootstrapModule(AppModule)\n .catch((err) => console.error(err));<\/code><\/pre>\n
\n* dsn<\/code>: Sentry projenizin DSN’i.
\n* integrations<\/code>: Sentry’nin farkl\u0131 \u00f6zelliklerini etkinle\u015ftiren eklentilerdir. BrowserTracing<\/code> Angular y\u00f6nlendirme olaylar\u0131n\u0131 otomatik olarak izleyerek performans verilerini toplar.
\n* tracesSampleRate<\/code>: Performans izleme i\u00e7in olaylar\u0131n y\u00fczde ka\u00e7\u0131n\u0131n \u00f6rneklenmesi gerekti\u011fini belirler. 0.1, olaylar\u0131n %10’unun izlenece\u011fi anlam\u0131na gelir.
\n* release<\/code>: Uygulaman\u0131z\u0131n mevcut s\u00fcr\u00fcm\u00fcn\u00fc belirtir. Bu, Sentry’de hatalar\u0131 belirli s\u00fcr\u00fcmlere g\u00f6re filtrelemenize olanak tan\u0131r. Genellikle CI\/CD s\u00fcrecinde otomatik olarak g\u00fcncellenir.
\n* environment<\/code>: Hatan\u0131n hangi ortamdan geldi\u011fini belirtir (\u00f6rn: production<\/code>, development<\/code>, staging<\/code>).<\/p>\nAd\u0131m 4: Angular’\u0131n Hata \u0130\u015fleyicisini Sentry ile Entegre Etme<\/h3>\n
ErrorHandler<\/code> servisi sa\u011flar. Bu servisi kendi \u00f6zel SentryErrorHandler<\/code> s\u0131n\u0131f\u0131n\u0131zla ge\u00e7ersiz k\u0131larak, Angular’\u0131n yakalad\u0131\u011f\u0131 t\u00fcm hatalar\u0131 Sentry’ye g\u00f6nderebiliriz.<\/p>\nsrc\/app\/sentry-error-handler.ts<\/code> ad\u0131nda yeni bir dosya olu\u015fturun:<\/p>\nimport { ErrorHandler, Injectable } from '@angular\/core';\nimport * as Sentry from '@sentry\/angular';\nimport { environment } from '..\/environments\/environment';\n\n@Injectable()\nexport class SentryErrorHandler implements ErrorHandler {\n constructor() {}\n\n handleError(error: any): void {\n \/\/ Angular'\u0131n orijinal hata i\u015fleyicisinin davran\u0131\u015f\u0131n\u0131 koruyabiliriz.\n \/\/ Konsola hata basmak gibi.\n \/\/ console.error(error); \/\/ \u0130ste\u011fe ba\u011fl\u0131\n\n \/\/ Sadece Sentry etkinse ve DSN tan\u0131ml\u0131ysa hata g\u00f6nder\n if (environment.sentry.enabled && environment.sentry.dsn) {\n Sentry.captureException(error);\n }\n }\n}<\/code><\/pre>\napp.module.ts<\/code> dosyan\u0131zda sa\u011flay\u0131n:<\/p>\nimport { NgModule, ErrorHandler } from '@angular\/core';\nimport { BrowserModule } from '@angular\/platform-browser';\nimport { HttpClientModule } from '@angular\/common\/http'; \/\/ E\u011fer HTTP istekleri yap\u0131yorsan\u0131z\n\nimport { AppRoutingModule } from '.\/app-routing.module';\nimport { AppComponent } from '.\/app.component';\nimport { SentryErrorHandler } from '.\/sentry-error-handler'; \/\/ \u00d6zel hata i\u015fleyicimizi import ediyoruz\n\n@NgModule({\n declarations: [AppComponent],\n imports: [BrowserModule, AppRoutingModule, HttpClientModule],\n providers: [\n { provide: ErrorHandler, useClass: SentryErrorHandler }, \/\/ SentryErrorHandler'\u0131 sa\u011fl\u0131yoruz\n ],\n bootstrap: [AppComponent],\n})\nexport class AppModule {}<\/code><\/pre>\nAd\u0131m 5: Kurulumu Test Etme<\/h3>\n
app.component.ts<\/code> dosyan\u0131za basit bir hata f\u0131rlatan buton ekleyin:<\/p>\nimport { Component } from '@angular\/core';\n\n@Component({\n selector: 'app-root',\n template: \n \n