{"type":"doc","content":[{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔹 1. Что такое стек вызовов"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Стек вызовов (call stack)"},{"type":"text","text":" — это структура данных,"},{"type":"hardBreak"},{"type":"text","text":"в которой JavaScript "},{"type":"text","marks":[{"type":"bold"}],"text":"хранит информацию о том, какие функции сейчас выполняются"},{"type":"text","text":" и "},{"type":"text","marks":[{"type":"bold"}],"text":"в каком порядке они были вызваны"},{"type":"text","text":"."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Когда возникает ошибка, JS "},{"type":"text","marks":[{"type":"bold"}],"text":"создаёт “снимок” этого стека"},{"type":"text","text":" —"},{"type":"hardBreak"},{"type":"text","text":"так называемый "},{"type":"text","marks":[{"type":"bold"}],"text":"stack trace"},{"type":"text","text":", который показывает,"},{"type":"hardBreak"},{"type":"text","marks":[{"type":"italic"}],"text":"где именно и в какой последовательности был вызван код, приведший к ошибке."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔹 2. Как выглядит стек вызовов при ошибке"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Рассмотрим пример 👇"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"function a() {\n b();\n}\n\nfunction b() {\n c();\n}\n\nfunction c() {\n throw new Error(\"Что-то пошло не так!\");\n}\n\ntry {\n a();\n} catch (err) {\n console.log(err.stack);\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"📘 Вывод в консоли:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"Error: Что-то пошло не так!\n at c (:8:9)\n at b (:4:3)\n at a (:1:3)\n at :12:3\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔹 3. Что содержится в stack trace"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Каждая строка в "},{"type":"text","marks":[{"type":"code"}],"text":"stack"},{"type":"text","text":" — это "},{"type":"text","marks":[{"type":"bold"}],"text":"один уровень вызова функции"},{"type":"hardBreak"},{"type":"text","text":"(снизу вверх: от места возникновения ошибки до самой верхней функции, которая запустила цепочку)."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Разберём:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"Error: Что-то пошло не так! ← тип ошибки и сообщение\n at c (:8:9) ← функция c() вызвала ошибку\n at b (:4:3) ← c() была вызвана из b()\n at a (:1:3) ← b() была вызвана из a()\n at :12:3 ← a() вызвана в глобальной области\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"📍 Каждая строка указывает:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"имя функции ("},{"type":"text","marks":[{"type":"code"}],"text":"at c"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"at b"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"at a"},{"type":"text","text":")"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"файл (или "},{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":", если без имени)"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"номер строки и столбца, где произошёл вызов"}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔹 4. Где хранится стек"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Когда создаётся объект ошибки ("},{"type":"text","marks":[{"type":"code"}],"text":"new Error()"},{"type":"text","text":"), у него автоматически появляется свойство "},{"type":"text","marks":[{"type":"code"}],"text":".stack"},{"type":"text","text":", которое содержит:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"имя ошибки ("},{"type":"text","marks":[{"type":"code"}],"text":"Error"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"TypeError"},{"type":"text","text":", и т.п.)"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"сообщение ("},{"type":"text","marks":[{"type":"code"}],"text":"message"},{"type":"text","text":")"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"трассировку вызовов (stack trace)"}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Пример:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"const err = new Error(\"Ошибка сети\");\nconsole.log(err.stack);\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"📘 Вывод:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"Error: Ошибка сети\n at :1:13\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔹 5. Как использовать стек в обработке ошибок"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"try {\n throw new Error(\"Непредвиденная ошибка\");\n} catch (e) {\n console.error(\"Ошибка:\", e.message);\n console.error(\"Стек вызовов:\\n\", e.stack);\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"📘 Вывод:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"Ошибка: Непредвиденная ошибка\nСтек вызовов:\nError: Непредвиденная ошибка\n at :2:9\n at ...\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔹 6. Пользовательские ошибки тоже имеют стек"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Если вы создаёте свою ошибку через "},{"type":"text","marks":[{"type":"code"}],"text":"class extends Error"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"то свойство "},{"type":"text","marks":[{"type":"code"}],"text":".stack"},{"type":"text","text":" у неё тоже будет доступно."}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"class ValidationError extends Error {\n constructor(message) {\n super(message);\n this.name = \"ValidationError\";\n }\n}\n\ntry {\n throw new ValidationError(\"Неверный email\");\n} catch (e) {\n console.log(e.stack);\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"📘 Вывод:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"ValidationError: Неверный email\n at :8:9\n at ...\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔹 7. Стек при асинхронных ошибках"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Асинхронные вызовы (через "},{"type":"text","marks":[{"type":"code"}],"text":"setTimeout"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"Promise"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"await"},{"type":"text","text":")"},{"type":"hardBreak"},{"type":"text","text":"могут «разорвать» стек, потому что они выполняются позже — в другой итерации event loop."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Пример:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"function a() {\n setTimeout(() => {\n throw new Error(\"Ошибка в таймере\");\n }, 0);\n}\n\na();\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"📘 Вывод:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"Uncaught Error: Ошибка в таймере\n at Timeout._onTimeout (:3:11)\n"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Здесь видно только часть стека, потому что ошибка произошла уже "},{"type":"text","marks":[{"type":"bold"}],"text":"в другом контексте выполнения"},{"type":"text","text":"."}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧠 Итог"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Элемент"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Что это значит"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"Error.message"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Текст ошибки"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"Error.name"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Тип ошибки ("},{"type":"text","marks":[{"type":"code"}],"text":"TypeError"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"ReferenceError"},{"type":"text","text":", …)"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"Error.stack"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Полный путь вызовов до места ошибки"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Каждый "},{"type":"text","marks":[{"type":"code"}],"text":"at ..."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Одна функция в цепочке вызовов"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Порядок"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Сверху — место ошибки, ниже — кто её вызвал"}]}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"💡 Практическое применение"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Быстро находить место сбоя в коде;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Понимать, какие функции вызвали ошибку;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Сохранять "},{"type":"text","marks":[{"type":"code"}],"text":"stack trace"},{"type":"text","text":" в логах (например, в Sentry, GlitchTip, Logtail);"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Делать trace-бэкенд для анализа ошибок пользователей."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null}}]}

Что содержит стек вызовов (stack trace)?

Комментарии