Охватить спонсируемый этот пост.
В этом посте мы рассмотрим, как придумать нативное приложение React для отправки данных в любую бэкэнд Opentelemetry (OTEL) над OTLP-HTTP. В предыдущем уроке для CNCF мы показали, как это сделать, используя пакеты Otel JavaScript (JS). Тем не менее, в этом пошаговом руководстве мы будем использовать открытый исходный код React Native SDK по нескольким ключевым причинам:
- Официальные пакеты OTEL требуют некоторого цыпочка при их интеграции, потому что React Native не поддерживается напрямую в качестве платформы пакетами Opentelemetry JS. Комплект разработки программного обеспечения для Embrace (SDK) был специально разработан для поддержки Nate Native, что позволяет нам интегрировать SDK без обходных путей.
- Объединение React Native SDK строится на вершине нативных мобильных SDK для Ambrace для Android и iOS. Это позволяет испускать телеметрию вокруг сбоев, проблем с памятью и т. Д., Которые встречаются в собственном коде, работающем в мобильном приложении. Другими словами, вы получаете лучшую видимость в вопросах мобильного приложения, получая доступ к контексту как из слоев, так и от JS.
- Как и OTEL SDK, Embrace React Native SDK позволяет экспортировать данные в любую конечную точку OTLP-HTTP. Однако, также отправив эти данные для принятия, вы можете использовать силу приборной панели Embrace, чтобы получить дальнейшее понимание, в которое мы копаем в конце этого прохождения.
Для простоты мы сосредоточимся на iOS в этом прохождении. Этот же поток будет работать для Android с некоторыми незначительными различиями в настройке. (См. Добавление Native Native Embrace SDK и начала работы с приборной панелью Embrace для получения более подробной информации.)
Установка пакетов
Этот урок будет использовать @React-Community/CLI, который представляет собой набор инструментов командной строки, которые помогут вам создать нативные приложения React. В частности, мы будем использовать его команду init, чтобы быстро получить пустое приложение и запустить:
На данный момент у вас должно быть приложение Hello World примеры Hello World на iOS. Далее добавьте пакет Core Embrace SDK, а также пакет @Embrace-IO/React-Con-OTLP, чтобы позволить экспорту в конечную точку OTLP-HTTP:
Инициализация SDK
Для инициализации SDK и настройки его так, чтобы он указывал на ваш бэкэнд по выбору (в данном случае конечную точку OTLP Cloud Grafan
В приведенном выше фрагменте происходит несколько вещей, так что давайте посмотрим на них по одному:
- Инициализация объявления SDK в JavaScript:
- Мы используем крюк UseeMbrace, чтобы запустить и настраивать SDK. Это самый простой способ начать SDK, начавшись с нативного слоя React. Обратите внимание, что, поскольку мы имеем дело с мобильным приложением, может быть интересная телеметрия, которую можно захватить, прежде чем запустить слой JS, который мы пропустили бы с этим подходом. Объединение SDK также может быть запущено в нативном коде для учета этого сценария, но мы не пойдем в этот уровень детализации в этом уроке. Более подробную информацию можно найти в документации, если вы заинтересованы.
- Настройка журнала и экспортеров трассе:
- Журналы и следы являются двумя фундаментальными сигналами OTEL. Здесь мы устанавливаем оба для экспорта в один и тот же бэкэнд. Обратите внимание, что два экспортера настроены независимо друг от друга. Если вы хотите, вы можете настроить только один, или вы можете отправить телеметрию в разные местоположения backend.
- Любой бэкэнд, который поддерживает получение данных в качестве OTLP-HTTP, будет работать. В этом примере мы предпочитаем использовать Grafana. Если у вас еще нет подходящей настройки бэкэнд, вы можете быстро начать работу с Grafana, зарегистрировавшись в Grafana Cloud и создав учетную запись. Вы можете настроить источники данных, такие как Tempo для трассов или Loki для журналов.
- Мы также устанавливаем DisabledurlPatterns в конфигурации iOS, чтобы исключить любой захват URL -адресов с помощью шаблона [«grafana.net»]Полем Инструментарий Embrace автоматически создает пролеты для любых сетевых запросов. Однако, поскольку экспортер OTLP делает сетевой запрос на отправку трассов, это даст цикл, в котором сетевой запрос экспорта создает пролет, который экспортируется и создает еще один пролет и так далее. Игнорирование «grafana.net» позволяет нам экспортировать в него без создания дополнительной телеметрии.
- Захватывание и постороннее из -за результата использования крючка:
- Мы будем использовать эти значения позже в учебном пособии. Они позволяют нам знать, когда SDK успешно запустил SDK, чтобы мы могли построить дополнительные инструменты для него.
Просмотр автоматического инструментария
Вы еще не добавили никаких инструментов. Тем не менее, вы все равно должны видеть некоторую полезную телеметрию в вашей системе наблюдений из инструментов, которые SDK настраивает автоматически, например, захват пролетов для сетевых запросов и журналов для нечестных исключений. Чтобы увидеть их, перезапустите приложение и найдите в своем инструменте наблюдения для новых пролетов.
Если вы используете Grafana, вы можете войти в свою организацию, выбрать облачный стек Grafana и увидеть некоторую телеметрию в разделе «Исследование». Давайте углубимся в то, что вы увидите в этот момент:
На приведенном выше скриншоте показаны самые первые пролеты, созданные и экспортируемые приложением. Если вы нажмете одно из значений идентификатора трассировки, правая панель отобразит и покажет детали для SPAN.
На приведенном выше снимке экрана отображается трасса Emb-Session, которая содержит много интересной информации о том, что мы называем «сеансом». В семантических соглашениях OTEL сеансы определяются как «период времени, охватывающий все действия, выполняемые приложением, и действия, выполняемые конечным пользователем».
Прокрутив вниз на боковой панели справа, вы можете увидеть еще больше информации, которая собирается по умолчанию для каждого сеанса приложения.
Добавление ручного трассировки
Вы также можете добавить свою собственную трассировку. В Opentelemetry это делается через провайдера трассера, поэтому начните с добавления пакета поставщика трассеров Embrace, который реализует этот интерфейс. Настройка этого может выглядеть как:
В этом фрагменте поставщик трассировщиков Embrace инициализируется и используется для создания нового пользовательского промежутка с вызовом Createspan. Трейсер используется для запуска пролета вручную, а затем в определенную точку в бизнес -логике, пролет должен быть закончен.
В целях тестирования мы используем тайм -аут для завершения промежутка здесь, но более интересный случай — это обернуть некоторую расширенную работу и закончить пролет, когда это действие, которое он измеряет, завершено. Обратите внимание, что мы также устанавливаем пользовательский атрибут и событие для этого экземпляра, чтобы прикрепить дальнейший контекст к SPAN.
Теперь вы готовы назначить этот обратный вызов на кнопку и протестировать ее, что можно представить просто как:
После того, как вы запустите это действие, вы можете оглянуться назад на панель панели Grafana. Вы должны увидеть что -то вроде следующего:
SPAN с именем SPAN, созданный вручную в списке.
Если вы копаетесь в этом следе, вы увидите пользовательский атрибут и событие, прикрепленное к нему:
Добавление инструментов для навигации
Более реалистичное приложение будет поддерживать навигацию между экранами, что, вероятно, вы также захотите записать телеметрию. У Embrace есть пакет, который обеспечивает инструментацию для этого общего варианта использования. Этот пакет принимает тот же поставщик трассеров, который вы настраиваете в предыдущих шагах, и завершает ваши компоненты для создания телеметрии всякий раз, когда пользователь перемещается на новый экран:
Ваше приложение теперь должно запустить с помощью панели вкладок с двумя элементами, с экранами, которые выглядят так:
В этом примере показан очень простой навигационный поток с использованием @React-Navigation/Tape Package между домашней страницей и экраном деталей, но также поддерживает экспозицию Packages Expo-Router и React-Native-Navigation.
Теперь, когда все это настроено, вы можете создать приложение снова и перемещаться между представлениями. Каждый раз, когда появляется представление, а затем исчезает (потому что присутствует другой), он создает пролет, который представляет период, когда первое представление отображалось пользователю.
В этом списке теперь есть два новых имена — дома и детали. Эти два пролета были созданы пакетом Embrace, который фиксирует каждое навигационное действие в приложении после настройки пакета.
Принимая во внимание одну из этих новых пролетов, вы можете видеть, что пакет не только добавляет несколько атрибутов по умолчанию, таких как view.name или view.state.end, но также включает атрибуты, которые вы настраивали ранее через свойство Screenattributes компонента EmbracenavigationTracker:
Компонент NavigationContainer, потребляемый из @Embrace-IO/React-Native-Navigation,-это то, что мы называем «библиотекой инструментов». Это отдельный пакет, который создает телеметрические данные, относящиеся к потоку навигации, и автоматически запускается и запускается в нужное время с соответствующим контекстом. Вы можете подробно прочитать о том, как мы приблизились к его созданию.
Эта библиотека инструментов выставлена по объятиям, но она не заблокирована на нашем продукте. Тот же компонент может быть использован для отслеживания данных телеметрии с использованием любого поставщика трассеров.
Аналогичным образом, любая библиотека инструментов, которая работает с поставщиком трассеров и производит допустимые сигналы, может быть подключена, чтобы начать захват дополнительной телеметрии.
Получение ценной информации с приборной панелью объятий
Embrace React Native SDK является отличным вариантом для быстрого сбора ценных данных для анализа поездок пользователей и мониторинга здоровья ваших приложений на разных устройствах. Принимайте не только собирать эти данные для вас, но и предоставляют комплексный набор инструментов, которые помогут вам получить значимую информацию, обрабатывая все сигналы, собранные SDK.
Они включают в себя мощную временную шкалу пользователя, показывающие точные последовательности событий, которые привели к проблеме или плохому опыту клиентов:
Пользовательская временная шкала позволяет разработчикам увидеть, что произошло в коде с точки зрения пользователя (например, TAPS и навигация), из бизнес -логики (например, сетевые и инструментальные пролеты), а также из приложения и уровня устройства (например, предупреждения и сбои памяти). Размещение этой информации в последовательности позволяет разработчикам копаться в технических деталях, влияющих на производительность и коррелировать проблемы в стеке приложения.
Кроме того, вы можете легко интегрировать Acts с вашим существующим решением для наблюдения в мобильных SLO (цели уровня обслуживания) и создать больше сплоченных рабочих процессов между инженерами DevOps/Site Intervice Innegyers (SRE) и мобильными командами. Одним из таких примеров является переадресация сети, что позволяет проследить тот же запрос в временной шкале пользователя и службы мониторинга бэкэнд.
Завершая
В этом прохождении мы рассмотрели, как придать нативное приложение React для отправки данных в любой бэкэнд OTEL по OTLP-HTTP. Мы использовали Embrace React Native SDK, потому что он специально построен для RACE Native и значительно упрощает процесс интеграции по сравнению с пакетами opentelemetry JS. Мы также кратко затронули несколько преимуществ при отправке ваших сигналов OpenteLemetry на панель панели Embrace.
Embrace помогает сделать Openelemetry работать для мобильных разработчиков. Мы построили наши iOS, Android и реагировать Native SDK на OTEL, работая с сообществом, чтобы улучшить спецификацию. Если вы хотите узнать больше о том, как использовать мобильную наблюдаемость, построенную на OpenElemetry, ознакомьтесь с нашими репо с открытым исходным кодом или присоединяйтесь к нашему сообществу Slack.
Embrace предоставляет единственное ориентированное на пользователь решение об наблюдении за мобильным приложением, основанное на Opentelemetry. Предоставляя важную мобильную телеметрию между DevOps и командами мобильных инженеров, охватывает освещение реального влияния клиентов, а не только воздействия на сервер, чтобы добиться успеха в достижении SLO. Узнайте больше последних из Embrace Trending Stories youtube.com/thenewstack Tech Moving быстро, не пропустите эпизод. Подпишитесь на наш канал YouTube, чтобы транслировать все наши подкасты, интервью, демонстрации и многое другое. Группа подпишитесь с эскизом. Джонатан Мунц — старший инженер -программист в Embrace с целым опытом работы в области мобильных, веб -и бэкэнд. Он проработал в пространстве наблюдения уже более десяти лет и наслаждается задачей вытащить информацию из … Подробнее от Джонатана Мунц Флорсии Акоста — это родной инженер, и инженер -фронт -фронт. У нее почти десятилетие опыта в разработке фронта, специализируясь на React, с сильной страстью к созданию визуальных аспектов сложных систем. Вне работы она … читайте больше из Florencia Acosta
