Error boundaries (conceptueel) zonder frameworks
Maak kleine error boundaries in gewone JS: try/catch rond risicovolle code, wrapper-hulpfuncties, async try/catch, fallbackwaarden en minimale logging
Error boundaries (conceptueel) zonder frameworks is een gratis JavaScript Academy-les op CoddyKit. Dit is les 3 van 3. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject JavaScript Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus JavaScript Academy bevat in totaal 3 lessen.
Overzicht
Doel: Voorkomen dat één fout het hele scherm laat uitvallen.
- Gebruik try/catch rond risicovolle plekken
- Voeg een kleine helper runSafe toe
- Handel async ook af met try/catch
- Geef terugvalwaarden terug en registreer kort
Lokale grens: parseren
Wikkel alleen de risicovolle stap (JSON.parse) in. Geef bij fouten een eenvoudig terugvalobject terug.
// 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}"));
Helper runSafe
Maak een kleine hulpfunctie en gebruik die opnieuw. Houd registraties kort en voorkom dat je geheimen lekt.
// 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);
Grens voor async
Gebruik voor async-werk try/catch rond await en geef een terugvaltekenreeks of terugvalwaarde terug.
// 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));
})();
Het risico isoleren
Wikkel niet de hele app in. Isoleer de risicovolle stap, zodat een fout niet alles blokkeert.
// 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
Goede gewoonten voor grenzen
Controlelijst:
- Plaats een kleine try/catch rond risicovolle aanroepen.
- Geef een kleine terugvalwaarde terug.
- Registreer kort (geen geheimen).
- Herhaal het patroon voor async-aanroepen.
Kennistoets over de basis van foutgrenzen
Korte controle: foutgrens in gewone JavaScript.
Samenvatting
Samenvatting: Voeg lokale try/catch toe rond risicovolle code, gebruik een helper runSafe, handel async af met try/catch en geef terugvalwaarden om ervoor te zorgen dat het scherm blijft werken.
Leer JavaScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 59
- Lessen
- 200
Veelgestelde vragen
Is de les “Error boundaries (conceptueel) zonder frameworks” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad JavaScript Academy, waaronder “Error boundaries (conceptueel) zonder frameworks”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus JavaScript Academy bevat in totaal 3 lessen.
Wat leer ik in “Error boundaries (conceptueel) zonder frameworks”?
Maak kleine error boundaries in gewone JS: try/catch rond risicovolle code, wrapper-hulpfuncties, async try/catch, fallbackwaarden en minimale logging Je oefent met JavaScript Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met JavaScript Academy te beginnen?
Ervaring vooraf is niet nodig. JavaScript Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 3.
Hoe lang duurt de les “Error boundaries (conceptueel) zonder frameworks”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over JavaScript Academy?
Ja. Elke les over JavaScript Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Invoervalidatie en de basis van escapen
- Objecten veilig samenvoegen; bevriezen en verzegelen
- Error boundaries (conceptueel) zonder frameworks