Hook Siklus Hidup onErrorCaptured
Menangkap error dari komponen anak, mengembalikan false untuk menghentikan propagasi, serta objek error.
Hook Siklus Hidup onErrorCaptured adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.
Menangkap Kesalahan dalam Komponen
Vue menyediakan kait siklus hidup onErrorCaptured untuk menangkap kesalahan yang dilemparkan oleh komponen turunan. Kait ini memungkinkan komponen induk mencegat kegagalan dari subpohonnya.
Bentuk Parameter Kait
onErrorCaptured menerima tiga argumen: kesalahan, instans komponen yang melemparkannya, dan string info yang menjelaskan lokasi terjadinya.
import { onErrorCaptured } from "vue";
onErrorCaptured((err, instance, info) => {
// handle it
});Argumen err
Argumen pertama adalah objek kesalahan yang dilemparkan—biasanya instans Error dengan pesan dan tumpukan yang dapat Anda catat atau tampilkan.
onErrorCaptured((err) => {
console.error("Captured:", err.message);
});Argumen instance
Argumen kedua adalah instans komponen yang memunculkan kesalahan, berguna untuk penelusuran kesalahan atau menambahkan konteks ke laporan Anda.
onErrorCaptured((err, instance) => {
console.log("From component:", instance);
});Argumen info
Argumen ketiga adalah string yang memberi tahu siklus hidup atau operasi mana yang memicu kesalahan—misalnya "fungsi render", "fungsi setup", atau kait tertentu.
onErrorCaptured((err, instance, info) => {
console.log("Vue context:", info);
});Hanya Kesalahan Komponen Turunan
Yang penting, onErrorCaptured menangkap kesalahan dari komponen turunan, bukan dari setup atau perenderan komponen itu sendiri. Tempatkan kait ini pada leluhur kode yang ingin Anda lindungi.
Menghentikan Propagasi
Secara bawaan, kesalahan yang tertangkap tetap merambat ke penangan kesalahan leluhur dan penangan global. Kembalikan false untuk menghentikannya agar tidak berlanjut.
onErrorCaptured((err) => {
reportError(err);
return false; // do not propagate
});Mengapa Menghentikan Propagasi
Mengembalikan false membatasi kesalahan secara lokal—berguna saat komponen ini sepenuhnya menangani kegagalan, misalnya dengan menampilkan tampilan cadangan, dan tidak ingin penangan global ikut dipicu.
Membiarkannya Merambat
Jika Anda ingin penangan tingkat lebih tinggi (atau penangan global) juga melihat kesalahan tersebut, jangan kembalikan false. Kait ini kemudian mencatatnya secara lokal dan membiarkan kesalahan terus merambat ke atas.
onErrorCaptured((err) => {
logLocally(err);
// no return -> still propagates
});Penggunaan Praktis
Penggunaan yang umum adalah menggabungkan pencatatan dengan penanda pemulihan. Atur penanda reaktif untuk menampilkan tampilan cadangan sambil melaporkan kesalahan untuk keperluan diagnosis.
const failed = ref(false);
onErrorCaptured((err) => {
failed.value = true;
report(err);
return false;
});Catatan tentang Asinkron
onErrorCaptured menangkap kesalahan dalam perenderan turunan, siklus hidup, dan penangan sinkron. Beberapa kesalahan asinkron (penolakan promise yang tidak tertangani) lebih baik ditangani pada tingkat global—hal ini akan dibahas nanti.
Pemeriksaan Singkat
Apa yang dilakukan dengan mengembalikan false dari onErrorCaptured?
Ringkasan
Anda telah mempelajari bahwa onErrorCaptured((err, instance, info)) menangkap kesalahan dari komponen turunan. String info memberikan konteks siklus hidup, dan mengembalikan false menghentikan propagasi agar komponen dapat menangani kegagalan secara lokal.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Hook Siklus Hidup onErrorCaptured” gratis?
Ya — teks lengkap “Hook Siklus Hidup onErrorCaptured” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Hook Siklus Hidup onErrorCaptured”?
Menangkap error dari komponen anak, mengembalikan false untuk menghentikan propagasi, serta objek error. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Vue Academy?
Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “Hook Siklus Hidup onErrorCaptured” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?
Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Hook Siklus Hidup onErrorCaptured
- Komponen Error Boundary
- app.config.errorHandler untuk Error Global
- Penanganan Error Asinkron dalam Composable