Мониторинг и качество микрофронтенд-приложений ВТБ Онлайн

1. Повышение качества кода 

   Анализ метрик кода, чтобы поддерживать чистую, понятную и поддерживаемую кодовую базу.

2.  Контроль качества релизов 

   Мониторинг процессов сборки и деплоя, чтобы релизы проходили все проверки и тесты, исключая «плохие версии» и снижая риск аварий.

3.  Обеспечение стабильности и надежности 

   Быстрое выявление отклонений и сбоев в микрофронтендах, позволяющее оперативно исправлять проблемы и минимизировать влияние на пользователей.

4.  Прозрачность и отчётность 

   Предоставление понятных отчетов и метрик для всех участников проекта (разработчиков, менеджеров, QA) для принятия обоснованных решений.

5.  Автоматизация контроля качества 

   Использование автоматических инструментов мониторинга для снижения ручного труда и повышения эффективности процессов.

6.  Поддержка масштабируемости архитектуры 

   Обеспечение качества каждого микрофронтенд-компонента как части большой системы, чтобы при росте проекта сохранялась стабильность и удобство поддержки.

2025

Внедрение инструмента контроля качества микрофронтендов дало значимые результаты. Снижены затраты на код-ревью: проверка приложения на соответствие метрикам и требованиям теперь занимает минуты. Единый интерфейс с цветовой подсветкой наглядно показывает отклонения, ускоряя выявление и исправление проблем.

Данные мониторинга стали инструментом для решений. Функционал сравнительного анализа объективно оценивает влияние новой версии микрофронта на ключевые метрики (скорость загрузки, конверсия, ошибки). Это позволяет релизить только улучшающие продукт изменения, делая процесс разработки управляемым и data-driven. Внедрение снизило MTTR на 70%, минимизировав ущерб для клиентов.

Продуктовые команды получили прямой доступ к метрикам и возможность быстро реагировать на отклонения, повысив эффективность collaboration без запросов доступа к чужим репозиториям. Состояние всех микрофронтендов теперь удобно и прозрачно отслеживается в едином интерфейсе.

ТypeScript, Webpack, Module Federation, Babel, Swc, React, Redux, React Query, открытый стандарт API-браузера, Node.js, Astra Linux, дизайн-система от ВТБ Omega, NGINX и CI/CD pipeline.

В проекте не используются решения из каталога Global CIO

Перед командой стояли следующие задачи:

1. Разработкой ВТБ Онлайн занимаются 200+ продуктовых команд. Для реализации проекта было необходимо выстроить единую коммуникацию между ними и максимально учесть потребности каждой из команд.

2. Потребовалось интегрировать решение в уже существующие процессы: доработки пайплайнов и кода каждого микрофронтенда для возможности использовать данное решение

3. Возникла необходимость поиска новых подходов для обработки, визуализации и хранения большого объема данных.

Кроме того, необходимо было обеспечить безопасность данных и тщательно проверить решение на отсутствие уязвимостей.

При переходе на микрофронтенд-архитектуру веб-версии ВТБ Онлайн приложение было разделено на 300 микрофронтендов, которые развиваются независимо разными командами. Это привело к потере централизованного контроля над качеством и изменениями в новых версиях. 

В результате возникла необходимость тратить значительные ресурсы разработки на код-ревью каждого изменения в каждом микрофронтенде, а также организовывать доступы разработчиков к репозиториям других команд, что усложняло и замедляло процесс. 

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

Что нужно было сделать:

- разработать инструмент, обеспечивающий единый стандарт разработки для повышения качества кода и ускорения работы приложения;

- обеспечить поддержку масштабируемости и роста, чтобы инструмент легко адаптировался под новые технологии и увеличение числа микрофронтендов;

- контролировать версии микрофронтендов и их совместимость, что позволит избежать конфликтов при независимых релизах и быстро выявлять нарушения интеграции; 

- анализировать производительность и стабильность с помощью различных метрик, чтобы оперативно обнаруживать проблемы и не допускать ухудшения пользовательского опыта;

 - реализовать пайпланы для сбора данных спецификации микрофронтендов и дальнейшего отображения на UI, при помощи которого будет осуществляться мониторинг и сравнительный анализ конфигураций микрофронтов на всех контурах.

Что было реализовано:

 - единый интерфейс, на котором отображается название микрофронтенда, версия микрофронтенда с разбивкой по контурам, перечень всех библиотек и версии библиотек, который использует каждый микрофронтенд, вес каждого микрофронтенда, экспоузы, shared зависимости, возможность выбора и сравнения двух версий, с подсветкой расхождений;

- сравнительный анализ версий микрофронтов. Это позволяет нам не просто фиксировать проблемы, а прогнозировать их. Мы видим, какое именно обновление привело к падению производительности или росту ошибок, и можем мгновенно откатить только проблемный модуль, не затрагивая стабильные части приложения;

 - внедрены пайплайны CI/CD, интеграция скриптов генерации и сбора тестовых метрик, настройка транспорта данных с правилами публикации, автоматизация расписания выполнения процессов и развертывание UI-интерфейса для визуализации показателей;

- инструкции по использованию мониторинга и реагированию на несоответствия и инциденты.

На данный момент решение доступно сотрудникам Банка в тестовом режиме. На октябрь 2025 года — это более 850 активных пользователей.