Подпишитесь на официальный аккаунт «Kite Handler», чтобы получить множество обучающих материалов.

Во-первых, статус quo из внешнего мониторинга

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

Платформ для мониторинга так много, так зачем учиться заниматься фронтенд-мониторингом?

С одной стороны, люди хотят денег.

С другой стороны, ваши собственные проекты требуют настраиваемых функций.

Во-вторых, цель внешнего мониторинга

Улучшить пользовательский опыт
Более быстрое обнаружение. Обнаружение, обнаружение и устранение исключений.
Понимание бизнес-данных и руководство по обновлению продуктов — мышление, основанное на данных

3. Процесс внешнего мониторинга

3.1 Коллекция

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

3.1.1 Информация об окружающей среде

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

url: Страница находится под наблюдением, на странице могут быть проблемы с производительностью и нештатные ситуации. Способ его получения:
window.location.href
ua: UserAgent информация пользователя при доступе к странице, включая тип и версию операционной системы и браузера. Способ его получения:
window.navigator.userAgent
токен: запишите, кто является текущим пользователем. Записав, кто пользователь.
С одной стороны удобно установить контакт со всей мониторинговой информацией пользователя и облегчить анализ данных;
С другой стороны, через этот идентификатор можно просмотреть все операции пользователя, что удобно для воспроизведения проблемы.

3.1.2 Информация о производительности

Производительность страницы напрямую влияет на удержание пользователей, и исследование Google DoubleClick показывает, что если мобильная страница загружается дольше 3 секунд, пользователи сдаются и уходят. BBC обнаружила, что на каждую секунду увеличения времени загрузки страницы пользователи теряют 10%. , исследование Google DoubleClick показывает, что если мобильная страница загружается дольше 3 секунд, пользователи сдаются и уходят. BBC обнаружила, что на каждую секунду увеличения времени загрузки страницы пользователи теряют 10%. Итак, наша цель — повысить производительность страницы, какие показатели нужно отслеживать, чтобы повысить производительность?

3.1.2.1 Классификация показателей

Индикаторов много, и я суммирую их в следующих двух аспектах: уровень сети и уровень отображения страницы.

Во-первых, сетевой уровень

На сетевом уровне задействованными индикаторами являются: перенаправление, требующее много времени, разрешение DNS, требующее много времени, TCP-соединение, требующее много времени, SSL, требующее много времени, сетевой запрос TTFB, длительная передача данных, трудоемкая загрузка ресурсов. и т. д. Объяснение приведено в следующей таблице:

показатель	объяснять
Требуется много времени для перенаправления	время, потраченное на перенаправление
Разрешение DNS требует времени	После того, как браузер введет URL-адрес, он сначала выполнит разрешение DNS, что может дать информацию о том, работает ли сервер.
Длительное TCP-соединение	Относится к длительному процессу установления соединения
SSL-соединение требует времени	Относится к трудоемкому установлению безопасности и целостности данных.
Сетевой запрос TTFB занимает много времени	Указывает время, когда браузер получил первый байт
Время передачи данных	Время, необходимое браузеру для получения контента
время загрузки ресурса	Время от создания DOM до загрузки страницы.

Во-вторых, уровень отображения страницы

Индикаторы на уровне отображения страницы — это несколько индикаторов, предложенных для взаимодействия с пользователем, включая FP, FCP, LCP, FMP, DCL, L и т. д. Эти индикаторы на самом деле являются индикаторами модуля производительности в браузере Chrome (как показано на рисунке) .

Интерпретация каждого индикатора показана в таблице ниже.

показатель	объяснять
FP (первая краска)	Первая отрисовка отмечает момент времени, когда браузер отображает любой контент, который визуально отличается от содержимого экрана перед навигацией.
FCP (Первая содержательная краска)	Первая отрисовка содержимого, отмечающая момент времени, когда браузер отображает первый контент из DOM, который может быть текстом, изображениями, SVG или даже элементами.
LCP (наибольшая содержательная краска)	Максимальный рендеринг контента, указывающий момент времени, когда на экране начинает появляться видимый элемент с самым большим «контентом» видимой области.
FMP (Первая значимая краска)	Первый действительный розыгрыш, представляющий момент времени, когда «основное содержимое» страницы начинает появляться на экране. Это наша основная метрика для измерения пользовательского опыта загрузки.
DCL (DomContentLoaded)	Событие DOMContentLoaded запускается, когда HTML-документ полностью загружен и проанализирован, не дожидаясь завершения загрузки таблиц стилей, изображений и подфреймов.
L (под нагрузкой)	Запускается при загрузке всех зависимых ресурсов
TTI (время до интерактивности)	Интерактивное время, которое отмечает момент времени, когда приложение перешло к визуальному рендерингу и может надежно реагировать на пользовательский ввод.
FID (задержка первого входа)	Задержка первого ввода, время от первого взаимодействия пользователя со страницей (переход по ссылке, нажатие кнопки и т. д.) до ответа страницы на взаимодействие.

3.1.2.2 Индексное решение

Как получить столько индикаторов, о которых говорилось выше? Браузер оставил нам соответствующий интерфейс — волшебное окно.performance, через которое мы можем получить некоторые параметры, связанные с производительностью.baidu.comВ качестве примера рассмотрим параметры, связанные с этими индикаторами:

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

С приведенными выше значениями решаем указанные выше показатели вместе:

Во-первых, сетевой уровень

показатель	рассчитать
Требуется много времени для перенаправления	redirectEnd - redirectStart
Разрешение DNS требует времени	domainLookupEnd - domainLookupStart
Длительное TCP-соединение	connectEnd - connectStart
SSL-соединение требует времени	connectEnd - secureConnectionStart
Сетевой запрос TTFB занимает много времени	responseStart - requestStart
Время передачи данных	responseEnd - responseStart
время загрузки ресурса	loadEventStart - domContentLoadedEventEnd

Во-вторых, уровень отображения страницы

Инженеры Google продвигают метрики производительности, ориентированные на пользователя, поэтому уровень отображения страницы сильно изменился, и метод решения немного изменился:

ФП и ФКП

Получено с помощью window.performance.getEntriesByType('paint')

const paint = window.performance.getEntriesByType('paint');
const FP = paint[0].startTime,
const FCP = paint[1].startTime,

function getLCP() {
    // 增加一个性能条目的观察者
    new PerformanceObserver((entryList, observer) => {
        let entries = entryList.getEntries();
        const lastEntry = entries[entries.length - 1];
        observer.disconnect();
        console.log('LCP', lastEntry.renderTime || lastEntry.loadTime);
    }).observe({entryTypes: ['largest-contentful-paint']});
}

function getFMP() {
    let FMP;
    new PerformanceObserver((entryList, observer) => {
        let entries = entryList.getEntries();
        observer.disconnect();
        console.log('FMP', entries);
    }).observe({entryTypes: ['element']});
}

domContentLoadEventEnd – fetchStart

loadEventStart – fetchStart

domInteractive – fetchStart

function getFID() {
    new PerformanceObserver((entryList, observer) => {
        let firstInput = entryList.getEntries()[0];
        if (firstInput) {
            const FID = firstInput.processingStart - firstInput.startTime;
            console.log('FID', FID);
        }
        observer.disconnect();
    }).observe({type: 'first-input', buffered: true});
}

3.1.3 Аномальная информация

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

Ошибка времени выполнения

Во время работы JavaScript могут возникать ошибки, которые можно разделить на семь типов: синтаксические ошибки, ошибки типов, ошибки области, ошибки ссылки, ошибки оценки, ошибки URL и ошибки загрузки ресурсов. Чтобы отловить ошибки кода, необходимо рассмотреть два типа сценариев: сценарии без промисов и сценарии с промисами, потому что эти два сценария имеют разные стратегии отлова ошибок.

1. Бесперспективные сценарии

Сценарии Non-Promise могут перехватывать ошибки, прослушивая событие ошибки. Ошибки, фиксируемые событием ошибки, делятся на две категории: ошибки ресурсов и ошибки кода. Ошибка ресурса означает, что не загружены js, css, img и т. д. Эта ошибка может быть получена только на этапе захвата, а event.target.localName имеет значение при возникновении ошибки ресурса (используйте это, чтобы отличить ошибку ресурса и ошибку кода ); ошибка кода означает, что могут быть получены такие ошибки, как синтаксические ошибки, ошибки типа и т. д., а также информация и стек ошибок кода для устранения ошибок.

export function listenerError() {
    window.addEventListener('error', (event) => {
        if (event.target.localName) {
            console.log('这是资源错误', event);
        }
        else {
            console.log('这是代码错误', event);
        }
    }, true)
}

2. Сцена обещания

Сценарии промисов обрабатываются по-разному: когда промис отклонен, а обработчик отклонения отсутствует, будет запущено событие unhandlerejection, поэтому ошибки перехватываются прослушиванием события unhandlerejection.

export function listenerPromiseError() {
    window.addEventListener('unhandledrejection', (event) => {
        console.log('这是Promise场景中错误', event);
    })
}

2. Ошибка интерфейса

Для браузеров все интерфейсы реализованы на основе XHR и Fetch.Чтобы ловить ошибки в интерфейсе, можно переписать этот метод, а затем судить о текущем статусе интерфейса по информации, возвращаемой интерфейсом.В качестве примера ниже возьмем XHR. для демонстрации процесса упаковки.

function newXHR() {
    const XMLHttpRequest = window.XMLHttpRequest;
    const oldXHROpen = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = (method, url, async) => {
        // 做一些自己的数据上报操作
        return oldXHROpen.apply(this, arguments);
    }

    const oldXHRSend = XMLHttpRequest.prototype.send;
    XMLHttpRequest.prototype.send = (body) => {
        // 做一些自己的数据上报操作
        return oldXHRSend.apply(this, arguments);
    }
}

3.1.4 Деловая информация

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

3.2 Отчетность

Существует не более двух способов отчета: один — отчет в виде Ajax, другой — отчет в виде Image. В настоящее время метод отчетности, принятый многими крупными производителями, заключается в сообщении с помощью изображения GIF размером 1 * 1. Поскольку все используют эту стратегию, давайте поговорим о следующих двух вопросах.

Зачем использовать изображение для отчета?
1. Междоменных проблем нет. Поскольку сервер данных и внутренний сервер, скорее всего, будут иметь разные доменные имена, если для обработки используется метод Ajax, необходимо решить междоменные проблемы, иначе данные будут перехвачены браузером.
2. Не блокирует загрузку страницы, просто новый объект изображения.
Есть много типов картинок, почему для репортажа используется формат gif?
На самом деле оно сводится к одному слову - маленький. Для изображения размером 1*1px файлу структуры BMP требуется 74 байта, файлу структуры PNG требуется 67 байт, а файлу структуры GIF требуется всего 43 байта. Для одного и того же ответа GIF может сэкономить 41 % трафика по сравнению с BMP и 35 % трафика по сравнению с PNG, поэтому выберите GIF для создания отчетов.

3.3 Анализ

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

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

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

3.4 Тревога

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

Электронная почта - общая тревога
SMS - серьезная тревога, затронувшая некоторые предприятия
Телефон - особо серьезный, типа система не работает

1. Если вы считаете, что эта статья неплохая, поделитесь ею, поставьте лайк и пусть ее увидит больше людей.

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

Ссылаться на

woohoo.alloy team.com/2020/01/141… woohoo.cola но.com/2019/1224/6…