Hata Sınırı Bileşenleri
fallback slot'u ve hata gösterimi içeren bir ErrorBoundary sarmalayıcı bileşeni oluşturma.
Hata Sınırı Bileşenleri, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 2. 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, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.
Hata Sınırı Nedir
Hata sınırı, kullanıcı arayüzünüzün bir bölümünü saran, içindeki hataları yakalayan ve tüm uygulamanın bozulmasına izin vermek yerine bir geri dönüş gösteren yeniden kullanılabilir bir bileşendir.
Temel Fikir
Sınır, bir hasError bayrağı tutar. Bayrak yanlışken alt bileşenlerini oluşturur; bir hata yakalandığında doğruya çevirir ve bir geri dönüş oluşturur.
import { ref } from "vue";
const hasError = ref(false);Hatayı Yakalama
Bayrağı ayarlamak ve yayılımı durdurmak için onErrorCaptured kullanın; böylece hata sınırı, hatanın tüm sorumluluğunu üstlenir.
import { onErrorCaptured } from "vue";
onErrorCaptured((err) => {
hasError.value = true;
return false;
});Hata Ayrıntılarını Saklama
Geri dönüşün bir ileti görüntüleyebilmesi veya yeniden deneme seçeneği sunabilmeniz için hatanın kendisini de yakalayın.
const error = ref(null);
onErrorCaptured((err) => {
hasError.value = true;
error.value = err;
return false;
});Şablon Yapısı
Durum sağlıklıyken varsayılan yuvayı (alt bileşenleri), hata oluştuğunda ise geri dönüş yuvasını oluşturun.
<template>
<slot v-if="!hasError" />
<slot v-else name="fallback" :error="error" />
</template>Varsayılan Yuva Alt Bileşenleri Gösterir
Varsayılan yuva, korunan kullanıcı arayüzünü barındırır. Normal koşullarda sınır görünmez; yalnızca alt bileşenleri olduğu gibi aktarır.
<ErrorBoundary>
<RiskyWidget />
</ErrorBoundary>Geri Dönüş Yuvası Hata Durumunda Gösterilir
Hata arayüzü için adlandırılmış bir fallback yuvası sağlayın. Bu yuva, kapsamlı yuva özelliği aracılığıyla hatayı alabilir.
<ErrorBoundary>
<RiskyWidget />
<template #fallback="{ error }">
<p>Something went wrong: {{ error.message }}</p>
</template>
</ErrorBoundary>Yeniden Deneme Ekleme
Kullanıcıların kurtarabilmesi için bir reset işlemini dışa açın. Bir yöntem bayrağı temizler ve alt bileşenleri yeniden oluşturur.
function reset() {
hasError.value = false;
error.value = null;
}Geri Dönüşte Yeniden Deneme
Geri dönüşün Yeniden Dene düğmesi sunabilmesi için reset değerini kapsamlı yuvadan geçirin.
<slot v-else name="fallback" :error="error" :reset="reset" />Varsayılan Geri Dönüş
Sınırın, özel bir geri dönüş içeriği sağlanmasa bile çalışması için geri dönüş yuvasına mantıklı bir varsayılan içerik verin.
<slot name="fallback" :error="error">
<p>An error occurred.</p>
</slot>Sınırlar Neden Önemlidir
Sınırlar olmadan, hata veren tek bir widget tüm görünümü çökertir. Sınırlar hataları birbirinden yalıtır ve uygulamanın geri kalanının çalışmaya devam etmesini sağlar; bu, dayanıklılık için temel bir örüntüdür.
Hızlı Kontrol
Bir hata sınırı neyin oluşturulacağına nasıl karar verir?
Özet
Bir hata sınırı oluşturdunuz: bir hasError ref'i, bunu ayarlayan ve false döndüren onErrorCaptured, alt bileşenler için bir varsayılan yuva ve bir hata oluştuğunda gösterilen, hatayı ve sıfırlama işlevini içeren bir geri dönüş yuvası. Böylece hatalar uygulamanın geri kalanından yalıtılır.
Sıkça Sorulan Sorular
“Hata Sınırı Bileşenleri” dersi ücretsiz mi?
Evet — “Hata Sınırı Bileşenleri” 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 Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.
“Hata Sınırı Bileşenleri” dersinde ne öğreneceğim?
fallback slot'u ve hata gösterimi içeren bir ErrorBoundary sarmalayıcı bileşeni oluşturma. Vue 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.
Vue Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Vue 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 2. dersidir.
“Hata Sınırı Bileşenleri” 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 Vue Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Vue 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
- onErrorCaptured Yaşam Döngüsü Kancası
- Hata Sınırı Bileşenleri
- Genel Hatalar için app.config.errorHandler
- Composable'larda Asenkron Hata Yönetimi