0Pricing
Vue Academy · Ders

Genel Hatalar için app.config.errorHandler

Genel hata işleyicisi, Sentry/Datadog'a günlük kaydı gönderme ve ortama duyarlı hata gösterimi.

Genel Hatalar için app.config.errorHandler, CoddyKit'te ücretsiz bir Vue 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, 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.

Genel Hata İşleyicisi

Vue, uygulamanın herhangi bir yerinde oluşup yerel olarak işlenmemiş hataları yakalayan tek bir işlev olan app.config.errorHandler'ı sunar. Bu, son savunma hattınızdır.

İşleyici İmzası

onErrorCaptured ile aynı üç bağımsız değişkeni alır: hata, bileşen örneği ve bilgi dizesi.

app.config.errorHandler = (err, instance, info) => {
  // global handling
};

Kurulum

Bağlamadan önce, giriş dosyanızdaki uygulama örneğinde yapılandırın.

const app = createApp(App);
app.config.errorHandler = (err, instance, info) => {
  console.error(err, info);
};
app.mount("#app");

İşlenmemiş Hataları Yakalama

Tüm uygulamadaki bileşen oluşturma işlemlerinden, yaşam döngüsü kancalarından, izleyicilerden ve olay işleyicilerinden gelen hataları yakalar; buna yerel onErrorCaptured kancalarının ötesine yayılan hatalar da dahildir.

Üretimde Sentry'ye Bildirme

Üretimde, kullanıcıların karşılaştığı hatalardan haberdar olabilmeniz için hataları Sentry gibi bir izleme hizmetine iletin.

app.config.errorHandler = (err, instance, info) => {
  if (import.meta.env.PROD) {
    Sentry.captureException(err, { extra: { info } });
  }
};

Geliştirme Sırasında Ayrıntılı Günlük Kaydı

Geliştirme sırasında, hataları hızlıca ayıklamak için konsola daha ayrıntılı bilgiler kaydedin.

app.config.errorHandler = (err, instance, info) => {
  if (import.meta.env.DEV) {
    console.group("Vue error");
    console.error(err);
    console.log("info:", info, "instance:", instance);
    console.groupEnd();
  }
};

Ortama Göre Dallanma

Dayanıklı bir işleyici her ikisini de tek bir işlevde yapar: üretimde bildirim gönderir, geliştirme sırasında ayrıntılı günlük kaydı tutar.

app.config.errorHandler = (err, instance, info) => {
  if (import.meta.env.PROD) Sentry.captureException(err);
  else console.error("[Vue]", err, info);
};

Eşzamansız Hatalar

Genel işleyici, eşzamansız yaşam döngüsü kancaları ve izleyiciler içinde fırlatılan hataları da yakalar. Vue dışında oluşan ham, işlenmemiş promise reddedilmeleri için ayrıca bir window dinleyicisi ekleyin.

window.addEventListener("unhandledrejection", (e) => {
  Sentry.captureException(e.reason);
});

Sınırlarla İlişkisi

Yerel sınırlar ve onErrorCaptured, hataları oluştukları yere yakın bir noktada işler ve sınırlar; genel işleyici ise kaçan her şey için güvenlik ağı görevi görür. İkisini birlikte kullanın.

Hataları Sessizce Yok Saymayın

Hataları gizleyen boş bir işleyici kullanmaktan kaçının. En azından her zaman günlük kaydı tutun veya bildirim gönderin; sessiz hatalar, hataları görünmez ve izlenmesi çok zor hâle getirir.

Bağlam Ekleme

Üretim hatalarını daha hızlı sınıflandırabilmek için raporları geçerli rota, kullanıcı kimliği veya uygulama sürümüyle zenginleştirin.

Sentry.captureException(err, {
  tags: { info },
  user: { id: currentUserId }
});

Hızlı Kontrol

app.config.errorHandler neyi işler?

Özet

app.config.errorHandler = (err, instance, info) => {} genel yakalayıcıdır: üretimde Sentry'ye bildirim gönderir, geliştirme sırasında ayrıntılı günlük kaydı tutar ve katmanlı, dayanıklı hata işleme için yerel sınırlarla birlikte kullanılır.

Sıkça Sorulan Sorular

“Genel Hatalar için app.config.errorHandler” dersi ücretsiz mi?

Evet — “Genel Hatalar için app.config.errorHandler” 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.

“Genel Hatalar için app.config.errorHandler” dersinde ne öğreneceğim?

Genel hata işleyicisi, Sentry/Datadog'a günlük kaydı gönderme ve ortama duyarlı hata gösterimi. 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 3. dersidir.

“Genel Hatalar için app.config.errorHandler” 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

  1. onErrorCaptured Yaşam Döngüsü Kancası
  2. Hata Sınırı Bileşenleri
  3. Genel Hatalar için app.config.errorHandler
  4. Composable'larda Asenkron Hata Yönetimi
← Vue Academy Sayfasına Dön