Что такое трассировка стека?

Трассировка стека в выводе - это отчет, в котором содержится информация о вложенности внутри функций относительно момента, когда произошел выброс исключения. Чтобы лучше понять, рассмотрим пример:

const func1 = () => {
  throw Error('func1 error!');
};

const func2 = () => {
  func1();
};

const func3 = () => {
  func2();
};

try {
  func3();
} catch (e) {
  console.log(e);
}
// Вывод будет следующим (вместо anonymous будет имя файла с кодом, я запускал в консоли браузера)
// Error: func1 error!
//    at func1 (<anonymous>:3:9)
//    at func2 (<anonymous>:8:3)
//    at func3 (<anonymous>:13:3)
//    at <anonymous>:17:3

В коде у нас три функции, каждая из которых вызывает другую, последняя (func1) внутри выбрасывает ошибку. Получается такая цепочка вызовов: func3 -> func2 -> func1. Внутри блока try catch мы поймали ошибку и распечатали. По ней видно, что текст ошибки содержит не только то значение, переданное в Error(), но и имена функций, номера строк и позиций в строках, в которых была выброшена ошибка. Это и есть трассировка стека. По нему можно понять, что ошибка была внутри функции func1(), строка 3, позиция 9. Эта функция была вызвана внутри функции func2(), строка 8, позиция 3. Функция 2 была вызвана внутри func3(), строка 13, позиция 3. А функция func3() была вызвана на строке 17, позиция 3. Позиция указывает на номер символа (с которого начинается имя функции) с начала строки.

Иван, спасибо за такие доходчивые разъяснения!!!

throw Error('func1 error!'); без new?

Трассировка стека (stack trace) — список вызовов функций, через которые программа пришла к ошибке. Его показывают вместе с сообщением об исключении:

function loadUser(id) {
  return parseUser(null);
}

function parseUser(data) {
  return data.name;
}

loadUser(1);

TypeError: Cannot read properties of null (reading 'name')
    at parseUser (app.js:6:15)
    at loadUser (app.js:2:10)
    at Object.<anonymous> (app.js:9:1)

Как читать

• Первая строка — тип ошибки и сообщение.
• Строки с at — функции от места ошибки к началу вызова. Сверху — где упало, ниже — кто вызвал.
• app.js:6:15 — файл, строка и позиция в строке.

Ищите первую строку из вашего кода: строки из node_modules и внутренних модулей обычно можно пропустить.

Получить стек из кода

try {
  loadUser(1);
} catch (error) {
  console.log(error.message);
  console.log(error.stack); // сообщение и весь стек строкой
}

Стек текущего места без ошибки: console.trace('Как мы сюда попали').

throw Error() без new

В комментарии спрашивали, работает ли throw Error('func1 error!') без new. Работает: Error, вызванный как функция, создаёт объект ошибки так же, как с new, и стек в нём будет. Для единообразия обычно пишут new Error().

throw 'текст' выбрасывает строку, у которой стека нет. Выбрасывайте объекты Error.

Асинхронный код

В async-функциях стек показывает цепочку await. В колбэках setTimeout и старых промисах стек обрывается на событийном цикле, и вызывающая функция в нём не видна.

Минифицированный код в браузере

В собранном коде стек указывает на main.3f2a.js:1:45678. Чтобы видеть исходные файлы и строки, включите source maps в сборщике — Vite и webpack делают это для режима разработки сами.

Ошибки и отладку разбирают в бесплатном курсе «Основы JavaScript».