Границы ошибок (концептуально) без фреймворков
Создавайте небольшие границы ошибок на чистом JS: try/catch вокруг опасного кода, вспомогательные обёртки, асинхронный try/catch, резервные значения и минимальное журналирование
«Границы ошибок (концептуально) без фреймворков» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 3 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 3 уроков всего.
Общая картина
Цель: не допустить, чтобы одна ошибка нарушила работу всего экрана.
- Используйте try/catch в потенциально опасных местах
- Добавьте небольшой вспомогательный метод runSafe
- Обрабатывайте async с помощью try/catch
- Возвращайте резервные значения и кратко записывайте сведения в журнал
Локальная граница: разбор данных
Оберните в обработку ошибок только опасный шаг (JSON.parse). При сбое возвращайте простой резервный объект.
// 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
Создайте небольшой вспомогательный метод и используйте его повторно. Записи в журнале должны быть краткими; не допускайте утечки секретов.
// 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);
Граница для асинхронных операций
Для работы с async используйте try/catch вокруг await и возвращайте резервную строку или значение.
// 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));
})();
Изолируйте опасный участок
Не оборачивайте всё приложение. Изолируйте опасный шаг, чтобы сбой не блокировал остальную работу.
// 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
Привычки при работе с границами
Список проверок:
- Размещайте небольшой try/catch вокруг потенциально опасных вызовов.
- Возвращайте небольшое резервное значение.
- Кратко записывайте сведения в журнал (без секретов).
- Повторяйте этот шаблон для вызовов async.
Тест по основам границ обработки ошибок
Быстрая проверка: граница обработки ошибок в обычном JavaScript.
Повторение
Повторение: добавляйте локальный try/catch вокруг потенциально опасного кода, используйте вспомогательный метод runSafe, обрабатывайте async с помощью try/catch и предоставляйте резервные значения, чтобы экран продолжал работать.
Часто задаваемые вопросы
Урок «Границы ошибок (концептуально) без фреймворков» бесплатный?
Да — полный текст урока «Границы ошибок (концептуально) без фреймворков» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 3 уроков всего.
Чему я научусь в уроке «Границы ошибок (концептуально) без фреймворков»?
Создавайте небольшие границы ошибок на чистом JS: try/catch вокруг опасного кода, вспомогательные обёртки, асинхронный try/catch, резервные значения и минимальное журналирование Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать JavaScript Academy?
Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 3.
Сколько времени занимает урок «Границы ошибок (концептуально) без фреймворков»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке JavaScript Academy?
Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Проверка входных данных и основы экранирования
- Безопасное объединение объектов, заморозка и запечатывание
- Границы ошибок (концептуально) без фреймворков