В онлайн-проектах необходимо учитывать поведение пользователей и использование продукта, чтобы понимать группу пользователей с точки зрения пользователей и продуктов, чтобы обновлять и повторять продукт, чтобы сделать его ближе к пользователю. Данные о поведении пользователей могут быть получены с помощью мониторинга данных внешнего интерфейса.Кроме того, внешний интерфейс также должен реализовывать мониторинг производительности и мониторинг исключений. Мониторинг производительности включает в себя время загрузки верхней части страницы, время белого экрана, время HTTP-запроса и время ответа http. Мониторинг исключений включает в себя отчеты об ошибках выполнения клиентских скриптов и т. д.
Существует три шага для реализации внешнего мониторинга: встраивание внешнего интерфейса и создание отчетов, обработка данных и анализ данных. В этой статье разрабатывается подходящее решение для всего внешнего мониторинга. Основное содержание этой статьи разделено на:
- Зачем нужен фронтенд-мониторинг?
- Краткое изложение распространенных интерфейсных решений для встраивания
- Выбор схемы внешней точки со скрытыми точками и разработка схемы внешней отчетности
- Проектирование системы визуализации результатов фронтального мониторинга
Адрес оригинального текста есть в моем блоге: https://github.com/forthealllight/blog/issues/23
Если это поможет, твоя звезда станет для меня лучшей поддержкой~
1. Зачем нужен фронтенд-мониторинг?
Цель внешнего мониторинга состоит в том, чтобы:
Получать поведение пользователей и отслеживать использование продуктов на стороне пользователя, а на основе данных мониторинга указывать направление оптимизации продукта..
Внешний мониторинг можно разделить на три категории: мониторинг данных, мониторинг производительности и мониторинг исключений. Давайте познакомимся с ними один за другим.
(1) Мониторинг данных
Мониторинг данных, как следует из названия, предназначен для отслеживания поведения пользователей. Мониторинг общих данных включает в себя:
- PV/UV: PV (просмотр страницы), то есть количество просмотров страницы или кликов. UV: Относится к количеству различных IP-адресов, которые посещают сайт или нажимают на новость.
- Время, которое пользователи проводят на каждой странице
- Какую запись использует пользователь для доступа к странице
- Действия, инициированные пользователем на соответствующей странице
Эти данные имеет смысл подсчитывать, например, мы знаем исходные каналы пользователей, которые могут способствовать продвижению товаров, знаем, как долго пользователи остаются на каждой странице, и увеличиваем рекламный толчок для страниц, которые остаются на долгое время.
(2) Мониторинг производительности
Мониторинг производительности относится к мониторингу производительности внешнего интерфейса, в основном включая мониторинг веб-страницы или взаимодействия с пользователем продукта. Общие данные мониторинга производительности включают:
- Время загрузки первого экрана под разными пользователями, разными моделями и разными системами
- время белого экрана
- Время отклика для таких запросов, как http
- Общее время загрузки статических ресурсов
- время рендеринга страницы
- Время завершения анимации взаимодействия со страницей
Результаты этого мониторинга производительности могут показать качество производительности интерфейса.По результатам мониторинга производительности производительность интерфейса может быть дополнительно оптимизирована, например, совместимость с анимационными эффектами браузеров с низкими версиями, ускорение загрузки первого экрана и так далее.
(3) Аномальный мониторинг
Кроме того, исключения также будут возникать во время выполнения внешнего кода продукта, поэтому необходимо ввести мониторинг исключений. Своевременное сообщение о нештатных ситуациях позволяет избежать онлайн-сбоев. Хотя большинство исключений можно перехватить с помощью try catch, такие как утечки памяти и другие случайные исключения, поймать сложно. Общие исключения для мониторинга включают:
- Мониторинг исключений в Javascript
- Мониторинг исключений для потери стиля
2. Краткое изложение распространенных интерфейсных решений для скрытых точек
В предыдущем разделе была представлена роль внешнего мониторинга, поэтому как реализовать внешний мониторинг Шаги для достижения внешнего мониторинга: встраивание внешнего интерфейса и создание отчетов, обработка данных и анализ данных. Первым шагом является встраивание внешнего интерфейса и создание отчетов, что является этапом сбора данных. Богатство и точность сбора данных повлияют на результаты различения эффектов линейки продуктов.
В настоящее время существует три распространенных метода встраивания внешнего интерфейса: встраивание кода, визуальное встраивание и встраивание без трассировки. Далее описывается каждый метод захоронения точек один за другим.
(1) Код заглубленной точки
Скрытие кода означает скрытие точек в виде встроенного кода. Например, если вам нужно отслеживать событие щелчка пользователя, вы решите вставить фрагмент кода, когда пользователь щелкает, чтобы сохранить поведение мониторинга или напрямую передать поведение мониторинга в определенный формат данных на стороне сервера. Кроме того, например, когда необходимо подсчитать PV и UV продукта, информация о доступе пользователя должна быть отправлена при инициализации веб-страницы.
Преимущества скрытых кодовых точек:
- Требуемая информация о данных может быть точно отправлена или сохранена в любое время.
недостаток:
- Рабочая нагрузка велика, и соответствующий код необходимо добавить в скрытую точку каждого компонента.
(2) Визуализируйте закопанные точки
С помощью визуального взаимодействия, а не скрытых точек кода. Разделите бизнес-код и скрытый код, предоставьте визуальную интерактивную страницу и введите бизнес-код.Благодаря этой системе визуализации вы можете настроить бизнес-код, чтобы добавить скрытые события и т. д. код.
Визуальное захоронение звучит относительно высоко, но на самом деле оно мало чем отличается от захоронения кода. То есть система используется для реализации процесса ручной вставки скрытых точек кода.
недостаток:
- Элементы управления, которые можно внедрить в визуализацию встроенных точек, ограничены и не могут быть настроены вручную.
(3) Нет места захоронения
Отсутствие точки захоронения не означает, что точки захоронения не нужны, но все точки захоронения Любое событие на фронтенде привязывается к идентификатору, и все события не записываются. Регулярно загружая файлы записей и взаимодействуя с анализом файлов, мы можем анализировать нужные нам данные и создавать визуальные отчеты для профессионального анализа, чтобы мы могли получить статистику «без скрытых точек».
Также очень просто реализовать отсутствие точек захоронения на уровне языка, например, из js-кода страницы найти события, привязанные к dom, а затем выполнить полные точки захоронения.
Преимущества незаглубленной точки:
- Поскольку собирается полный объем данных, нет необходимости обращать внимание на логику скрытой точки в процессе итерации продукта, и не будет утечки или ошибочного захоронения.
недостаток:
- Собирайте полные данные, не скрывая точки, увеличивая нагрузку на передачу данных и серверы.
- Невозможно гибко настроить данные, которые необходимо загрузить для каждого события
В-третьих, выбор развлекательной программы и разработка плана газеты.
В первой главе представлена информация, которую интерфейс должен отслеживать, а во второй главе представлены общие методы захоронения переднего плана.Эта статья настроит наш план захоронения и отчетности в соответствии с потребностями.
(1) Данные мониторинга
Прежде всего, нам нужно определить продукт или веб-страницу, которые обычно необходимо отслеживать и сообщать. Мониторинг делится на три этапа: пользователь заходит на домашнюю страницу веб-страницы, пользователь взаимодействует внутри веб-страницы и сообщает об ошибках во время взаимодействия. Данные, которые необходимо отслеживать и сообщать на каждом этапе, показаны на следующем рисунке:
(2) Схема захоронения
В реальном проекте, учитывая гибкую настройку сообщаемых данных и снижение нагрузки на передачу данных и серверы, когда требуется не так много скрытых точек, обычно используется метод сокрытия кода.
Взяв в качестве примера пользователя, заходящего на домашнюю страницу, мы отправим тип события и данные, связанные с типом, на сервер после завершения рендеринга домашней страницы, чтобы сообщить информацию мониторинга домашней страницы.
(3) Цикл отчетности и тип данных отчетности
Если скрытых событий не так много, отчеты можно создавать время от времени.Например, отслеживая события взаимодействия с пользователем, вы можете немедленно сообщать о типе событий, инициированных пользователем, после того, как событие инициировано пользователем. Если есть много скрытых событий или на веб-странице происходят частые внутренние взаимодействия, вы можете кэшировать и сообщать информацию сначала через локальное хранилище, а затем регулярно сообщать об этом.
Затем определите данные, которые необходимо скрыть и сообщить.Сообщаемая информация включает в себя личную информацию пользователя и поведение пользователя.Основные данные можно разделить на:
-
кто: appid (идентификатор системы или приложения), userAgent (система пользователя, сеть и другая информация)
-
когда: временная метка (сообщенная временная метка)
-
откуда: currentUrl (текущий URL-адрес пользователя), fromUrl (с какой страницы перейти на текущую страницу), type (тип сообщаемого события), element (элемент, который запускает сообщаемое событие)
-
что: сообщаемые пользовательские расширенные данные: {}, расширенные данные могут быть настроены в соответствии с требованиями, такими как включение uid и другой информации
Объекты для передачи данных:
{
----------------上报接口本身提供--------------------
currentUrl,
fromUrl,
timestamp,
userAgent:{
os,
netWord,
}
----------------业务代码配置和自定义上报数据------------
type,
appid,
element,
data:{
uid,
uname
}
}
(4) Примеры захоронения и сообщения
В качестве примера возьмем упомянутое выше событие загрузки первого экрана: DOM предоставляет событие DOMContentLoaded документа для отслеживания загрузки DOM и событие загрузки окна для отслеживания завершения загрузки и рендеринга всех ресурсов на страница.
<script type="text/javascript">
var start=Date.now();
document.addEventListener('DOMContentLoaded', function() {
fetch('some api',{
type:'dom complete',
data:{
domCompletedTime:Date.now()-start
}
})
});
window.addEventListener('load', function() {
fetch('some api',{
type:'load complete',
data:{
LoadCompletedTime:Date.now()-start
}
})
});
</script>
(5) Внешнее и внутреннее шифрование связи внешней встроенной системы.
При внешней и внутренней передаче отчетных данных механизм шифрования необходимо согласовывать со стороной сервера.Шифрование, реализованное библиотекой OpenSSL, уже является широко используемым алгоритмом шифрования. Внешний интерфейс может использовать криптомодуль узла.
Сначала взгляните на алгоритм хэширования, crypto.createHash() для создания экземпляра хэша. Доступные алгоритмы хэширования следующие:
-
md5
-
sha1
-
sha256
-
sha512
-
ripemd160
В качестве примера возьмем шифрование алгоритма sha256:
const str="123445";//需要加密的字段
const hash=crypto.createHash('sha256');//指定加密算法
hash.update(str); //通过算法加密相应的字段
const result=hash.digest('hex');//转化成十六进制
4. Проектирование системы визуализации результатов фронтального мониторинга.
После того, как серверная часть получает информацию, сообщенную интерфейсом, после анализа и обработки данных интерфейсу необходимо визуализировать результаты анализа данных.
Вторичная разработка может осуществляться на основе системы с открытым исходным кодом мидл и фон ant-design-pro Во-первых, информация должна быть четко отображена. Отображаемая информация включает как отдельных пользователей, так и приложение в целом.
Информация мониторинга, которая должна отображаться для одного пользователя:
- Для одного пользователя количество раз, когда каждое событие скрытой точки инициировалось в процессе взаимодействия.
- Один пользователь в течение определенного периода времени, источник входа для доступа к этой веб-странице.
- Один пользователь, время пребывания на каждой подстранице
Информация, которая должна отображаться для всех пользователей:
- PV и UV веб-страниц за определенный период времени
- Анализ устройств и операционных систем всех пользователей, обращающихся к веб-страницам
- Анализ источника входа на эту веб-страницу за определенный период времени
- Общее количество раз, когда все пользователи запускают каждое событие отслеживания в процессе взаимодействия при посещении этой веб-страницы.
- Когда все пользователи посещают эту веб-страницу, веб-страница сообщает о наборе исключений.
Сбор функций удаления:
- Фильтр времени: укажите сегодня (с 00:00 до текущего времени), на этой неделе, в этом месяце и на весь год.
- Удаление пользователя: предоставление статистической информации о поведении пользователей в соответствии с удалением идентификатора пользователя.
- Удаление устройства: удаление общей отображаемой информации различных систем.