Angular 403 ve 404 Hata Yönetimi | Routing, Guard ve Interceptor Rehberi

Angular'da Hata Yönetimi Neden Önemlidir?

Modern web uygulamalarında kullanıcı deneyimi (UX) oldukça kritiktir. Kullanıcıların karşılaştığı hataları doğru yönetmek:

• Uygulamanın profesyonel görünmesini sağlar
• Kullanıcı kaybını azaltır
• SEO açısından negatif etkileri minimize eder

Angular'da hata yönetimi genellikle 3 farklı katmanda ele alınır:

• Routing (404 sayfaları)
• Guard (403 yetki hataları)
• HTTP Interceptor (API hataları)

1 — Routing ile 404 (Sayfa Bulunamadı) Yönetimi

Kullanıcı tanımlı olmayan bir URL'e gittiğinde Angular bunu yakalayamazsa 404 sayfasına yönlendirme yapılmalıdır.

Wildcard Route Kullanımı

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'dashboard', component: DashboardComponent },

  { path: 'forbidden', component: ForbiddenComponent },

  // 404 - EN SONDA olmalı!
  { path: '**', component: NotFoundComponent }
];

Bu yapı sayesinde Angular, eşleşmeyen tüm URL'leri otomatik olarak NotFoundComponent'e yönlendirir.

2 — Guard ile 403 (Yetkisiz Erişim) Yönetimi

Kullanıcı bir sayfaya erişmeye çalıştığında gerekli yetkiye sahip değilse, bu durum 403 Forbidden olarak değerlendirilir.

Auth Guard Örneği

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {

  constructor(private router: Router) {}

  canActivate(): boolean {
    const hasPermission = false; // rol/token kontrolü

    if (!hasPermission) {
      this.router.navigate(['/forbidden']);
      return false;
    }

    return true;
  }
}

Route'a Guard Ekleme

{
  path: 'admin',
  component: AdminComponent,
  canActivate: [AuthGuard]
}

3 — HTTP Interceptor ile API Hatalarını Yakalama

Backend servislerden gelen hataları merkezi olarak yönetmek için HttpInterceptor kullanılır.

Error Interceptor Örneği

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {

  constructor(private router: Router) {}

  intercept(req: HttpRequest<any>, next: HttpHandler) {
    return next.handle(req).pipe(
      catchError((error: HttpErrorResponse) => {

        if (error.status === 403) {
          this.router.navigate(['/forbidden']);
        }

        if (error.status === 404) {
          this.router.navigate(['/not-found']);
        }

        return throwError(() => error);
      })
    );
  }
}

Bu yapı sayesinde uygulama genelinde tüm HTTP hataları tek noktadan yönetilebilir.

Angular Hata Yönetimi Akış Mantığı

Kullanıcı URL'e gider
        │
        ▼
Route var mı?
   ├─ Hayır → NotFoundComponent (404)
   └─ Evet
        │
        ▼
Guard var mı?
   ├─ Evet → Yetki kontrolü
   │         ├─ Başarısız → ForbiddenComponent (403)
   │         └─ Başarılı → Component yüklenir
   └─ Hayır → Component yüklenir
        │
        ▼
HTTP isteği
        │
        ▼
Interceptor → Hata varsa yönlendir

SEO ve UX Açısından Öneriler

• 404 sayfasında kullanıcıyı ana sayfaya yönlendiren link bulundurun
• 403 sayfasında yetki bilgisi veya login yönlendirmesi verin
• Hata sayfalarında sade ve açıklayıcı mesajlar kullanın
• Google index için soft 404 hatalarından kaçının

Sık Sorulan Sorular

Angular'da 404 hatası nasıl yakalanır?

Routing modülünde ** wildcard route kullanılarak tüm eşleşmeyen URL'ler yakalanır.

403 hatası frontend'de mi backend'de mi yönetilir?

Her ikisinde de yönetilmelidir. Frontend guard ile, backend ise gerçek güvenlik kontrolünü yapmalıdır.

Interceptor kullanmak zorunlu mu?

Zorunlu değildir ancak büyük projelerde hata yönetimini merkezi hale getirdiği için önerilir.

4 — Angular Build ve Nginx Üzerinde 403/404 Yönetimi

Angular uygulamaları ng build komutu ile derlendiğinde, çıktı dosyaları dist/ klasörüne oluşturulur. Nginx genellikle bu klasörü root olarak kullanır.

Build Çıktısı

dist/
  your-app/
    index.html        ✅ Angular uygulaması buradan çalışır
    main.js
    styles.css
    ...

Problem: Static 403 Sayfası Yok

Eğer Nginx tarafında error_page ile statik bir HTML göstermek istiyorsanız, bu dosyayı manuel olarak eklemeniz gerekir.

Çözüm 1 — assets Klasörünü Kullan

Statik hata sayfasını Angular projesindeki assets klasörüne koyabilirsiniz:

src/
  assets/
    forbidden.html
  index.html

angular.json içinde assets tanımı varsa bu dosya otomatik build'e dahil edilir:

"assets": [
  "src/favicon.ico",
  "src/assets"
]

Build Sonucu

dist/
  your-app/
    index.html
    assets/
      forbidden.html  ✅ artık erişilebilir

Nginx Konfigürasyonu (Statik Sayfa)

error_page 403 /assets/forbidden.html;

Bu yaklaşımda Nginx doğrudan statik HTML dosyasını döner.

Çözüm 2 — Angular Route'a Yönlendirme (Önerilen)

En temiz ve modern yaklaşım, Nginx'ten Angular route'una yönlendirme yapmaktır. Böylece ekstra HTML dosyası oluşturmanıza gerek kalmaz.

error_page 403 =302 /forbidden;

Neden Bu Yöntem Daha İyi?

• Tek bir entry point (index.html) kullanılır
• SPA (Single Page Application) mantığı korunur
• Ekstra dosya yönetimi gerekmez
• Daha temiz ve sürdürülebilir yapı sağlar