errorCaptured

Misol

Bola komponentdagi xatoni ushlash va foydalanuvchiga ogohlantirish chiqarish uchun errorCaptured lifecycle hook’idan foydalanish.

<script>
export default {
  errorCaptured() {
    alert("An error occurred");
  }
}
</script>

Misolni ishga tushirish »

Quyida ko‘proq misollarni ko‘ring.

Ta’rif va qo‘llanilishi

errorCaptured lifecycle hook’i bola/avlod komponentda xatolik yuz berganda chaqiriladi.

Ushbu hook xatolarni qayta ishlash (error handling), log yozish yoki xatoni foydalanuvchiga ko‘rsatish uchun ishlatilishi mumkin.

errorCaptured hook’idan foydalanganda xato kelib chiqqan komponentni render qilishni ishga tushirmaslik muhim, chunki bu katta ehtimol bilan cheksiz siklga olib keladi.

Xato haqidagi ma’lumot biz uchun errorCaptured() funksiyasida uchta argument sifatida mavjud:

Xato
Xatoni keltirib chiqargan komponent
Xato manbai turi

Yuzaga kelgan xato uchun standart xatti-harakat — xato sodir bo‘lgan komponentdan yuqoriga tarqalish (propagation), ya’ni "bubble up" bo‘lishdir. Komponentda yuzaga kelgan xato ota komponentga o‘tadi, so‘ng yana yuqoriga ko‘tarilishda davom etadi va oxir-oqibat konsolda xato xabari sifatida chiqadi.

errorCaptured() funksiyasi ichida return false; ni bajarsak, xato ota komponentga yetib bormaydi (tarqalish to‘xtaydi) va konsolda xato xabari sifatida ham chiqmaydi.

Xatolarni qayta ishlashni app.config.errorHandler funksiyasi yordamida ham sozlash mumkin.

Ko‘proq misollar

1-misol

Xatoni ushlash va xato haqidagi ma’lumotni konsolga yozish uchun errorCaptured lifecycle hook’idan foydalanish.

App.vue:

<template>
  <h1>The 'errorCaptured' Lifecycle Hook</h1>
  <p>Whenever there is an error in a child component, the errorCaptured() function is called on the parent.</p>
  <p>Open the browser console to see the captured error details.</p>
  <div>
    <comp-one></comp-one>
  </div>
</template>

<script>
export default {
  errorCaptured(error,compInst,errorInfo) {
    console.log("error: ", error);
    console.log("compInst: ", compInst);
    console.log("errorInfo: ", errorInfo);
  }
}
</script>

<style>
#app > div {
  border: dashed black 1px;
  border-radius: 10px;
  padding: 10px;
  margin-top: 10px;
  background-color: lightgreen;
}
</style>

ComOne.vue:

<template>
  <h2>Component</h2>
  <p>This is the component</p>
  <button @click="generateError">Generate Error</button>
</template>

<script>
export default {
  methods: {
    generateError() {
      this.$refs.objEl.innerHTML = "hi";
    }
  }
}
</script>

Misolni ishga tushirish »

2-misol

Xatoning tarqalishini to‘xtatish uchun errorCaptured lifecycle hook’idan return false; bilan foydalanish.

App.vue:

<template>
  <h1>The 'errorCaptured' Lifecycle Hook</h1>
  <p>Whenever there is an error in a child component, the errorCaptured() function is called on the parent.</p>
  <p>Open the browser console to see the captured error details.</p>
  <div>
    <comp-one></comp-one>
  </div>
</template>

<script>
export default {
  errorCaptured(error,compInst,errorInfo) {
    console.log("error: ", error);
    console.log("compInst: ", compInst);
    console.log("errorInfo: ", errorInfo);
    return false;
  }
}
</script>

<style>
#app > div {
  border: dashed black 1px;
  border-radius: 10px;
  padding: 10px;
  margin-top: 10px;
  background-color: lightgreen;
}
</style>

ComOne.vue:

<template>
  <h2>Component</h2>
  <p>This is the component</p>
  <button @click="generateError">Generate Error</button>
</template>

<script>
export default {
  methods: {
    generateError() {
      this.$refs.objEl.innerHTML = "hi";
    }
  }
}
</script>

Misolni ishga tushirish »

Tegishli sahifalar

Vue qo‘llanmasi: Vue lifecycle hook’lari

Vue qo‘llanmasi: "errorCaptured" hook’i

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish