Сегодня я расскажу вам об отслеживании ошибок в реальном времени в приложении React. Приложение внешнего интерфейса обычно не используется для отслеживания ошибок. Некоторые компании часто откладывают отслеживание ошибок, возвращаясь к нему после документации, тестов и прочего. Однако, если вы можете изменить свой продукт в лучшую сторону, то просто сделайте это!
1. Зачем вам нужен Sentry?
Я предполагаю, что вы заинтересованы в отслеживании ошибок в процессе производства
Вы думаете, что этого недостаточно?
Хорошо, давайте посмотрим на детали.
Основные причины использования Sentry для разработчиков:
- Позволяет избавляться от рисков при развертывании кода с ошибками
- Помощь QA в тестировании кода
- Получение быстрых уведомлений о проблемах
- Возможность быстрого исправления ошибок
- Получение удобного отображения ошибок в админ-панели
- Сортировка ошибок по сегментам пользователя / браузера
Основные причины для CEO / Lead проекта
Что такое Sentry и почему без него тяжело при разработке веб-проекта
- Экономия денег (Sentry можно установить на ваших серверах)
- Получение отзывов пользователей
- Понимание того, что не так с вашим проектом в режиме реального времени
- Понимание количества проблем, возникающих у людей с вашим приложением
- Помощь в поиске мест, где ваши разработчики допустили оплошность
Я думаю, что разработчики были бы заинтересованы в этой статье в первую очередь. Вы также можете использовать этот список причин, чтобы убедить начальство интегрировать Sentry.
Будьте осторожны с последним пунктом в списке для бизнеса.
Вы уже заинтересованы?
Что такое Sentry?
Sentry – это приложения для отслеживания ошибок с открытым исходным кодом, которое помогает разработчикам отслеживать, исправлять сбои в режиме реального времени. Не забывайте и о том, что приложение позволяет повышать эффективности и улучшать пользовательское использование. Sentry поддерживает JavaScript, Node, Python, PHP, Ruby, Java и другие языки программирования.
2. Войдите и создайте проект
- Откройте ваш Sentry аккаунт. Возможно, вам придется войти в систему. (Обращаю внимаю что Sentry можно установить на ваших серверах)
- Следующий шаг создать проект
- Выберите ваш язык из списка. (Мы собираемся выбрать React. Нажмите «Создать проект»)
Sentry — мониторинг ошибок при разработке веб-проекта [GeekBrains]
Настройте ваше приложение. Базовый пример, как интегрировать Sentry в контейнер, вы можете увидеть ниже:
В Sentry есть полезный Мастер, который поможет вам понять, что вы должны делать дальше. Вы можете выполнить следующие шаги. Я хочу показать вам, как создать первый обработчик ошибок. Отлично, мы создали проект! Перейдем к следующему шагу
3. Интеграция React и Sentry
Вы должны установить npm пакет в ваш проект.
Инициализируйте Sentry в вашем контейнере:
Sentry.init(< // dsn: #dsnUrl, >);
DSN находится в Projects -> Settings -> Client Keys. Вы можете найти клиентские ключи в строке поиска.
componentDidCatch(error, errorInfo) < Sentry.withScope(scope => < Object.keys(errorInfo).forEach(key =>< scope.setExtra(key, errorInfo[key]); >); Sentry.captureException(error); >); >
4. Отслеживание первой ошибки
Я например использовал простое музыкально приложение с API Deezer. Вы можете видеть это здесь . Нам нужно создать ошибку. Одним из способов является обращение к свойству «undefined»
Front-end мониторинг с помощью Sentry.io и React
Проще говоря, внешний мониторинг — это набор процессов и инструментов, используемых для отслеживания производительности веб-сайта или приложения.
Внешний мониторинг в первую очередь фокусируется на тех частях, которые видит конечный пользователь. К ним относятся такие проблемы, как:
- Медленный рендеринг
- Непоследовательный или неотзывчивый пользовательский интерфейс
- Сетевые запросы / ошибки API
- Проблемы, связанные с фреймворком
Важность внешнего мониторинга
По мере того как веб-сайты становятся все более мощными и сложными, поддерживать их работоспособность становится все труднее.
Производительность внешнего интерфейса — это часть пользовательского опыта. Восприятие качества бизнеса часто является тем, что пользователь впервые видит и испытывает на своем веб-сайте. Любые несоответствия, простои или ошибки на клиенте могут привести к потере доверия к сайту. Таким образом, внешний мониторинг является важной частью разработки сильных и надежных веб-сайтов и приложений.
Начало работы с Sentry for React
К счастью, в настоящее время существует несколько мощных инструментов, таких как Sentry, для отслеживания, записи и мониторинга производительности внешнего интерфейса. Это инструмент с открытым исходным кодом для отслеживания ошибок, который поддерживает различные языки и платформы, такие как Java, PHP, Ruby, React, Rust, Unity и т. Д.
В этом руководстве давайте настроим и начнем мониторинг приложения React с помощью Sentry.
Шаг 1. Создайте проект Sentry
Создайте бесплатную учетную запись Sentry на sentry.io. После создания учетной записи нажмите кнопку Создать проект.
Теперь выберите React в качестве платформы нашего проекта и введите имя проекта. Нажмите Создать проект, чтобы завершить настройку нового проекта Sentry.
Шаг 2. Установите Sentry SDK
В приложение React мы можем интегрировать Sentry, установив его SDK с помощью следующей команды:
Импортируйте установленные пакеты в index.js файл приложения React следующим образом:
Шаг 3. Настройте Sentry в приложении React
Чтобы Sentry мог подключиться к нашему приложению React, нам необходимо настроить наш SDK с нашим клиентским ключом, также известным как значение Sentry DSN (имя источника данных).
Чтобы получить наш клиентский ключ, просто перейдите в Настройки ›Проекты› , как показано на снимке экрана ниже.
Затем нажмите Client Keys (DSN) и скопируйте значение DSN.
Вернувшись в index.js файл приложения, добавьте метод Sentry.init() под операторами импорта, чтобы подключить приложение к вашему проекту Sentry. Ваш index.js файл должен выглядеть примерно так:
О SampleRate
Во время тестирования можно оставить tracesSampleRate равным 1.0. Это означает, что каждое действие, выполняемое в браузере, будет отправлено в Sentry как транзакция.
В производственной среде это значение следует уменьшить, чтобы собрать образец данных одинакового размера без достижения квоты транзакций Sentry. В качестве альтернативы, для динамического сбора выборочных данных можно использовать tracesSampler для фильтрации этих транзакций.
Подробнее о вариантах выборки можно найти в документации здесь.
Шаг 4: интеграция теста
После того, как мы настроили наше приложение, мы можем проверить, успешна ли наша интеграция, с помощью простой кнопки:
return >Bad Button;
Если мы запустим наше приложение, мы получим следующую ошибку:
Теперь давайте проверим нашу панель управления Sentry, чтобы убедиться, что ошибка была правильно отслежена. Как видно на изображении ниже, ошибка ReferenceError присутствует.
Шаг 5. Захват пользовательских ошибок
Помимо сбора ошибок из React, Sentry может также фиксировать ошибки, указанные в приложении.
Например, в моем приложении Color Organizer React я хочу выдать ошибку, если пользователь дважды добавит один и тот же цвет. Как видно из ролика ниже, в настоящее время отображается только окно предупреждения.
Итак, давайте добавим к функции addColor оператор throw, чтобы выдавать ошибку при наличии повторяющегося цвета:
const addColor = (title, color) => < if (colors.some((c) =>c.color === color)) < throw «Color already exists»; // add a throw statement >else
А затем мы просто добавляем оператор try-catch при вызове этой функции. Нам нужно использовать Sentry.captureException() , чтобы он был захвачен как транзакция и отправлен в Sentry.
Во-первых, давайте импортируем пакет для использования Sentry в нашем App.js файле:
В функции, в которой вызывается функция addColor , мы добавляем оператор try-catch следующим образом:
try < addColor(title.value, color.value); >catch (e)
Теперь, если мы добавим новый цвет с тем же цветовым кодом, будет выдана ошибка и отправлена в Sentry.
На нашей панели Sentry Dashboard в разделе Проблемы мы можем увидеть зафиксированную нами настраиваемую ошибку.
Включить мониторинг производительности
В дополнение к отслеживанию ошибок, мы можем включить мониторинг производительности на нашей информационной панели Sentry, заключив Sentry.withProfiler() в наш компонент App в его оператор экспорта.
export default Sentry.withProfiler(App);
Перейдите на вкладку Производительность, чтобы отслеживать и измерять важные показатели, такие как FCP (First Contentful Paint), задержка или время простоя любых запросов API и т. Д.
Воспроизведение сеанса с открытым исходным кодом
Отладка веб-приложения в рабочей среде может быть сложной задачей и потребовать много времени. OpenReplay — альтернатива с открытым исходным кодом для FullStory, LogRocket и Hotjar. Он позволяет вам отслеживать и воспроизводить все, что делают ваши пользователи, и показывает, как ваше приложение ведет себя при каждой проблеме. Это похоже на то, как если бы инспектор браузера был открыт, а пользователь смотрит через плечо. OpenReplay — единственная доступная альтернатива с открытым исходным кодом.
Удачной отладки, для современных команд, работающих с веб-интерфейсом — Начни мониторинг своего веб-приложения бесплатно.
Вывод
Без сомнения, фронтенд-мониторинг сегодня постепенно стал преобладать в практике веб-разработки. Мощные инструменты, такие как Sentry, могут предоставить полезную информацию и управление ошибками, чтобы улучшить взаимодействие с пользователем.
Что еще более мощно, так это то, что OpenReplay интегрируется с Sentry, что позволяет отправлять воспроизведенные действия для более быстрой и простой отладки. Чтобы узнать больше о том, как интегрировать OpenReplay с Sentry, перейдите по этой ссылке.
Спасибо за чтение. Я надеюсь, что эта статья помогла вам начать работу с интерфейсным мониторингом и Sentry.
Источник: digitrain.ru