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

задний план

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

• sentry
• webfunny
• fundebug

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

Широко используемая платформа мониторинга в Китае

sentry: От мониторинга ошибок, графиков статистики ошибок, фильтрации по нескольким меткам и статистики меток до срабатывания алармов, весь набор идеален.Командные проекты нужно заряжать, и чем больше объем данных, тем дороже стоят деньги.

fundebug: Помимо мониторинга ошибок, вы также можете записывать экран, то есть записывать все действия пользователя в первые несколько секунд ошибки.Сжатый объем составляет всего несколько десятков КБ, но операция немного громоздка

webfunny: Он также содержит функцию мониторинга ошибок, которая может поддерживать десятки миллионов ежедневных объемов PV.dockerЧастное развертывание (бесплатно), бизнес-код зашифрован

Почему бы не выбрать три вышеупомянутые платформы мониторинга или другие платформы мониторинга, почему вы хотите сделать это самостоятельно?

1. первыйsentryа такжеfundebugнеобходимо вложить много денег в качестве поддержки, иwebfunnyХотя его можно использоватьdockerЧастное развертывание, но поскольку его код не является открытым исходным кодом, вторичная разработка ограничена.

2. Самостоятельная разработка может объединить все SDK компании в один, включая, помимо прочего: SDK для встроенных платформ, SDK для мониторинга производительности.

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

Общий процесс

Как видно из приведенного выше рисунка, если вам нужно разработать самостоятельную платформу мониторинга, вам нужно сделать три части:

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

SDK для мониторинга

Общая структура кода

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

сбор информации об ошибках в Интернете

Как правило, сообщение об ошибке получается путем перезаписи собственного события js, такого какajax请求, переписавxhr,fetchСобытия для перехвата информации об интерфейсе, поэтому нам нужно написать функцию, которая легко переписывает события для повторного использования.

ошибка интерфейса

Все запросы к сторонним библиотекам основаны наxhr,fetchОн инкапсулируется дважды, поэтому вам нужно только переписать эти два события, чтобы получить всю информацию, запрошенную интерфейсом.statusзначение, чтобы определить, является ли текущий интерфейс нормальным. Например, переписываниеxhrКодовая операция:

В дополнение к получению информации об интерфейсе, есть также операция выше: если это интерфейс, отправленный SDK, нет необходимости собирать информацию об интерфейсе. Вызывается, если событие необходимо опубликоватьtriggerHandlers(EVENTTYPES.XHR, this.mito_xhr),похожий,fetchЭто также переписано таким образом.

Об интерфейсе кросс-домен, задача тайм-аута: когда возникают эти две ситуации, тело ответа и заголовок ответа, возвращаемые интерфейсом, пусты.statusОн равен 0, поэтому их трудно различить, но при нормальных обстоятельствах запросы в общих проектах являются сложными запросами, поэтому формальные запросы будут выполняться первыми.optionДля предварительного запроса, если он является междоменным, он вернется через десятки миллисекунд, поэтому используйте это как критическое значение для оценки проблемы междоменного и тайм-аута (если интерфейс не существует, он будет оценен как междоменный интерфейс).

ошибка кода js && ошибка ресурса

мониторwindowизerrorмероприятие

window.addEventListener('error',function(e){
  // 拿到错误信息，发布事件：triggerHandlers
}, true)

• ошибка ресурса

судитьe.target.localNameЕсть ли значение, если есть, то это ошибка ресурса, вhandleErrorsИнформация получена в:

• ошибка кода

Вышеприведенное считаетсяfalse, это означает ошибку кода, вы можете получить соответствующий файл кода ошибки, количество строк кода и другую информацию в обратном вызове, а затем передатьsource-mapэтоnpm包+sourceMapФайл анализируется, и местонахождение реальной ошибки кода в строке может быть восстановлено.

Прислушивайтесь к необработанному отклонению

когдаPromiseодеялоrejectи нетrejectКогда процессор, он сработаетunhandledrejectionмероприятие

Сбор информации о поведении пользователей

Простой сбор информации об ошибках может повысить эффективность позиционирования ошибок, но если он будет сочетаться с поведением пользователя, это будет вишенкой на торте, и эффективность ошибок позиционирования будет выше.Как показано на рисунке ниже, вы можете четко посмотрите, что сделал пользователь: Enter Какая страница => какая кнопка была нажата => какой интерфейс был запущен:

информация о событиях в доме

domПриобретение событий включает в себя множество:click,input,doubleClickИ так далее, способ прослушивания события щелчка прямо в окне (обратите внимание, что третий параметрtrue):

window.addEventListener('click',function(e){
	// 利用节流，以防事件触发过快
  // 发布事件 triggerHandlers
}, true)

Другой - переписатьwindow.addEventListenerспособ перехватить события прослушивания разработчика в dom.

информация о коммутаторе маршрутизации

В одностраничном приложении есть два преобразования маршрутизации:hashchange,history

• history

Когда браузер поддерживаетhistoryВ режиме на него влияют следующие два события:pushState,replaceState, и два события не срабатываютonpopstateОбратный вызов, поэтому нам нужно прослушать эти три события:

• hashchange

Когда браузер поддерживает толькоhashchangeКогда вам нужно переписать hashchange:

информация о консоли

В нормальных условиях формальная среда не должнаconsoleДа зачем тогда собиратьconsoleИнформация? Во-первых: в нештатных обстоятельствах формальная среда или предварительная среда также могутconsole, второй: Много раз можно также поставитьsdkПоместите его в тестовую среду для отладки. В итоге я решил собратьconsoleинформация, но параметры передаются во время инициализации, чтобы сообщитьsdkМониторить лиconsoleсбор информации.

Сбор информации об ошибках уровня платформы

Vue

vue2.6Официальный сайт предоставляет обратные вызовы для двух функций сообщения об ошибках:Vue.config.errorHandlerа такжеVue.config.warnHandler

React

Доступно в React16.13componentDidCatchФункция ловушки для обратного вызова сообщения об ошибке, поэтому мы можем создать новый классErrorBoundaryчтобы наследовать React, а затем объявитьcomponentDidCatchФункция хука, вы можете получить информацию об ошибках (для реакции нет сбора ошибок, краткое описание см. в документации официального сайта, упрощенная версия должна быть написана так).

Ошибки пользовательского отчета

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

import MITO from 'mitojs'
MITO.log({
  info: '支付失败，余额不足',
  tag: 'business'
})

Сбор хлебных крошек

Когда информация об ошибке собрана выше, в конце добавляется строкаbreadcrumb.push(data), поэтому вы можете сохранить трек поведения пользователя, установленный по умолчанию20Длина также может быть настроена во время инициализации, но рекомендуется, чтобы максимальная длина не превышала100, потому что если информации слишком много, использование памяти слишком велико, и это не очень удобно для страницы.

Интеграция типов

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

Генерация идентификатора ошибки

При запуске каждого события ошибки будет много информации. Нам нужно попытаться убедиться, что идентификатор, сгенерированный ошибкой каждой отдельной информации, отличается. Меры, принятые здесь, заключаются в том, чтобы сначала рекурсивно отсортировать каждый ключ объекта ошибки в соответствии с определенным правил, а затем по каждой ошибке значение объектаhashCode, получить строкуerrorId

Сообщить об ошибке

Когда SDK получает всю неправильную информацию, об этом необходимо сообщить серверу.Существует несколько способов сообщить серверу.

Сообщить через xhr

пройти черезxhrОтчет, если он установлен на асинхронный, текущий запрос будет потерян, когда пользователь перейдет на новую страницу или закроет страницу. Если он установлен на синхронный, это приведет к зависанию страницы.

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

Изображение формы для отправки запроса

Функции:

1. Нет междоменных проблем,
2. После отправки запроса GET не получает и не обрабатывает данные,
3. Серверу не нужно отправлять данные,
4. Он не будет содержать файл cookie текущего доменного имени, не будет блокировать загрузку страницы и не повлияет на работу пользователя.new Imageобъект,
5. По сравнению с BMP/PNG, который имеет наименьший объем, он может сэкономить 41% / 35% сетевых ресурсов.

Navigator.sendBeacon

**MDN:** Доступно черезHTTPАсинхронная передача небольших объемов данных на веб-сервер, статистика и диагностические коды обычноunloadилиbeforeunloadИнициировать синхронизацию в обработчике событийXMLHttpRequestдля отправки данных. СинхронныйXMLHttpRequestЗаставьте пользовательский агент отложить выгрузку документа и сделать так, чтобы следующая навигация появлялась позже. Следующая страница ничего не может сделать с этой плохой производительностью загрузки.

Функции:

1. сделал асинхронный запрос и былPOSTпросить
2. Отправленный запрос выполняется в очереди задач браузера, которая отделена от текущей страницы, поэтому он не будет блокировать выгрузку текущей страницы и процесс загрузки следующих страниц, и пользовательский опыт будет лучше.
3. Он может только судить о том, поставлено ли оно в очередь задач браузера, но не может судить об успешной отправке.
4. Beacon APIСоответствующий обратный вызов не предоставляется, поэтому возврат бэкенда лучше не использовать.response body
5. Совместимость не очень

Уникальный идентификатор пользователя

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

1. если вы используетеajaxЕсли сообщается, найтиcookieбез ремняtrackerIdЭто поле сервер генерирует иsetCookieустановить для клиентаcookie
2. Генерируется непосредственно с помощью SDK и оценивается перед каждым отчетомlocalstorageон существуетtrackerId, если есть, оно будет отправлено с сообщением об ошибке, если нет, сгенерируйте его и установите для него значениеlocalstorage

Суммировать

Сводка SDK

Подписка на события => переписывание собственных событий => запуск собственных событий (публикация событий) => получение информации об ошибках => извлечение полезной информации об ошибках => отправка отчетов на сервер

Об открытом исходном коде

SDK с открытым исходным кодом:mitojs, в следующей статье будет рассказано об идеях дизайна структуры таблицы на стороне сервера, о том, какдесять миллионовНесколько меток в данных барамиллисекундаРасширенные события ошибок запросов и улучшенные механизмы оповещения для уведомления разработчиков

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