Фронтенд-мониторинг производительности приложений, у ByteDance есть весь этот многолетний опыт.

Архитектура внешний интерфейс JavaScript
Фронтенд-мониторинг производительности приложений, у ByteDance есть весь этот многолетний опыт.

задний план

С момента разработки ByteDance в Интернете уже существуют огромные веб-проекты, обслуживающие сотни миллионов пользователей.

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

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

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

Описание товара

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

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

Особенности продукта

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

Низкая стоимость доступа: Неинвазивный SDK

При доступе к SDK вам нужно всего лишь инициализировать несколько строк кода для успешного доступа к нему.

npm install @apm-insight-web/rangers-site-sdk
// 在项目最开始的地方引入下面的代码

import vemars from '@apm-insight-web/rangers-site-sdk/private'



vemars('config', {

  app_id: {{你的appid}},

  serverDomain: {{私有化部署服务器地址}},

})

Или напрямую получить доступ к CDN через сценарий JavaScript:

<!-- 脚本 -->

<!-- 页面 <head> 标签顶部添加以下代码 -->

<script>

(function(i,s,o,g,r,a,m){i["RangerSiteSDKObject"]=r;(i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)}),(i[r].l=1*new Date());(a=s.createElement(o)),(m=s.getElementsByTagName(o)[0]);a.async=1;a.src=g;a.crossOrigin="anonymous";m.parentNode.insertBefore(a,m);i[r].globalPreCollectError=function(){i[r]("precollect","error",arguments)};if(typeof i.addEventListener==="function"){i.addEventListener("error",i[r].globalPreCollectError,true);i.addEventListener('unhandledrejection', i[r].globalPreCollectError)}if('PerformanceLongTaskTiming'in i){var g=i[r].lt={e:[]};g.o=new PerformanceObserver(function(l){g.e=g.e.concat(l.getEntries())});g.o.observe({entryTypes:['longtask']})}})(window,document,"script","{{你的CDN地址}}","RangersSiteSDK");

</script>

<script>

window.RangersSiteSDK("config",{

    app_id: {{你的app_id}},

    serverDomain: {{私有化部署服务器地址}},

});

</script>

Расширенные возможности восстановления при аномалиях на месте

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

Более гибкая выборка для экономии денег

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

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

Как измерить веб-опыт

опыт сайта

Во-первых, изопыт сайтаС точки зренияWeb VitalsБыли определены индикаторы LCP, FID и CLS, которые стали основными стандартами в отрасли.

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

Подводя итог, можно выделить следующие три показателя:

Largest Contentful Paint (LCP)

Максимальный нарисованный контент используется для измерениянагрузкапредставление. Этот индикатор сообщает время рендеринга самого большого изображения или текстового блока, видимого в окне просмотра.2,5 секундыв пределах.

First Input Delay (FID)

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

Cumulative Layout Shift (CLS)

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

Мониторинг ошибок

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

В это время идеальная система мониторинга ошибок очень кстати.

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

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

Коллекция SDK

Имея в руках эти метрики, давайте конкретно рассмотрим, как SDK реализует эти метрики.

Какие показатели необходимо собрать?

  • RUM (Наблюдение за реальными пользователями) Метрики, в том числе FP, TTI, FCP, FMP, FID, MPFID.
  • Navigation Timing, включая индикаторы парсинга DNS, TCP, DOM и других этапов.
  • JS Error, которые после синтаксического анализа можно разделить на исключения времени выполнения и исключения статических ресурсов.
  • код состояния запроса, после сбора и отчетности вы можете проанализировать исключение запроса и другую информацию.

Как собрать эти показатели?

Сбор метрик RUM, в основном зависит отEvent Timing APIПроведите измерения.

Возьмите индикатор FID в качестве примера, сначала создайтеPerformanceObserverобъект, прослушиваниеfirst-inputмероприятие, прослушалfirst-inputПосле события используйте API синхронизации событий, чтобы вычесть время возникновения события из времени начала обработки события, которое является FID.

// Create the Performance Observer instance.

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    const FID = entry.processingStart - entry.startTime;

    console.log("FID:", FID);
  }
});

// Start observing first-input entries.

observer.observe({
  type: "first-input",

  buffered: true,
});

Navigation Timingпоказатели, которые могут бытьPerformanceTimingИнтерфейс их получает, взяв за пример расчет времени загрузки:

function onLoad() {
  var now = new Date().getTime();

  var page_load_time = now - performance.timing.navigationStart;

  console.log("User-perceived page loading time: " + page_load_time);
}

JS Errorиндикатор, черезwindow.onerror Функция обратного вызова для мониторингаОшибка выполнения JavaScript**:

window.onerror = function (message, source, lineno, colno, error) {
  // 构造异常数据格式并上报
};

пройти черезunhandledrejectionпрослушиватель событийОбещание отклонения асинхронных ошибок:

window.addEventListener("unhandledrejection", (event) => {
  // 构造异常数据格式并上报
});

код состояния запроса, вы можете переопределитьwindow.fetchа такжеXMLHttpRequestобъект для осуществления мониторинга для переопределенияfetchВ качестве примера, вот упрощенный код:

const _fetch = window.fetch;

window.fetch = (req: RequestInfo, options: RequestInit = {}) => {
  // 省略一些逻辑……

  return _fetch(req, options).then(
    // 成功

    (res) => {
      // 上报成功请求信息

      return res;
    },

    // 失败

    (res) => {
      // 上报失败请求信息

      return Promise.reject(res);
    }
  );
};

обработка на стороне сервера

После завершения сбора данных SDK они будут переданы на сервер для обработки.Сбор, очистка и хранениеи так далее.

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

Не удалось скопировать загружаемый контент

  • Уровень сбора данных. Уровень сбора данных — это служба API без сохранения состояния с более легкой логикой. Он только обеспечивает проверку подлинности, распаковку и другую работу с данными, сообщаемыми SDK, а затем записывает их в очередь сообщений Kafka для использования уровнем очистки данных.

  • Уровень очистки данных. Уровень очистки данных является логическим центром обработки данных. Обеспечьте форматирование стека, восстановление стека (анализ SourceMap), добавление широты (IP -> географическое положение, User-Agent -> информация об устройстве) и другие работы по обработке. Обеспечьте поддержку данных для многомерного анализа и статистики платформы, детализации данных и т. д.

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

    • OLAP: мы выбираем Clickhouse в качестве решения для хранения нашего анализа данных. Мощная производительность Clickhouse и целевая внутренняя оптимизация байтов могут помочь нам добиться эффекта 100 миллиардов данных уровня в день и запросов второго уровня.
    • KV: Байтовый внутренний высокопроизводительный KV собственной разработки хранит информацию индекса данных в сочетании с подробностями хранилища HDFS. Реализуйте функцию отслеживания деталей, таких как одноточечный запрос на платформе.
    • Э.С.: Для некоторых пользовательских сценариев поиска по анализу журналов мы используем Elastic Search в качестве хранилища для реализации более гибких функций поиска и анализа журналов.

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

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

Визуальный дисплей платформы

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

анализ производительности

Модуль анализа производительности разделен на два подмодуля: загрузка страниц и производительность статических ресурсов.

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

Реальные показатели производительности пользователейТо есть упомянутый выше RUM и некоторые дополнительные метрики, расширенные самой платформой, в том числе следующие метрики:

  • время первого розыгрыша ( FP ): То есть, первый Paint, момент времени для первого рендеринга.
  • время отрисовки первого контента ( FCP ): Первая отрисовка содержимого, которая является моментом времени, когда содержимое визуализируется в первый раз.
  • первое действительное время розыгрыша ( FMP ): время между моментом, когда пользователь инициирует загрузку страницы, и моментом, когда страница отображается в верхней части страницы.
  • время первого взаимодействия ( FID ): задержка первого ввода, фиксирующая время задержки первой интерактивной операции пользователя на этапе загрузки страницы. Показатели FID влияют на первые впечатления пользователей об интерактивности и скорости отклика страницы.
  • Максимальная задержка взаимодействия ( MPFID ): максимальное время задержки, с которым может столкнуться операция взаимодействия с пользователем на этапе загрузки страницы.
  • Время до полного взаимодействия (TTI): то есть время до интерактивности, которое фиксирует время, которое проходит с момента загрузки страницы до момента, когда страница становится полностью интерактивной.
  • первая загрузка Показатель отказов: показатель отказов пользователя до полной загрузки первой страницы.
  • Медленное отношение: процент PV, полная загрузка которых занимает более 5 секунд.

На странице можно полностью и наглядно просмотреть состояние этих индикаторов:

Технические показатели страницы

Определения метрик, представленные на странице «Метрики технической эффективности», взяты из:Navigation Timingинструкция о.

Не удалось скопировать загружаемый контент

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

В списке медленной загрузки указан конкретный список URL. Нажмите на URL, чтобы войтиСтраница сведенийВ частности, проанализируйте время, отнимающее URL.

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

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

мониторинг исключений

Мониторинг исключений в основном делится на мониторинг ошибок JS, мониторинг ошибок запросов и мониторинг ошибок статических ресурсов.Количество ошибок, частота ошибок, количество затронутых пользователей, доля затронутых пользователейосновной.

существуетМониторинг JS-ошибок, мы предоставляем возможности мониторинга и анализа ошибок JavaScript, а также поддерживаем отчеты о пользовательских ошибках. В целом он делится на обзор индикаторов рынка и анализ деталей вопроса.

Управляйте статусом проблемы и назначайте обработчик:

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

  • Стек ошибок: запутанный стек, в котором произошла ошибка. Если вы загрузили SourceMap, вы можете просмотреть исходный стек.
  • Хлебные крошки: запись поведения пользователя до и после возникновения ошибки.В дополнение к типу запроса, автоматически собираемому системой, он также поддерживает тип события взаимодействия с пользовательскими скрытыми точками.
  • Пользовательские параметры: в дополнение к параметрам, автоматически собираемым системой, можно сообщать о специальных параметрах.

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

единая точка трассировки

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

By entering UUID (ie user ID) or Session_ID (ie session ID), you can query the front-end logs of a single user for a period of time, and by restoring the user's operation path, you can better locate the root cause of событие.

Вызовите полицию

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

тревожная задача, поддерживает создание политик сигналов тревоги и управление созданными политиками.

Его можно легко подключить к роботу оповещения о тревоге в Feishu и дать обратную связь группе Feishu, как только будет получена тревога:

Конечно, вы также можете просмотреть обзор и список истории аварийных сигналов на платформе.

Суммировать

Полная ссылка для мониторинга производительности приложений, представляет собой полностью самостоятельный продукт для мониторинга производительности приложений, разработанный технической командой терминала на основе накопления и накопления множества сверхкрупномасштабных мобильных приложений пользовательского уровня, таких как внутренний Douyin ByteDance, Today's Toutiao, Tik Tok и Feishu. И имеет практику многих внешних клиентов, таких как: Hupu, Jobbang, Zhenyun Technology и т. Д., Чтобы предоставить предприятиям и разработчикамУниверсальный АРМСлужить.

В настоящее времяПолная ссылка для мониторинга производительности приложенийДоступно для новых пользователей30 дней испытаниябесплатное обслуживание в течение ограниченного времени. Он включает в себя мониторинг приложений, веб-мониторинг, мониторинг сервера, мониторинг апплетов, мониторинг приложений и веб-мониторинг.5 миллионов событий каждый, Мониторинг серверов и апплетовНеограниченный срок.

Для получения дополнительной информации о продукте, пожалуйста, нажмитездесьсвяжитесь со мной в чате

Адрес продукта:Woohoo.Vol C engine.com/products/AP…

Категории