Мало знаний, большой вызов! Эта статья участвует в "Необходимые знания для программистов«Творческая деятельность

Эта статья приняла участие"Проект "Звезда раскопок"", чтобы выиграть творческий подарочный пакет и бросить вызов творческим поощрительным деньгам.

Автор этой статьи:cjinhuo, несанкционированное воспроизведение запрещено.

резюме

Основная цель этой статьи — представить более масштабируемую архитектуру SDK, чтобы сделать код для последующих бизнес-итераций более понятным. Эта архитектура уже доступна в SDK мониторинга с открытым исходным кодом:mitojsПрактика, заинтересованные друзья могут пойти посмотреть~(Онлайн-демонстрация SDK)

Что касается текста, то эта статья разделена на три части.

• задний план
• Архитектура SDK и итерация
• конец

задний план

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

• sentry
• webfunny
• fundebug
• Али облако передний мониторинг (оружия)

Подождите, пока некоторые отличные платформы мониторинга

Преимущества самостоятельно разработанного SDK

1. Все SDK компании могут быть объединены в один, включая, помимо прочего: SDK для встроенной платформы, SDK для мониторинга производительности, SDK для записи экрана.
2. Собранной информацией можно легко поделиться, например, информацию об ошибках можно связать с информацией о скрытых точках, чтобы вы могли получить более подробный стек поведения пользователей и быстрее устранять онлайн-ошибки.
3. Можно разработать лучшую структуру сервера, производительность одного и того же сервера, разные архитектуры могут выдерживать разные QPS.

Состав платформы мониторинга

Архитектура SDK и итерация

На самом деле существует всего несколько принципов фронтенд-мониторинга, например, перехват http-запросов заключается в переписывании нативных функций: fetch, XMLHttpRequest и мониторинг ошибок кода: window.onerror, но SDK — это тоже проект, требующий постоянной итерации и дополнительных функций, поэтому хорошая архитектура может заложить хорошую основу для последующих итераций.

monorepo

заимствованныйsentryа такжеvue-nextСтруктура каталогов кодаmonorepo

Его преимущества:

1. Упаковка подмодулей, горячее обновление подмодулей, выпуск подпакетов (улучшение опыта разработки)
2. Извлеките абстрактные классы и классы инструментов в пакет, и структура кода станет понятной (уменьшите связанность и улучшите читаемость кода).

отношения между пакетами

Мультиупаковка и дистрибуция

попробовал этоlernaПозже я обнаружил, что у него слишком много функций.Все, что я хочу, это функция упаковки и публикации.Наконец, я использую js-скрипт для написания и вызова в соответствии с входными параметрами командной строки.rollupизapiа такжеnpmизapiупаковать и опубликовать, в частностисценарий упаковки

Идея подключаемого плагина

Идея изrollupи мониторинг библиотек с открытым исходным кодомdoraучиться у.

Нам необходимо отслеживать:

• xhr
• fetch
• hashroute
• historyroute
• error

...так далее

традиционный режим

1. переписать xhr
2. Получить нужные данные в процессе перезаписи
3. Постбэк через pubsub
4. Получите данные в центре подписки и обработайте их

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

Что, если бы мы позаимствовали шаблон плагина?

Режим плагина

interface BasePluginType<T extends EventTypes = EventTypes, C extends BaseClientType = BaseClientType> {
  // 事件枚举
  name: T
  // 监控事件，并在该事件中用notify通知订阅中心
  monitor: (this: C, notify: (eventName: T, data: any) => void) => void
  // 在monitor中触发数据并将数据传入当前函数，拿到数据做数据格式转换
  transform?: (this: C, collectedData: any) => any
  // 拿到转换后的数据进行breadcrumb、report等等操作
  consumer?: (this: C, transformedData: any) => void
}

В это время кто-то скажет, если мой бизнес намного сложнее этого, выдержит ли эта архитектура? В приведенном выше плагине можно использовать 3 хука:monitor、transform、consumerРазделите на большее количество хуков, которых может быть 5 или 10, если у вас достаточно тонкая детализация и напишите код в соответствии с соответствующими функциями этих хуков, независимо от того, сколько сотен тысяч строк кода в вашем проекте, ваш иерархия кода очень четкая

Например 🌰: плагин, который прослушивает необработанное отклонение

Фактическое использование плагина в коде

Использование @mitojs/vue в Vue3

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { init } from "@mitojs/browser";
import { vuePlugin } from "@mitojs/vue";

const app = createApp(App)
const MitoInstance = init({
  vue: app,
  dsn: 'https://test.com/yourInterface',
  maxBreadcrumbs: 100
},[vuePlugin])

Руководство по доступу к vue3

@mitojs/core

После того, как вышеупомянутые плагины составляют весьSDKОсновная ссылка основной ссылки, а теперь давайте поговорим о некоторых из самых основных классов инструментов для подключения этих плагинов.Поскольку он должен поддерживать несколько терминалов, события, методы отчетности и настраиваемые элементы, которые должен отслеживать каждый терминал различны, поэтому их необходимо разделить Несколько абстрактных классов для легкого расширения. следующим образом@mitojs/coreобщая ментальная карта

Общая интеллект-карта браузера

Общая карта разума апплета WeChat

повторяемость

Последующее, если кто-то хочетpull request node监控или其他小程序的监控, пока он разрабатывается в соответствии с этим режимом подключаемого модуля, итерабельность будет значительно улучшена.

конец

🤔 Резюме

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

В следующей статье «Мониторинг SDK Hand Touch Teach — Реализация» будет рассказано о написании кода плагина, так что следите за обновлениями~

🧐 Открытый исходный код

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

📞 Связаться и твитнуть

Внешний интерфейс байтовой архитектуры набирает много людей, а внутренний толчок может помочь изменить резюме и проверить ход собеседования в режиме реального времени Добро пожаловать, чтобы отправить свое резюме мнеПочта:chenjinhuo@bytedance.com

Если вы заинтересованы в интерфейсе байтовой архитектуры, мониторинге ошибок и скрытых точках, вы можете связаться со мной напрямую.WeChat: cjinhuo

Have A Good Day!!!