Как избежать угловатого белого экрана смерти
Если вы когда-либо работали с angular или ionic, вы могли столкнуться с полной белой страницей, также известной как белый экран смерти. Скорее всего причина в несовместимости браузера из-за отсутствия полифилов или браузер вообще не поддерживается. Поэтому angular загружается неправильно, и страница остается пустой.
Если вы хотите попробовать это, просто сгенерируйте ошибку перед загрузкой файла main.ts.
if (environment.production) {
enableProdMode();
}
throw new Error('White screen, reveal yourself!');
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch((err) => console.error(err));
Это наихудший сценарий, так как не отображаются сообщения об ошибках или какие-либо инструкции. Многие из ваших пользователей могут просто уйти. Если пользователь просматривает ваш адрес электронной почты, вы можете получить информацию о том, что произошла ошибка, но у вас не будет никакой информации (например, трассировки стека), чтобы начать ее отладку. Для нативных приложений все еще хуже, так как вы получите рейтинг в одну звезду в магазинах приложений и комментарии типа «Не работает». И многие из них просто оставляют свой отзыв и не будут отвечать на ваши ответы.
Как мы можем это исправить?
Предупреждение о спойлере: я не знаю ни одного волшебного решения, которое исправило бы для нас подобные ошибки. Проблема в том, что angular работает неправильно, и поэтому его глобальный обработчик ошибок или какой-либо код внутри angular не справится с этим. Также есть разные причины в зависимости от версии браузера, операционной системы, а затем дело доходит до гибридных приложений, веб-просмотра и нативной специфики.
Но что мы можем сделать, так это, по крайней мере, показать сообщение об ошибке и некоторые инструкции, например следующие:
Решение
Мы расширяем index.html нашего одностраничного приложения с помощью CSS, HTML и VanillaJS для обнаружения белого экрана и отображения сообщения об ошибке.
Несколько замечаний по JS
JavaScript довольно понятен. У нас есть функция showWhitescreenError, которая регистрирует ошибку и отображает элемент div, если он еще не показан (возможно, возникает несколько ошибок). Функция также добавляет стек ошибок к отображаемому сообщению. Сам JS не использует никаких современных функций ES, так как мы хотим, чтобы он корректно работал на всех устройствах.
Для обнаружения белого экрана есть два типа ошибок, о которых я знаю:
- Неперехваченная ошибка
При запуске приложения возникает неперехваченная ошибка. Мы обрабатываем это с помощью глобального Event-Listener и показываем сообщение об ошибке через заданное время (например, 5 секунд). Мы ждем несколько секунд, потому что angular все еще может работать, и нам не нужно мигающее сообщение об ошибке. - Пустой корневой каталог приложения
Корневой каталог приложения остается пустым, но ошибка не возникает. Мы проверяем, есть ли у корневого приложения какие-либо дочерние элементы по прошествии заданного времени (например, 8 секунд), и показываем сообщение об ошибке, если нет.
Несколько замечаний по CSS
Конечно, вы можете изменить HTML и CSS сообщения об ошибке в соответствии с вашими потребностями. Как правило, вам следует избегать очень современного CSS, так как вы можете иметь дело со старыми версиями браузера. Я предлагаю установить отрицательный z-index для отображения сообщения за app-root (в случае, если приложение работает и исправление белого экрана запускается ложно). Также начните с `display: none`, чтобы скрыть сообщение до тех пор, пока не произойдет ошибка. Оставив необходимый CSS для этих двух строк:
.whitescreen {
display: none;
z-index: -1000;
}
Место для улучшений?
Мы могли бы добавить больше функциональности в обработку ошибок, например, добавить некоторую информацию о конкретной платформе (например, операционную систему, версию браузера) или отправить событие HttpRequest с отчетом об ошибке на наш сервер. Но добавление большего количества кода также может привести к новым ошибкам, и наша главная цель — отобразить что-то вместо пустого экрана.
Последние мысли
Это исправление действительно помогает? Я использовал этот подход в проектах angular и ionic, и это определенно привлекло к нам несколько пользователей, которые прислали скриншоты и попросили о помощи. В случае с ионным приложением мы предложили попробовать нашу PWA вместо AppStore-версии, и пока это работало для всех из них. Кроме того, с момента исправления белого экрана в магазинах не поступало новых отзывов «Не работает».
Спасибо, что прочитали. Мне очень приятно услышать ваше мнение. Не стесняйтесь комментировать, делиться своим опытом или предлагать какие-либо улучшения.
