skip to main content

try...catch

js

Кратко 🔗

Конструкция try...catch позволяет выполнить произвольный код, но если в нем произошла ошибка, то программа не остановит свое выполнение, а перейдет в блок catch, где ошибку можно обработать.

Как понять 🔗

Ошибки в программах это очень неприятно, но никто не застрахован от их появления. К тому же, ошибки могут появляться в тех ситуациях, которые не зависят от нас самих. Например, пользователь неправильно воспользовался программой. Поэтому в языке необходимы конструкции, которые позволяют выполнить произвольный код, но в случае ошибки дать возможность ее обработать.

В JavaScript ситуация еще сложнее. Если во время работы скрипта возникла ошибка и она не была обработана, то выполнение останавливается и программа, больше не работает.

Конструкция try...catch делает программы стабильнее — в случае ошибки мы можем продолжить выполнение. Мы можем написать любой синтаксически верный код и, если он выполнится без ошибок, то отлично. Если же что-то пойдет не так, что выполнится код, написанный в catch.

Представьте, что вы тренируетесь отбивать мяч в бейсбол. У вас есть партнер, который будет ловить мяч, в случае вашей ошибки, если отбить мяч не удастся. В большинстве попыток у вас все будет получаться хорошо, но если же случится промах, то второй игрок поймает мяч и вернет его на место, чтобы можно было попробовать снова.

С пойманной в catch ошибкой можно поступить как угодно: отправить данные в специальный логгер, обработать данные из нее и даже выбросить новую ошибку, которая может быть поймана в другом месте и т.д.

Как пишется 🔗

Базовый случай 🔗

Чтобы использовать try...catch необходимо в блоке try обернуть код, который нужно исполнить, а в блоке catch написать что делать в случае ошибки.

try {
someFunction()
anotherFunction()
} catch (err) {
console.log("Поймали ошибку! Вот она", err.message)
}

Если в блоке try не произошло ошибок, то код в блоке catch не выполнится.

Важно помнить, что код в try должен быть синтаксически верным. Если написать невалидный код (например, не закрыть фигурные скобки), то скрипт не запустится, потому что JavaScript не поймет код. Ошибки, которые обработает блок catch, будут ошибками во время выполнения программы.

В случае ошибки выполнение в блоке try прерывается и сразу же переходит в блок catch . После него скрипт продолжит свое выполнение как и прежде

try {
const six = 6 // 1. создаем константу
console.log(six) // 2. Выведет 6

six = 7 // Ошибка! Присваиваем новое значение в const

// с этого места управление переходит в catch

const nine = 9 // не выполнится
console.log(six + nine) // и это то же не исполнится
} catch (err) {
console.log("Поймали ошибку!") // 3. Обработали ошибку
}

console.log("Что-ж, можно и продолжать") // 4. будет выполняться дальше

блок-схема работы try...catch

Finally 🔗

Рассмотрим ситуацию, когда в случае успеха или неудачи какого-то участка кода нам необходимо проводить какие-то действия, чтобы корректно завершить работу скрипта.

try {
// подключаемся к вебсокету, но в конце нужно обязательно отключиться
webSocket.connect('ws://....')

callMayThrowError()
} catch(err) {
...
}

// Пробуем отключаться после try...catch
webSocket.disconnect('ws://....')

Казалось бы никаких проблем с этим кодом быть не должно, ведь неважно выполнится код в блоке try правильно или попадет в catch, следующая строчка должна выполнится. Однако возможно ситуация, что в блоке catch тоже возникнет ошибка и тогда выполнение следующей строчки уже не случится.

function doSomeWithError(e) {
throw new Error("new error")
}

try {
// подключаемся к вебсокету, но в конце нужно обязательно отключиться
webSocket.connect("ws://....")

callMayThrowError()
} catch (err) {
// Здесь тоже может возникнуть ошибка
doSomeWithError(err)
}

// В случае ошибки эта строчка уже не выполнится
webSocket.disconnect("ws://....")

Как же тогда гарантированно освободить ресурсы при любом исходе выполнения?

В конструкцию try...catch можно добавить блок finally, который выполнится после блоков try и catch. Неважно какой код выполнился в предыдущих блоках, после их завершения (даже если из catch была выброшена новая ошибка) исполнится код в блоке finally.

try {
webSocket.connect("ws://....")

callMayThrowError()
} catch (err) {
// Здесь тоже может возникнуть ошибка
doSomeWithError(err)
} finally {
// Выполнится всегда
webSocket.disconnect("ws://....")
}

блок-схема try...catch с finally

Наличие блока finally необязательно. finally можно использовать и без блока catch.

try {
// Отправить данные на сервер, здесь нам неважна обработка ошибки
sendData()
} finally {
// Закрыть соединение при любом результате
closeConnect()
}

Ошибки в catch 🔗

Может возникнуть ситуация, когда скрипт обработки ошибки тоже может сломаться. При этом могут возникнуть случаи, когда мы хотим намеренно выбросить новую ошибку из catch, или пробросить текущую, чтобы ее обработать в другом месте.

Хорошей практикой считается обрабатывать в модуле только те ошибки, которые связаны непосредственно с ним, а все остальные пробрасывать дальше.

// parse-module.js

// Есть свой тип ошибки
class ParsingError extends Error {
...
}

function parse(data) {
try {
parseData(data)
} catch(err) {
if (err.name !== "ParsingError") {
// Другой тип ошибок пробрасываем дальше
throw err
}

logError(err)
}
}

Таким образом можно разделить ответственность, а обработкой проброшенной ошибки займется внешний catch.

import parse from "parse-module"

try {
parse(data)
} catch (e) {
console.log("Неизвестная ошибка парсинга:", e)
}

Ошибки в асинхронном коде 🔗

Конструкция try...catch работает только синхронно. Таким образом с помощью try...catch нельзя обработать ошибку, которая возникла в асинхронном коде.

try {
// Код выполнится корректно, т.к отсюда вернулся промис
Promise.reject("err")
} catch (e) {
// Ошибка не будет поймана
console.log("Ошибка", e)
}

try {
// Здесь так же код выполнится корректно, потому что установил таймаут без ошибок
setTimeout(() => {
throw Error("ошибка")
}, 1000)
} catch (e) {
// Ошибка из таймаута так же сюда не попадет
console.log("Ошибка", e)
}

Однако если записать асинхронный код в синхронном стиле с помощью async/await, то в этом случае обработку ошибок можно осуществлять с помощью try...catch.

async function handlePromise() {
try {
// Промис вернется с ошибкой
await Promise.reject("err")
} catch (e) {
// Теперь ошибка будет поймана
console.log("Ошибка", e) // err
}
}

handlePromise()

Чтобы поймать ошибку из setTimeout, блоки try...catch должны находится внутри функции.

В работе 🔗

Любой асинхронный код можно переписать в синхронном стиле через async/await, чтобы использовать единый стиль обработки ошибок, используя try...catch. Например перепишем установку таймаута из примера выше.

function wait(ms) {
return new Promise((resolve) => setTimeout(resolve, ms))
}

async function timeout(fn, ms) {
try {
// Ждем таймаут
await wait(ms)

// И выполняем функцию
fn()
} catch (err) {
// Ловим ошибку
console.log("Ошибка", err)
}
}

Теперь можно вызывать функцию как прежде, ошибка будет поймана.

timeout(() => {
throw Error("ошибка")
}, 1000)