errorCaptured (errorCaptured)
هوک «errorCaptured در ویو (Vue)» وقتی در فرزند خطا رخ دهد اجرا می شود. «هوک (Hook)» یعنی زمان آماده اجرای کد. اینجا می توانی خطا را گزارش دهی یا پیام نشان دهی. اما مراقب رندر دوباره باش. چون ممکن است حلقه بی پایان بسازد.
تعریف و کاربرد
این هوک هنگام خطا در یک کامپوننتِ فرزند یا نوادگان آن فراخوانی می شود. برای مدیریت خطا، ثبت گزارش، یا نمایش پیام مناسب است. به طور پیش فرض، خطا به والدین «حباب» می شود و در نهایت به کنسول می رسد.
نمونه کد پایه
یک پیام ساده هنگام رخداد خطا در فرزند نمایش بده.
<script>
export default {
errorCaptured() {
alert("An error occurred");
}
}
<\/script>
آرگومان های تابع
تابع errorCaptured(error, compInst, errorInfo) سه ورودی دارد: خود خطا، نمونه کامپوننتِ خطاده، و نوع منبع خطا. با این اطلاعات تصمیم بگیر چه کنی.
جلوگیری از انتشار خطا
اگر داخل errorCaptured مقدار false برگردانی، خطا دیگر به والدین نمی رود و به کنسول هم نمی رسد. اما از تریگرِ رندر مجدد بپرهیز. چون می تواند چرخه بی پایان بسازد.
گام های عملی
- محل ثبت خطا را مشخص کن. کنسول یا سرور.
- تابع errorCaptured را در والد بنویس.
- در صورت نیاز return false را برگردان.
- از رندر دوباره منبع خطا جلوگیری کن.
مثال 1: ثبت جزئیات خطا
جزئیات خطا را در کنسول چاپ کن تا عیب یابی آسان شود.
<template>
<h1>The 'errorCaptured' Lifecycle Hook</h1>
<p>Open the console to see 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>
<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>
مثال 2: متوقف کردن حباب خطا
با return false، خطا دیگر بالا نمی رود و به کنسول نمی رسد.
<template>
<h1>The 'errorCaptured' Lifecycle Hook</h1>
<p>The errorCaptured() runs on parent when child fails.</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>
<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>
نکته ها
نکته: از رندر مجدد همان منبع خطا بپرهیز. حلقه خطا می سازد.
نکته: می توانی از app.config.errorHandler نیز برای مدیریت کلی استفاده کنی.
پیوندها
برای پیش از حذف، صفحه beforeUnmount را ببین. همچنین صفحه unmounted را بررسی کن. برای مطالعه «errorCaptured در ویو» همین صفحه مرجع توست.
جمع بندی سریع
- errorCaptured هنگام خطای فرزند اجرا می شود.
- سه ورودی مفید دارد.
- با return false حباب متوقف می شود.
- از رندر دوباره منبع خطا بپرهیز.
- برای سیاست کلی از errorHandler استفاده کن.