Granice błędów (koncepcyjnie) bez frameworków
Tworzenie prostych granic błędów w czystym JS: try/catch wokół ryzykownego kodu, funkcje opakowujące, asynchroniczne try/catch, wartości zapasowe i minimalne logowanie
Granice błędów (koncepcyjnie) bez frameworków to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 3 z 3. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 3 lekcji w sumie.
Obraz całości
Cel: zapobiec temu, aby pojedyncza awaria przerwała działanie całego ekranu.
- Należy używać try/catch wokół ryzykownych miejsc
- Należy dodać mały pomocniczy runSafe
- Dla operacji async również należy używać try/catch
- Należy zwracać wartości zastępcze i krótko rejestrować błędy
Lokalna granica: parsowanie
Należy opakować tylko ryzykowny krok (JSON.parse). W razie niepowodzenia należy zwrócić prosty obiekt zastępczy.
// 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}"));
Pomocniczy runSafe
Należy utworzyć mały pomocniczy element i używać go ponownie. Logi powinny być krótkie; nie należy ujawniać sekretów.
// 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);
Granica asynchroniczna
W przypadku pracy async należy używać try/catch wokół await i zwracać zastępczy ciąg znaków lub wartość.
// 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));
})();
Izolowanie ryzyka
Nie należy opakowywać całej aplikacji. Trzeba izolować ryzykowny krok, aby jego awaria nie blokowała wszystkiego.
// 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
Nawyki dotyczące granic
Lista kontrolna:
- Należy umieszczać małe bloki try/catch wokół ryzykownych wywołań.
- Należy zwracać małą wartość zastępczą.
- Należy krótko rejestrować błędy (bez sekretów).
Quiz z podstaw granic błędów
Szybkie sprawdzenie: granica błędów w czystym JavaScripcie.
Podsumowanie
Podsumowanie: należy dodawać lokalne bloki try/catch wokół ryzykownego kodu, używać pomocniczego runSafe, obsługiwać operacje async za pomocą try/catch i dostarczać wartości zastępcze, aby ekran nadal działał.
Często zadawane pytania
Czy lekcja „Granice błędów (koncepcyjnie) bez frameworków” jest bezpłatna?
Tak — pełny tekst „Granice błędów (koncepcyjnie) bez frameworków” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 3 lekcji w sumie.
Co nauczysz się w „Granice błędów (koncepcyjnie) bez frameworków”?
Tworzenie prostych granic błędów w czystym JS: try/catch wokół ryzykownego kodu, funkcje opakowujące, asynchroniczne try/catch, wartości zapasowe i minimalne logowanie Ćwiczysz JavaScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć JavaScript Academy?
Nie wymagamy żadnego doświadczenia. JavaScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 3.
Ile czasu zajmuje lekcja „Granice błędów (koncepcyjnie) bez frameworków”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji JavaScript Academy?
Tak. Każda lekcja JavaScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Walidacja danych wejściowych i podstawy escapowania
- Bezpieczne scalanie obiektów; zamrażanie i uszczelnianie
- Granice błędów (koncepcyjnie) bez frameworków