Angular Academy · Ders

Hataları Genel Düzeyde Ele Alma

HTTP hatalarını merkezi olarak yakalayıp dönüştürün

Hataları Genel Düzeyde Ele Alma, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Angular Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Angular Academy kursu toplamda 4 dersten oluşur.

Merkezi hata işleme

HTTP hatalarını her bileşende yakalamak yerine bir interceptor bunları genel olarak ele alabilir: kayda geçirebilir, bildirim gösterebilir, 401 durumunda yeniden yönlendirebilir veya hata biçimini standartlaştırabilir.

Bir interceptor'da catchError

Hataları yakalamak için next(req) akışını catchError üzerinden geçirin.

import { catchError, throwError } from 'rxjs';
import { HttpErrorResponse } from '@angular/common/http';

export const errorInterceptor: HttpInterceptorFn = (req, next) =>
  next(req).pipe(
    catchError((err: HttpErrorResponse) => {
      console.error('HTTP error', err.status);
      return throwError(() => err);
    })
  );

HttpErrorResponse'u inceleme

HttpErrorResponse, status, message ve sunucunun error gövdesini taşır. Farklı durumları ele almak için status değerine göre dallanın.

catchError((err: HttpErrorResponse) => {
  if (err.status === 0) console.error('network/CORS error');
  else console.error('server error', err.status);
  return throwError(() => err);
})

401 durumunda yeniden yönlendirme

401 genellikle oturumun süresinin dolduğu anlamına gelir. Interceptor'dan giriş sayfasına yeniden yönlendirin.

export const errorInterceptor: HttpInterceptorFn = (req, next) => {
  const router = inject(Router);
  return next(req).pipe(
    catchError((err: HttpErrorResponse) => {
      if (err.status === 401) router.navigate(['/login']);
      return throwError(() => err);
    })
  );
};

Bildirim gösterme

Hataları kullanıcıya tutarlı biçimde göstermek için bir bildirim servisini inject edin.

export const errorInterceptor: HttpInterceptorFn = (req, next) => {
  const toast = inject(ToastService);
  return next(req).pipe(
    catchError((err: HttpErrorResponse) => {
      toast.error(err.error?.message ?? 'Something went wrong');
      return throwError(() => err);
    })
  );
};

Yeniden fırlatma ve yok sayma

Genellikle throwError(() => err) ile yeniden fırlatın; böylece bileşenler tepki vermeye devam edebilir. Yalnızca hatayı çağıranlardan gerçekten gizlemek istediğinizde yedek bir observable (örneğin of(null)) döndürün.

Hatayı standartlaştırma

Yeniden fırlatmadan önce farklı sunucu hata gövdelerini tutarlı bir uygulama hata biçimine dönüştürün; böylece sonraki aşamalardaki işleme basitleşir.

catchError((err: HttpErrorResponse) => {
  const appError = {
    code: err.status,
    message: err.error?.message ?? err.message
  };
  return throwError(() => appError);
})

İstemci ve sunucu hatalarını ayırt etme

err.error instanceof ErrorEvent (veya err.status === 0) bir istemci/ağ hatasını gösterir; aksi durumda arka uç bir hata durumu döndürmüştür. Bunları farklı şekilde ele alın.

Çift işlemeyi önleme

Interceptor zaten bir bildirim gösteriyorsa bileşenler aynı hata için bir bildirim daha göstermemelidir. Yinelenen iletileri önlemek için kullanıcıya gösterilecek işlemenin tek bir katmanına karar verin.

Bir izleme servisine kayıt gönderme

Merkezi bir interceptor, istek bağlamı eklenmiş şekilde hataları bir izleme aracına (Sentry vb.) iletmek için ideal yerdir.

export const errorInterceptor: HttpInterceptorFn = (req, next) => {
  const monitor = inject(MonitoringService);
  return next(req).pipe(
    catchError((err: HttpErrorResponse) => {
      monitor.captureHttpError(req.url, err.status, err.message);
      return throwError(() => err);
    })
  );
};

Hata interceptor'ının sıralanması

Hata interceptor'ını diğerlerini saracak şekilde yerleştirin; böylece yeniden denemeler de dahil olmak üzere tüm zincirdeki hataları yakalayabilir.

provideHttpClient(
  withInterceptors([authInterceptor, retryInterceptor, errorInterceptor])
)

Hızlı Kontrol

Genel hata işleme hakkındaki anlayışınızı test edin.

Özet: Hataları Genel Olarak Ele Alma

Bir hata interceptor'ı HTTP başarısızlıklarının işlenmesini merkezileştirir.

next(req) üzerinde catchError kullanın.
HttpErrorResponse.status değerine göre dallanın (örneğin 401 durumunda yeniden yönlendirin).
Bileşenlerin tepki verebilmesi için hatayı yeniden fırlatın; yalnızca amaçladığınızda yok sayın.

Sırada: yeniden deneme ve yüklenme göstergeleri.

Sıkça Sorulan Sorular

“Hataları Genel Düzeyde Ele Alma” dersi ücretsiz mi?

Evet — “Hataları Genel Düzeyde Ele Alma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Angular Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Angular Academy kursu toplamda 4 dersten oluşur.

“Hataları Genel Düzeyde Ele Alma” dersinde ne öğreneceğim?

HTTP hatalarını merkezi olarak yakalayıp dönüştürün Angular Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Angular Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Angular Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Hataları Genel Düzeyde Ele Alma” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Angular Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Angular Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Angular Academy Sayfasına Dön