Вы работаете с долго живущим приложением, например чатом, что живет в фоновой вкладке у пользователя.
Пользователи начали массово жаловаться на то, что по прошествии нескольких дней они переходят на вкладку приложения, а вкладка упала (серый фон, Whoops your tab is crashed).
Вы дежурный, вам решать. Что будете делать?
🎯 Зачем спрашивают
- Проверить, умеет ли кандидат работать с реальными инцидентами в продакшене, а не только решать теоретические задачи.
- Оценить знание инструментов анализа производительности и отладки с помощью дампа памяти; Понять, использовал ли инструменты мониторинга ошибок и производительности;
- Понять, умеет ли кандидат выстраивать процесс отладки: собрать артефакты → зафиксировать → эскалировать.
- Проверить, знает ли кандидат, что падение вкладки может быть вызвано разными причинами (memory leak, infinite loop, heavy computation, баги браузера/расширений).
📝 Ответ
Коротко:
Необходимо снять снепшот памяти и обнаружить утечки. Далее эскалировать проблему с подробностями.
Более подробно:
Наиболее частая причина — утечка памяти или бесконечный цикл. Причины утечки памяти могут быть:
- забытые и не очищенные таймеры, event listeners
- не очищенные объекты в глобальной области, кэш
- накопление DOM-нод
- WebSocket / Long polling — соединения не переустанавливаются, накапливаются ресурсы
Но существуют и другие причины:
- out-of-memory из-за heavy computation
- баг браузера/расширения
Heap snapshot
Наша задача как дежурного — идентифицировать проблему, собрать артефакты с доказательствами и передать задачу в разработку (или исправить самому).
Самое минимальное, что можно сделать в ложившейся ситуации — снять Heap snapshot. То есть получить состояние памяти приложения на момент снятия снепшота.
Снепшоты можно сравнивать. Поэтому сделаем 2 снепшота: первый на момент старта приложения, второй — немного погодя.
Алгоритм действий
- Откройте приложение в Chrome
- Запустите DevTools и перейдите во вкладку Memory
- На вкладке Memory выбери режим Heap snapshot
- Нажмите Take snapshot — это будет наша точка отсчёта
- Подождите немного, чтобы приложение “побродило”
- Сними ещё один snapshot
- Сравни два snapshot: в фильтре поставьте «Objects allocated between Snapshot 1 and 2».
- Теперь задача найти объекты, которые не освобождаются (например
Array, event listeners).
Есть и другие инструменты, позволяющие погрузиться глубже в проблему и собрать больше информации.
Allocation Sampling (живое наблюдение)
Позволяет посмотреть, какие
функции создают больше всего объектов.
Алгоритм действий:
- В Memory выбери режим Allocation sampling.
- Нажми Start.
- Подождите немного, чтобы приложение “побродило”
- Нажми Stop.
- Посмотрите, какие
функциисоздают больше всего объектов.
Мониторинг через Performance
Мощный инструмент для профилирования перфоманса приложения.
С помощью графика можно посмотреть в динамике на ключевые ресурсы (JS Heap, DOM ноды, Listeners) и обнаружить аномалии, например, в накопления памяти.
Алгоритм действий:
- Перейдите во вкладку Performance.
- Нажмите Record (красная кнопка).
- Подождите немного, чтобы приложение “побродило”
- Остановите запись
- Задача отсмотреть график JS Heap → линия растёт и не возвращается вниз (сигнал проблемы) и/или много активных timers и callbacks.
⚖️ Компромиссы
- Heap snapshot даёт картину, но тяжело читать. Snapshot не показывает твои исходные имена переменных, из-за чего не легко идентифицировать проблемный код.
- Heap snapshot даёт картину → но это «статический снимок», и он не отражает динамику (в отличие от Performance/Timeline)
- Allocation sampling легче, но не всегда показывает удержание объектов.
- Performance удобен для динамики, но шумный график.
🔎 Встречные вопросы
- А что делать, если проблема воспроизводится только у пользователя, но не у вас?(Remote debugging, Chrome Tracing, Sentry memory tracking).
- Как автоматизировать мониторинг утечек? (heap usage metrics, alarms).
- Что кроме memory leak может уронить вкладку?
🚩 Красные флаги
- Ну, передеплою приложение
- Ничего страшного, вкладки иногда падают
- Посмотрю console.log и всё.
- Игнорировать артефакты, просто починю код по наитию.
🛠 Практика
Задача
StackBlitzmy-leaky-chat - StackBlitzmy-leaky-chat - StackBlitz
Next generation frontend tooling. It's fast!
StackBlitz