Error boundaries (konseptuelt) uten rammeverk
Lag små error boundaries i ren JS: try/catch rundt risikabel kode, wrapper-hjelpere, async try/catch, reserveverdier og minimal logging.
Error boundaries (konseptuelt) uten rammeverk er en gratis leksjon i JavaScript Academy på CoddyKit. Dette er leksjon 3 av 3. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i JavaScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i JavaScript Academy inneholder totalt 3 leksjoner.
Helhetsbildet
Mål: Hindre at én feil bryter hele skjermbildet.
- Bruk try/catch rundt risikable steder
- Legg til en liten runSafe-hjelper
- Håndter også async med try/catch
- Returner fallback-verdier og logg kort
Lokal grense: parsing
Pakk bare inn det risikable trinnet (JSON.parse). Returner et enkelt fallback-objekt ved feil.
// Try/catch boundary: parse user JSON with a fallback
function safeParseUser(json) {
try {
const obj = JSON.parse(json);
// minimal validation
if (!obj || typeof obj.name !== "string") {
return { name: "Guest" };
}
return { name: obj.name };
} catch (err) {
// fallback on parse error
return { name: "Guest" };
}
}
console.log("ok:", safeParseUser("{\"name\":\"Ayla\"}"));
console.log("bad:", safeParseUser("{oops}"));
runSafe-hjelper
Lag en liten hjelper og bruk den på nytt. Hold loggene korte, og unngå å lekke hemmeligheter.
// A tiny boundary helper for sync functions
function runSafe(fn, fallback) {
try {
return fn();
} catch (e) {
// log minimal info for beginners
console.log("error:", String(e));
return fallback;
}
}
// Use it
const resultOk = runSafe(function () {
return 2 + 2;
}, 0);
const resultFail = runSafe(function () {
// simulate crash
throw new Error("boom");
}, 0);
console.log("ok:", resultOk, "fail:", resultFail);
Asynkron grense
For async-arbeid bruker du try/catch rundt await og returnerer en fallback-streng eller -verdi.
// Async boundary: try/catch inside an async function
async function fetchNameFake(id) {
// simulate failure for odd ids
if (id % 2 === 1) {
throw new Error("not found");
}
return "Ayla";
}
async function loadName(id) {
try {
const name = await fetchNameFake(id);
return name;
} catch (e) {
console.log("async error:", String(e));
return "Guest";
}
}
(async function () {
console.log("even:", await loadName(2));
console.log("odd :", await loadName(3));
})();
Isoler risikoen
Ikke pakk inn hele appen. Isoler det risikable trinnet slik at en feil ikke blokkerer alt.
// Boundary only around the risky step, rest continues
function renderCard(userJson) {
// boundary: parse
const user = safeParseUser(userJson);
// rest of rendering can continue with fallback
return "Hello " + user.name;
}
console.log(renderCard("{\"name\":\"Lina\"}"));
console.log(renderCard("{broken}")); // still renders with fallback
Vaner ved grenser
Sjekkliste:
- Plasser en liten try/catch rundt risikable kall.
- Returner en liten fallback-verdi.
- Logg kort (ingen hemmeligheter).
- Gjenta mønsteret for async-kall.
Grunnleggende quiz om feilgrenser
Hurtigsjekk: Feilgrense i vanlig JS.
Oppsummering
Oppsummering: Legg til lokal try/catch rundt risikabel kode, bruk en runSafe-hjelper, håndter async med try/catch, og tilby fallback-verdier slik at skjermbildet fortsetter å fungere.
Lær deg JavaScript med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 59
- Leksjoner
- 200
Ofte stilte spørsmål
Er leksjonen «Error boundaries (konseptuelt) uten rammeverk» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien JavaScript Academy, inkludert «Error boundaries (konseptuelt) uten rammeverk», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i JavaScript Academy inneholder totalt 3 leksjoner.
Hva lærer jeg i «Error boundaries (konseptuelt) uten rammeverk»?
Lag små error boundaries i ren JS: try/catch rundt risikabel kode, wrapper-hjelpere, async try/catch, reserveverdier og minimal logging. Du øver på JavaScript Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med JavaScript Academy?
Ingen tidligere erfaring er nødvendig. JavaScript Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 3.
Hvor lang tid tar leksjonen «Error boundaries (konseptuelt) uten rammeverk»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne JavaScript Academy-leksjonen?
Ja. Alle JavaScript Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Inputvalidering og det grunnleggende om escaping
- Trygg sammenslåing av objekter; freezing og sealing
- Error boundaries (konseptuelt) uten rammeverk