Error boundaries (conceptual) without frameworks
Create tiny error boundaries in plain JS: try/catch around risky code, wrapper helpers, async try/catch, fallback values, and minimal logging.
Big picture
Goal: Stop one failure from breaking the whole screen.
- Use try/catch around risky spots
- Add a tiny runSafe helper
- Handle async with try/catch too
- Return fallbacks and log briefly
Local boundary: parsing
Wrap only the risky step (JSON.parse). Return a simple fallback object on failure.
// 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}"));
All lessons in this course
- Input validation, escaping basics
- Safe object merging; freezing & sealing
- Error boundaries (conceptual) without frameworks