Móc vòng đời 'errorCaptured' của Vue
Ví dụ
Sử dụng móc vòng đời errorCaptured
để phát hiện lỗi từ thành phần con và tạo cảnh báo cho người dùng.
<script>
export default {
errorCaptured() {
alert("An error occurred");
}
}
</script>
Chạy ví dụ »Xem thêm ví dụ dưới đây.
Định nghĩa và cách sử dụng
Móc vòng đời errorCaptured
được gọi khi xảy ra lỗi trong thành phần con/thành phần con cháu.
Móc này có thể được sử dụng để xử lý lỗi, ghi nhật ký hoặc hiển thị lỗi cho người dùng.
Khi sử dụng hook errorCaptured
, điều quan trọng là không kích hoạt kết xuất thành phần phát sinh lỗi vì điều đó rất có thể sẽ gây ra vòng lặp vô hạn.
Thông tin về lỗi có sẵn cho chúng ta dưới dạng ba đối số trong hàm errorCaptured()
:
- Lỗi
- Thành phần gây ra lỗi
- Loại nguồn lỗi
Hành vi mặc định đối với một lỗi xảy ra là lan truyền hoặc 'bung lên' từ thành phần đã xảy ra lỗi. Một lỗi xảy ra trong một thành phần sẽ di chuyển lên thành phần chính và tiếp tục di chuyển lên cao hơn, và cuối cùng kết thúc dưới dạng thông báo lỗi trong bảng điều khiển.
Bằng cách chạy return false;
từ bên trong hàm errorCaptured()
, lỗi sẽ không xuất hiện ở thành phần chính (dừng lan truyền) và lỗi cũng sẽ không xuất hiện dưới dạng thông báo lỗi trong bảng điều khiển.
Việc xử lý lỗi cũng có thể được thiết lập bằng hàm app.config.errorHandler
.
Thêm ví dụ
ví dụ 1
Sử dụng móc vòng đời errorCaptured
để bắt lỗi và ghi thông tin về lỗi vào bảng điều khiển.
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>
Chạy ví dụ »Ví dụ 2
Sử dụng móc vòng đời errorCaptured
với return false;
để ngăn chặn lỗi lan truyền.
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>
Chạy ví dụ »Trang liên quan
Hướng dẫn về Vue: Móc vòng đời của Vue
Hướng dẫn về Vue: Hook 'errorCaptured'