← Все статьи

Окна во фронтенде

console.error — это не всё — Output Console ловит ошибки, которых ты не видишь

15 мая 2026 · автор JustZix Team

Output Console в JustZix показывает то, что страница пишет в консоль — без открытия DevTools. Но долгое время она показывала только то, что код вызывал явно через console.log. А половина того, что ты видишь в DevTools, вообще не приходит от console.log. С версии 2.13.86 это изменилось.

console.error — это не то же самое, что ошибка

Легко спутать две вещи:

• console.error('что-то') — код намеренно логирует что-то на уровне error.
• throw new Error('что-то') — код упал. Никто не вызвал console.error. И всё же DevTools показывают красную запись со stack trace.

Chrome ловит падения сам и показывает их в консоли. Если Output Console оборачивает только console.*, эти падения от неё ускользают — а это часто самые важные вещи, потому что именно они ломают страницу.

Что ловится теперь

1. Необработанные исключения

Необработанный throw, синтаксическая ошибка, runtime-ошибка — Chrome тогда диспатчит событие error на объекте window. Output Console слушает это событие и логирует сообщение вместе со stack trace и позицией файл:строка:колонка.

2. Необработанные rejection промисов

someAsync().then(...) без .catch, или await, который бросил, и никто его не поймал — Chrome диспатчит событие unhandledrejection. Output Console его слушает и показывает причину rejection как error-запись с префиксом «Unhandled promise rejection».

Почему фаза capture

Оба слушателя подключены в фазе capture. Причина: у страницы может быть свой обработчик error или unhandledrejection, вызывающий preventDefault() или stopPropagation(). Фаза capture выполняется до фазы bubbling, поэтому Output Console видит событие раньше, чем код страницы может его заглушить.

Тест на 30 секунд

Открой JS Console (или TEMP JS Console через Ctrl+Alt+J) и напечатай:

throw new Error('test boom')

Красная запись со stack trace должна появиться в Output Console. Теперь:

Promise.reject('async boom')

«Unhandled promise rejection: async boom» должна появиться. Если ты видишь оба — перехват ошибок работает.

Что мы всё ещё НЕ ловим — и почему

• Нарушения CSP. У них отдельное событие securitypolicyviolation — добавляемо позже, вне рамок сейчас.
• Сетевые ошибки 4xx/5xx. Неудачный fetch с 404 или 500 — это успешно завершённый ответ — Chrome показывает его во вкладке Network, не в консоли. Мы ловим его, только если твой код сам бросает после проверки response.ok.
• Внутренние предупреждения Chrome. Сообщения вроде «Autofocus processing was blocked» генерируются самим браузером — их нельзя перехватить на уровне страницы.
• Сбои загрузки ресурсов. Неудачный <img> или <script> иногда ловится слушателем error в фазе capture, но не всегда — зависит от типа ресурса.

Это намеренные границы, не пробелы. Output Console показывает JavaScript-ошибки страницы — то, что ты обычно хочешь видеть — не весь диагностический шум браузера.

Сценарий — мониторинг продакшена без DevTools

Защёлкни Output Console у края вкладки и оставь её. Открой свой сайт после деплоя — если что-то падает, ты видишь это сразу, даже если ошибка не приходит от твоего console.error. Для QA-тестировщика это разница между «страница выглядит OK» и «страница выглядит OK, но в фоне срабатывает необработанный TypeError».

Смотри также

• Output Console — полное описание окна
• TEMP pane — Output Console под горячей клавишей Ctrl+Alt+K
• Внедрение на страницах со строгой CSP — как работает хук консоли

Установи JustZix — и увидь ошибки страницы раньше своих пользователей.