Белый экран и ошибки в консоли

Вчера всё работало, сегодня вместо сайта пустая белая страница. Ни сообщения, ни подсказки. Для одностраничных приложений на React, а именно их делают Lovable, Bolt и v0, это типичный симптом: если код упал на старте, браузеру просто нечего показать. Хорошая новость — причина почти всегда записана в консоли.

Почему так происходит

• Ошибка при отрисовке. Cannot read properties of undefined (reading 'map') — компонент ждал массив, а получил undefined, например, потому что API вернул ошибку. Без границы ошибок React размонтирует всё приложение.
• Пустые переменные окружения. В Vite в браузер попадают только переменные с префиксом VITE_, читаются через import.meta.env. Если на хостинге их не задали при сборке, клиент API создаётся с undefined и падает.
• Файлы сборки не найдены. Сайт лежит в подпапке, а сборка ждёт корень — все .js отдают 404. Или после выкладки браузер держит старый index.html, который ссылается на удалённые файлы.
• Service worker. PWA-кэш продолжает отдавать старую версию.
• Ошибка в зависимости. Обновился пакет, и импорт сломался.

Что проверить самому

1. Откройте F12 → Console и обновите страницу. Найдите первую красную ошибку, нажмите на ссылку справа — откроется файл и строка.
2. Перейдите на вкладку Network, обновите страницу и отфильтруйте по JS. Красные строки с 404 означают проблему путей или кэша.
3. Откройте сайт в режиме инкогнито. Если там работает — дело в кэше, service worker или localStorage.
4. Проверьте переменные, временно выведя их в консоль:

console.log(import.meta.env.VITE_SUPABASE_URL);

5. Если сайт открыт не с корня домена, проверьте base в vite.config.
6. Посмотрите в git, что менялось с последней рабочей версии.

Граница ошибок не даёт одному компоненту погасить всю страницу:

<ErrorBoundary fallback={<p>Что-то пошло не так. Обновите страницу.</p>}>
  <App />
</ErrorBoundary>

Когда звать разработчика. Если первая ошибка указывает в ваш код и понятно, какое значение пустое, её часто можно исправить самому или вместе с ИИ, дав ему полный текст ошибки и файл. Если же ошибка указывает в собранный файл вроде index-a1b2c3.js, белый экран появляется только на проде или только у части пользователей, либо после исправления появляется следующая ошибка, а за ней ещё одна, — это признак системной проблемы со сборкой, окружением или данными. Здесь быстрее отдать проект на диагностику, чем перебирать варианты.

Как чиним мы

Воспроизводим белый экран, по консоли и сетевым запросам находим первопричину и исправляем её, а не глушим. Проверяем переменные окружения и процесс сборки, пути и кэширование на хостинге: index.html не кэшируется, файлы с хэшами кэшируются надолго. Добавляем границы ошибок и подключаем сбор ошибок из браузера, чтобы следующая поломка пришла вам уведомлением. Подробнее — на странице «Аптечка вайб-кода». Почему такие поломки повторяются, разобрано в статье «Почему вайб-код ломается».

Сколько стоит

Диагностика — 50 000 ₸, запуск и исправление сборки — 40 000 ₸, итого от 90 000 ₸ для небольшого проекта. Если ошибок много и приложение падает в разных местах, это работа по исправлению ошибок — плюс 70 000 ₸. Рассчитайте в калькуляторе.