Error Boundary -komponentit
ErrorBoundary-wrapper-komponentin rakentaminen fallback-slotilla ja virhenäytöllä
Error Boundary -komponentit on ilmainen Vue Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Vue Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Vue Academy-kurssilla on yhteensä 4 oppituntia.
Mikä on error boundary
Error boundary on uudelleenkäytettävä komponentti, joka ympäröi osan käyttöliittymästä, ottaa sen sisällä syntyvät virheet kiinni ja näyttää varanäkymän sen sijaan, että koko sovellus rikkoutuisi.
Perusajatus
Boundary ylläpitää hasError-lippua. Kun sen arvo on false, se renderöi lapsensa. Kun virhe on otettu kiinni, arvo vaihtuu trueksi ja boundary renderöi varanäkymän.
import { ref } from "vue";
const hasError = ref(false);Virheen kiinniottaminen
Käytä onErrorCaptured-koukkua lipun asettamiseen ja etenemisen pysäyttämiseen, jotta boundary hallitsee virheen kokonaan.
import { onErrorCaptured } from "vue";
onErrorCaptured((err) => {
hasError.value = true;
return false;
});Virheen tietojen tallentaminen
Tallenna myös itse virhe, jotta varanäkymä voi näyttää viestin tai voit tarjota uudelleenyritystä.
const error = ref(null);
onErrorCaptured((err) => {
hasError.value = true;
error.value = err;
return false;
});Mallineen rakenne
Renderöi oletusslotti (lapset), kun kaikki toimii oikein, ja fallback-slotti, kun virhe on tapahtunut.
<template>
<slot v-if="!hasError" />
<slot v-else name="fallback" :error="error" />
</template>Oletusslotti näyttää lapset
Oletusslotti sisältää suojatun käyttöliittymän. Normaalioloissa boundary on näkymätön – se vain välittää lapset eteenpäin.
<ErrorBoundary>
<RiskyWidget />
</ErrorBoundary>Fallback-slotti näkyy virheen yhteydessä
Tarjoa virhekäyttöliittymää varten nimetty fallback-slotti. Se voi vastaanottaa virheen scopatun slotin prop-ominaisuutena.
<ErrorBoundary>
<RiskyWidget />
<template #fallback="{ error }">
<p>Something went wrong: {{ error.message }}</p>
</template>
</ErrorBoundary>Uudelleenyrityksen lisääminen
Tarjoa reset-toiminto, jotta käyttäjät voivat palautua virheestä. Metodi tyhjentää lipun ja renderöi lapset uudelleen.
function reset() {
hasError.value = false;
error.value = null;
}Uudelleenyritys fallback-näkymässä
Välitä reset scopatun slotin kautta, jotta fallback-näkymä voi tarjota ”Yritä uudelleen” -painikkeen.
<slot v-else name="fallback" :error="error" :reset="reset" />Oletusarvoinen varasisältö
Anna fallback-slotille järkevä oletussisältö, jotta raja toimii myös silloin, kun mukautettua varasisältöä ei ole annettu.
<slot name="fallback" :error="error">
<p>An error occurred.</p>
</slot>Miksi rajat ovat tärkeitä
Ilman rajoja yhden widgetin kaatuminen voi kaataa koko näkymän. Rajat eristävät virheet, joten sovelluksen muu osa jatkaa toimintaansa – tämä on keskeinen vikasietoisuuden malli.
Pikatarkistus
Miten virheraja päättää, mitä renderöidään?
Kertaus
Rakensitte virherajan: hasError-refin, onErrorCaptured-käsittelijän, joka asettaa sen arvon ja palauttaa false, lapsille tarkoitetun oletusslotin sekä fallback-slotin, joka vastaanottaa virheen ja nollausfunktion ja näytetään virheen tapahtuessa. Näin virheet eristetään sovelluksen muusta osasta.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 42
- Oppitunnit
- 156
Usein kysytyt kysymykset
Onko oppitunti ”Error Boundary -komponentit” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Vue Academy-oppimispolun 3 oppituntia, myös oppitunnin “Error Boundary -komponentit”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Vue Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Error Boundary -komponentit”?
ErrorBoundary-wrapper-komponentin rakentaminen fallback-slotilla ja virhenäytöllä Harjoittelet Vue Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Vue Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Vue Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.
Kuinka kauan ”Error Boundary -komponentit”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Vue Academy-oppitunnilla?
Kyllä. Jokainen Vue Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- onErrorCaptured-elinkaarikoukku
- Error Boundary -komponentit
- app.config.errorHandler globaalien virheiden käsittelyyn
- Asynkronisten virheiden käsittely composableissa