onErrorCaptured Yaşam Döngüsü Kancası
Alt bileşenlerden gelen hataları yakalama, yayılımı durdurmak için false döndürme ve hata nesneleri.
onErrorCaptured Yaşam Döngüsü Kancası, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 1. 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.
Bileşenlerde Hataları Yakalama
Vue, alt bileşenler tarafından oluşturulan hataları yakalamak için onErrorCaptured yaşam döngüsü kancasını sağlar. Bu kanca, bir üst bileşenin kendi alt ağacındaki hataları araya girerek yakalamasını sağlar.
Kancanın İmzası
onErrorCaptured üç bağımsız değişken alır: hata, hatayı oluşturan bileşen örneği ve hatanın nerede gerçekleştiğini açıklayan bir info dizesi.
import { onErrorCaptured } from "vue";
onErrorCaptured((err, instance, info) => {
// handle it
});err Bağımsız Değişkeni
İlk bağımsız değişken, fırlatılan hata nesnesidir; genellikle günlüğe yazabileceğiniz veya görüntüleyebileceğiniz bir ileti ve yığın içeren bir Error örneğidir.
onErrorCaptured((err) => {
console.error("Captured:", err.message);
});instance Bağımsız Değişkeni
İkinci bağımsız değişken, hatayı oluşturan bileşen örneğidir; hata ayıklama veya raporlarınıza bağlam ekleme açısından kullanışlıdır.
onErrorCaptured((err, instance) => {
console.log("From component:", instance);
});info Bağımsız Değişkeni
Üçüncü bağımsız değişken, hatayı hangi yaşam döngüsünün veya işleminin tetiklediğini belirten bir dizedir; örneğin “oluşturma işlevi”, “setup işlevi” veya belirli bir kanca.
onErrorCaptured((err, instance, info) => {
console.log("Vue context:", info);
});Yalnızca Alt Bileşen Hataları
Önemli bir nokta şudur: onErrorCaptured, bileşenin kendi kurulumundan veya oluşturmasından kaynaklanan hataları değil, alt bileşenlerdeki hataları yakalar. Kancayı, korumak istediğiniz kodun üst bileşenlerinden birine yerleştirin.
Yayılımı Durdurma
Varsayılan olarak yakalanan bir hata, üst bileşenlerdeki işleyicilere ve genel işleyiciye doğru yayılmayı sürdürür. Daha ileri gitmesini durdurmak için false döndürün.
onErrorCaptured((err) => {
reportError(err);
return false; // do not propagate
});Yayılım Neden Durdurulur
false döndürmek hatayı yerel olarak sınırlar; bu, bileşen hatayı tamamen ele aldığında (örneğin bir geri dönüş gösterdiğinde) ve genel işleyicinin de çalışmasını istemediğinde kullanışlıdır.
Yukarı Doğru Yayılmasına İzin Verme
Üst düzey işleyicilerin (veya genel işleyicinin) de hatayı görmesini istiyorsanız false döndürmeyin. Böylece kanca hatayı yerel olarak günlüğe yazar ve yukarı doğru ilerlemesine izin verir.
onErrorCaptured((err) => {
logLocally(err);
// no return -> still propagates
});Uygulamalı Bir Kullanım
Yaygın bir kullanım, günlüğe yazma ile kurtarma bayrağını birlikte kullanmaktır. Tanılama için hatayı bildirirken geri dönüş görüntülemek üzere reaktif bir bayrak ayarlayın.
const failed = ref(false);
onErrorCaptured((err) => {
failed.value = true;
report(err);
return false;
});Eşzamansız İşlemlerle İlgili Uyarılar
onErrorCaptured, alt bileşenlerin oluşturma, yaşam döngüsü ve eşzamanlı işleyicilerindeki hataları yakalar. Yakalanmamış vaat reddetmeleri gibi bazı eşzamansız hatalar genel düzeyde daha iyi ele alınır; bu konuya daha sonra değinilecektir.
Kısa Kontrol
onErrorCaptured içinden false döndürmek ne yapar?
Özet
onErrorCaptured((err, instance, info)) işlevinin alt bileşenlerdeki hataları yakaladığını öğrendiniz. info dizesi yaşam döngüsü bağlamını sağlar; false döndürmek ise yayılımı durdurarak bileşenin hatayı yerel olarak ele almasına olanak tanır.
Sıkça Sorulan Sorular
“onErrorCaptured Yaşam Döngüsü Kancası” dersi ücretsiz mi?
Evet — “onErrorCaptured Yaşam Döngüsü Kancası” 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.
“onErrorCaptured Yaşam Döngüsü Kancası” dersinde ne öğreneceğim?
Alt bileşenlerden gelen hataları yakalama, yayılımı durdurmak için false döndürme ve hata nesneleri. 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 1. dersidir.
“onErrorCaptured Yaşam Döngüsü Kancası” 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