Sentry, source maps, метрики реальных пользователей и алерты после выкатки.
Практика. Подключить Sentry и web-vitals к проекту, найти и исправить 3 реальные ошибки из собранных отчётов.
Практика. Внедрить еженедельный разбор ошибок и полевых метрик с владельцами страниц и измерить снижение числа ошибок за квартал.
Войдите, чтобы пройти тест: сданный тест отмечает тему пройденной на карте и в ИПР.
Код выполняется на тысячах чужих устройств — без мониторинга вы узнаете об ошибках от пользователей. Нужны: сбор ошибок (Sentry и аналоги) с source maps, чтобы видеть исходный код, контекстом (браузер, маршрут, действия до ошибки) и группировкой; метрики…
Полный разборТри метрики Google, измеряемые на реальных пользователях: LCP — когда отрисован главный элемент (хорошо ≤ 2,5 с), INP — задержка реакции на действия пользователя (≤ 200 мс), CLS — сдвиги вёрстки при загрузке (≤ 0,1). LCP улучшают быстрым ответом сервера…
Полный разборSource map — файл соответствия собранного (минифицированного, склеенного) кода исходному: строка 1, столбец 48231 в index-3f2a.js → Cart.tsx:42. Браузерные DevTools и системы сбора ошибок (Sentry и аналоги) по нему показывают исходный стек ошибки. В…
Полный разборПроизводительность деградирует незаметно — по килобайту в каждом PR. Удержать её помогают бюджеты (размер JS на маршрут, LCP, INP) с проверкой в CI, которая блокирует превышение, мониторинг реальных пользователей (RUM) по маршрутам и устройствам с алертами…
Полный разборMSW (Mock Service Worker) перехватывает запросы на уровне сети и отвечает заданными данными: компонент работает с настоящим fetch и клиентом, а тест управляет ответами — успех, ошибка 500, задержка. Обработчики общие для тестов, Storybook и локальной…
Полный разборНестабильный тест подрывает доверие ко всем тестам: команда привыкает перезапускать и пропускает настоящие ошибки. Частые причины: ожидание по времени (sleep) вместо условия, общие данные между тестами, порядок выполнения, зависимость от внешних сервисов и…
Полный разборВместо одного большого бандла код делят на части, которые грузятся по необходимости: по маршрутам (страница настроек не нужна на главной), по тяжёлым виджетам (редактор, графики, карта). Механизм — динамический import(), сборщик выделяет модуль в отдельный…
Полный разборКартинки — часто самая тяжёлая часть страницы. Приёмы: современные форматы (AVIF, WebP; SVG для иконок), размер под экран через srcset и sizes (телефону не нужна картинка 3000px), сжатие, loading="lazy" для картинок ниже первого экрана, width и height (или…
Полный разборПосле собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.