Представляем Middle-Aware: визуализатор стека вызовов для экспресс-разработчиков

Мы рады представить запуск Middle-Aware, визуализатора стека вызовов для разработчиков Express. Middle-Aware — это приложение Electron, в котором используются React, Typescript, Node.js, Express и MongoDB. Middle-Aware создан в сотрудничестве с OSLabs, некоммерческим технологическим акселератором, занимающимся продвижением эффективных продуктов с открытым исходным кодом.

Что такое ПО промежуточного слоя?

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

Проблема

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

Решение

Мы создали приложение, предназначенное для решения проблем, с которыми разработчики Express сталкиваются при отслеживании данных и производительности. Middle-Aware предоставляет информацию о клиентских запросах к конечным точкам и пути данных через промежуточное ПО, собирая сведения о запросах и ответах, время обработки и ошибки. Отображая путь данных через каждую функцию промежуточного программного обеспечения в одном месте, разработчики могут визуализировать состояние данных на каждом этапе процесса, диагностировать узкие места в цикле запроса/ответа, а также легко выявлять и устранять ошибки.

Начиная

Чтобы начать пользоваться Middle-Aware, вы можете скачать приложение здесь. Оттуда просто следуйте инструкциям в нашем файле README, и вы готовы начать. Обязательно создайте файл конфигурации JSON, для которого требуются такие свойства, как путь к корневому каталогу соответствующего проекта, порт для запуска внешнего и внутреннего интерфейса проекта, а также сценарий запуска проекта, прежде чем вы сможете использовать Middle-Aware.

Архитектура среднего уровня и скрытая часть

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

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

Точкой входа в Middle-Aware является основной процесс Electron, который отвечает за создание главного окна Middle-Aware и управление им, связь между приложением и операционной системой пользователя и выполнение бэкенда Middle-Aware. Серверная часть Middle-Aware использует Node.js, который приложение использует для подключения к базе данных разработчика и для запуска прокси-сервера.

Middle-Aware также содержит процесс рендеринга, который рендерит пользовательский интерфейс и обрабатывает взаимодействие разработчика с приложением. Средство визуализации использует каналы связи между процессами для связи с основным процессом. Интерфейс Middle-Aware использует библиотеку React JavaScript и Tailwind CSS для графического пользовательского интерфейса приложения.

Процесс промежуточного осознания

Как только разработчик установит Middle-Aware, приложение откроет окно и предложит разработчику загрузить файл конфигурации перед началом. Требования к конфигурации включают корневой каталог предметного проекта, целевой каталог для Middle-Aware для создания клона («теневой копии») предметного проекта, а также порты для запуска предметного проекта и прокси-сервера Middle-Aware.

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

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

Следующие шаги

Команда гордится тем, что предлагает разработчикам по всему миру технологию Middle-Aware. Мы надеемся, что простота тестирования конечных точек, просмотра данных по мере их прохождения через цепочку промежуточного программного обеспечения будет полезна другим, когда они работают над своими проектами. Middle-Aware имеет открытый исходный код, и команда по-прежнему активно улучшает и поддерживает проект с помощью OSLabs. Если у вас есть какие-либо вопросы или отзывы, или вы хотели бы внести свой вклад в проект, не стесняйтесь обращаться к нам на GitHub или LinkedIn ниже.