В die kartenmacherei я работаю над новым венчурным проектом под названием Celebrate, где мы создаем мобильное приложение для управления приглашениями на мероприятия. Поскольку мы занимаемся разработкой веб-технологий, а именно JavaScript и CSS, мы разрабатываем фреймворк React Native. React Native позволяет вам писать код вашего приложения с помощью React.js, стилизовать его с помощью CSS, а затем скомпилировать его в Objective-C или Java, чтобы его можно было запускать как приложение для iOS или Android.

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

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

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

Это привело нас к поиску Sentry, который хорошо справляется с JavaScript и React Native.

Что такое Sentry?

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

Sentry готов к использованию с большинством популярных языков, включая PHP, JavaScript, Ruby, Java и т. Д. Есть даже пакеты, которые можно использовать напрямую с популярными фреймворками, такими как Symfony или, как в нашем случае использования, React Native.

Установить Sentry в ваше приложение несложно. После создания вашего проекта в веб-интерфейсе Sentry они предоставят вам пошаговое руководство по его интеграции в ваш проект.

Подключение React Native к Sentry

Для проекта React Native это так же просто, как установить пакет NPM:

npm install react-native-sentry --save
react-native link react-native-sentry

Затем вы регистрируете приложение в Sentry где-нибудь в своем коде:

import { Sentry } from ‘react-native-sentry’;
Sentry.config(‘http://[email protected]/project').install();

После применения этих шагов всякий раз, когда в приложении обнаруживается ошибка, она будет отправлена ​​в Sentry. Поскольку предыдущий код будет отправлять ошибки в Sentry даже в режиме разработки, который, вероятно, не идеален, один совет, который я могу порекомендовать, - это «устанавливать» только в том случае, если глобальная переменная React Native «__DEV__» не установлена.

import { Sentry } from ‘react-native-sentry’;
Sentry.config(‘http://[email protected]/project')
if (!global.__DEV__) {
  Sentry.install();
}

Отчеты об ошибках

Как вы можете видеть на скриншоте выше, Sentry предоставляет вам много информации об ошибках. Мы можем видеть такую ​​информацию, как:

  • Название и тип ошибки
  • Стек трассировки ошибки в JavaScript
  • Сколько раз возникала эта ошибка и когда
  • Телефон, на котором произошла ошибка

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

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

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

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

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

Панировочные сухари

Хлебные крошки - это временная шкала событий, которые привели к возникновению ошибки. Как можно увидеть в этом примере, мы можем видеть сетевые события, которые произошли до возникновения «TypeError», то есть мы можем предположить, что причиной были некоторые неожиданные данные, возвращенные из этого вызова API.

Интеграция React Native Sentry автоматически отслеживает определенные хлебные крошки, но вы также можете программно определить свои собственные. Например, вы можете отслеживать, когда клиент входит в систему или перемещается между экранами.

Информация о приложении

Наконец, Sentry предоставляет нам подробную информацию о телефоне, который использовался во время ошибки.

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

Хотя Sentry предоставляет нам большой объем информации, в ближайшие недели мы обязательно отфильтруем определенные данные, которые считаются личными для клиента, такие как IP-адреса, имена пользователей и т. Д., Чтобы обеспечить соответствие требованиям нового европейского стандарта. Законы GDPR, вступающие в силу 25 мая. Если вы выбрали использование Sentry, вы, возможно, захотите это рассмотреть и можете найти инструкции по фильтрации в Документации по конфиденциальным данным Sentry.

Sentry API

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

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

Заключение

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

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

Учитывая, что Sentry можно разместить бесплатно и готов к интеграции в React Native или почти в любой другой проект в этом отношении, я очень рекомендую его для вашего проекта.