@boundary ile hata sınırları

Angular şablonları, render etme ve değişiklik algılama sırasında oluşan çalışma zamanı hatalarını zarif bir şekilde ele almak için hata sınırlarını destekler.

Hata sınırları, tek bir bileşenin başarısız olmasının tüm uygulamayı çökertmesini önler ve kullanıcıya yedek bir arayüz göstermenin bir yolunu sunar.

@boundary ve @error ile hataları yakalama

@boundary bloğu şablonunuzun bir bölümünü sarar. Bu sınırın içindeki herhangi bir bileşen veya direktif, başlatma ya da değişiklik algılama sırasında bir hata fırlatırsa, framework hatayı yakalar ve bunun yerine @error bloğunu render eder.

@boundary {
  <app-risky-component />
} @error {
  <p>Something went wrong!</p>
}

Hata nesnesine erişme

Yakalanan hataya örtük $error değişkeni üzerinden erişebilirsiniz:

@boundary {
  <app-risky-component />
} @error {
  <p>Error occurred: {{ $error.message }}</p>
}

Sınırı sıfırlama

@error bloğunda örtük $reset fonksiyonunu çağırarak @boundary içeriğini yeniden render etmeyi deneyebilirsiniz. Bu fonksiyon çağrıldığında sınırın durumunu sıfırlar ve orijinal içeriği yeniden render etmeye çalışır.

@boundary {
  <app-flaky-component />
} @error {
  <p>Loading failed.</p>
  <button (click)="$reset()">Try again</button>
}

when ile koşullu hata yönetimi

Belirli hata türlerini koşullu olarak ele almak ve böylece farklı yedek arayüzler sunmak için when ifadelerini kullanabilirsiniz. Angular bu koşulu bir hata yakaladığında değerlendirir.

@boundary {
  <app-chart-dashboard />
} @error (let err; reset = $reset; when isRenderError(err)) {
  <p>Network issue. Check your connection.</p>
  <button (click)="reset()">Retry</button>
} @error {
  <p>An unexpected error occurred: {{ $error.message }}</p>
}

@error bloklarınızı en özelden en genele doğru sıralayın, çünkü Angular when ifadelerini sırayla değerlendirir ve true olarak değerlendirilen ilk bloğu kullanır. when ifadesi olmayan son bir @error bloğu, her şeyi yakalayan bir yedek görevi görür.

Global hata işleyici entegrasyonu

Bir sınır bir hata yakaladığında, Angular global ErrorHandler'ı yine de bilgilendirebilir. Yakalanan bu hataları hata izleme servisinize kaydetmek için özel ErrorHandler'ınızda isteğe bağlı onViewError kancasını uygulayabilirsiniz.

@Injectable()
export class MyErrorHandler implements ErrorHandler {
  handleError(error: any): void {
    // Yakalanmamış hataları ele al
  }

  onViewError(error: Error, details: ErrorDetails): void {
    // Bir @boundary tarafından yakalanan hataları ele al
    console.warn('Caught by boundary:', details.boundary);
    myErrorTrackingService.log(error);
  }
}

İçerik yansıtma

Bileşeniniz içerik yansıtma kullanıyorsa, <ng-content>'i bir @boundary ile sarmak yansıtılan içerikten gelen hataları yakalamaz. Bu içerik, onu alan bileşenin görünümüne değil, onu bildiren görünüme aittir.

Örneğin, aşağıdaki şablona sahip bir sarmalayıcı bileşen, içine yansıtılan bileşenlerden gelen hataları yakalamaz:

@boundary {
  <ng-content />
} @error {
  <p>Something went wrong!</p>
}

Bu hataları yakalamak için, üst şablonda sarmalayıcı bileşeni ve yansıtılan içeriğini bir @boundary ile sarın:

@boundary {
  <app-wrapper>
    <app-risky-component />
  </app-wrapper>
} @error {
  <p>Something went wrong!</p>
}

Dinamik görünümler ve programatik hata yönetimi

Hata yönetimi şablon sözdizimiyle sınırlı değildir. Bileşenleri veya gömülü görünümleri dinamik olarak oluşturuyorsanız, hataları ele almak için onError seçeneğini kullanabilirsiniz. Daha fazla bilgi için programatik render etme kılavuzundaki Render etme hatalarını ele alma bölümüne bakın.