Komponen Error Boundary
Membangun komponen pembungkus ErrorBoundary dengan slot fallback dan tampilan error.
Komponen Error Boundary adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 2 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.
Apa Itu Batas Kesalahan
Batas kesalahan adalah komponen yang dapat digunakan kembali untuk membungkus sebagian UI, menangkap kesalahan dari dalamnya, dan menampilkan tampilan cadangan alih-alih membiarkan seluruh aplikasi rusak.
Gagasan Inti
Batas tersebut menyimpan penanda hasError. Saat nilainya false, batas merender komponen anak; setelah kesalahan tertangkap, nilainya berubah menjadi true dan batas merender tampilan cadangan.
import { ref } from "vue";
const hasError = ref(false);Menangkap Kesalahan
Gunakan onErrorCaptured untuk mengatur penanda dan menghentikan propagasi, sehingga batas tersebut sepenuhnya menangani kegagalan.
import { onErrorCaptured } from "vue";
onErrorCaptured((err) => {
hasError.value = true;
return false;
});Menyimpan Detail Kesalahan
Tangkap juga kesalahannya agar tampilan cadangan dapat menampilkan pesan atau Anda dapat menawarkan percobaan ulang.
const error = ref(null);
onErrorCaptured((err) => {
hasError.value = true;
error.value = err;
return false;
});Struktur Templat
Render slot bawaan (komponen anak) saat keadaan normal, dan slot cadangan saat terjadi kesalahan.
<template>
<slot v-if="!hasError" />
<slot v-else name="fallback" :error="error" />
</template>Slot Bawaan Menampilkan Komponen Anak
Slot bawaan berisi UI yang dilindungi. Dalam kondisi normal, batas tersebut tidak terlihat—batas hanya meneruskan komponen anak.
<ErrorBoundary>
<RiskyWidget />
</ErrorBoundary>Slot Cadangan Tampil Saat Terjadi Kesalahan
Sediakan slot bernama fallback untuk UI kesalahan. Slot tersebut dapat menerima kesalahan melalui properti slot dengan cakupan tertentu.
<ErrorBoundary>
<RiskyWidget />
<template #fallback="{ error }">
<p>Something went wrong: {{ error.message }}</p>
</template>
</ErrorBoundary>Menambahkan Percobaan Ulang
Ekspos reset agar pengguna dapat memulihkan keadaan. Sebuah metode menghapus penanda dan merender ulang komponen anak.
function reset() {
hasError.value = false;
error.value = null;
}Percobaan Ulang di Tampilan Cadangan
Teruskan reset melalui slot dengan cakupan tertentu agar tampilan cadangan dapat menyediakan tombol Coba Lagi.
<slot v-else name="fallback" :error="error" :reset="reset" />Cadangan Bawaan
Berikan konten bawaan yang masuk akal pada slot cadangan agar batas tersebut tetap berfungsi meskipun tidak ada cadangan khusus yang diberikan.
<slot name="fallback" :error="error">
<p>An error occurred.</p>
</slot>Mengapa Batas Penting
Tanpa batas, satu widget yang gagal dapat membuat seluruh tampilan terhenti. Batas mengisolasi kegagalan sehingga bagian app lainnya tetap bekerja—pola ketahanan yang penting.
Pemeriksaan Singkat
Bagaimana batas kesalahan menentukan apa yang harus dirender?
Ringkasan
Anda telah membuat batas kesalahan: referensi hasError, onErrorCaptured yang menetapkan nilainya dan mengembalikan false, slot bawaan untuk anak, serta slot cadangan (dengan kesalahan dan fungsi pengaturan ulang) yang ditampilkan saat kesalahan terjadi—mengisolasi kegagalan dari bagian app lainnya.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Komponen Error Boundary” gratis?
Ya — teks lengkap “Komponen Error Boundary” 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 “Komponen Error Boundary”?
Membangun komponen pembungkus ErrorBoundary dengan slot fallback dan tampilan 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 2 dari 4.
Berapa lama pelajaran “Komponen Error Boundary” 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