Вход в React Native: все, что вам нужно знать!

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

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

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

React Native Architecture/среда выполнения

Среда выполнения React Native состоит из трех основных потоков — «собственного» потока, потока «JS» и фонового потока, который обрабатывает теневой узел. Эти потоки взаимодействуют друг с другом через библиотеку под названием «Мост».

Вход в React Native: основные шаги, которые следует учитывать

Теперь давайте соберем всестороннюю информацию о ведении журнала в среде React Native.

Как читать журналы

Журналы JavaScript видны внутри «консольной» части раздела «инструменты разработчика». Вы найдете «инструменты разработчика» в браузере, который используется для удаленной отладки JavaScript. Но разработчики React Native могут просматривать эти журналы, когда отладчик подключен, и это может в определенной степени замедлить процесс выполнения приложения. Итак, каково решение? Вам необходимо использовать такие команды, как react-native log-ios (для приложений iOS) и react-native log-android (для приложений Android), чтобы гарантировать, что ваше устройство не замедляется во время регистрации. Таким образом, вы также узнаете больше о том, что происходит во всем приложении, а не только в потоке JavaScript.

Давайте обсудим это подробно, чтобы дать вам больше ясности при чтении журналов!

Журналы консоли

Для просмотра логов Консоли нужно запустить команду npx expo start и подключить устройство; журналы консоли появятся в терминальном процессе. Среда выполнения отправляет эти журналы в интерфейс командной строки Expo через веб-сокеты. Здесь вы получаете журналы с низкой точностью, поскольку инструменты разработки не подключены напрямую к движку. Чтобы создавать журналы с более высокой точностью, вы можете использовать расширенные функции ведения журнала, такие как console.table. Для этого вам нужно создать девелоперскую сборку с помощью Hermes, а затем подключить инспектор. Hermes — это движок JS, оптимизированный для среды React Native. Hermes сокращает время запуска приложения за счет предварительной компиляции JS в байт-код.

Системные журналы

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

Для устройств Android: npx react-native log-android

Для устройств iOS: реагировать на собственный log-npxios

Как писать журналы

Вот как писать логи! Ваши выходные данные в журнале React Native Console отображаются в журналах приложений. При написании журналов важно использовать правильный уровень журнала. Помимо console.log, существуют другие уровни журналов, такие как console.info, console.warn, console.debug и т. д. Каждый из этих журналов имеет определенную цель и обеспечивает более детальный контроль над уровнем необходимой информации. Вы можете использовать console.info, чтобы выяснить, произошел ли набор событий в соответствии с ожидаемым шаблоном. console.warn используется, если происходят какие-то непредвиденные случаи; например, ответ сервера, который не совсем неверен, но выглядит сомнительно. consoe.debug используется, когда вам требуются временные журналы для решения проблем.

Важность библиотек журналирования

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

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

Нативные библиотеки ведения журналов React: примеры

React-родной-файл-логгер

React-native-file-logger — это файл-логгер для собственной среды реакции, который может добавлять сообщения из консольных вызовов в файлы журналов, используя файловые регистраторы от Logback (для Android) и CocoaLumberjack (для iOS). Настройте его с помощью команды: FileLogger.configure(). После настройки он автоматически записывает все существующие вызовы console.log/debug/… в файл.

React-native-file-logger написан на TypeScript и предлагает дополнительную политику смены файлов. Файлы скручиваются в зависимости от размера и необходимого времени. Скользящая политика легко настраивается. Вы можете настроить уровень журнала для вывода файлов и каталог журнала, путь, по которому хранятся файлы журнала. Кроме того, если вы не хотите использовать консольные вызовы для ведения журнала файлов, у вас есть возможность напрямую записывать сообщения в файл журнала с помощью вашего API регистратора.

Этот регистратор также может отправлять журналы файлов по электронной почте разработчикам, не завися от какой-либо другой библиотеки. Регистратор использует недокументированный глобальный файл React Native._инспекционный журнал. Используя React-native-file-logger, вы можете перехватывать вызовы консоли и получать отформатированное сообщение журнала.

реагировать родные журналы

Этот регистратор React Native поставляется с настраиваемыми «уровнями журнала» и «транспортом», такими как запись файлов, цветная консоль и т. Д. Отображается серьезность каждого уровня журнала; уровни журнала расположены в порядке возрастания в зависимости от степени их важности. После этого «транспорт» управляет журналами. «Транспорт» — это функция, которая сохраняет, отображает и отправляет сообщения журнала.

Для установки выполните любую из этих двух команд:

npm install – сохранить журналы реакции

или же

пряжа добавить реагирующие нативные журналы

Теперь запустите мяч! Перейдите к react-native-logs и оттуда,

импорт {логгер}.

Затем выполните команду var log = logger.createLogger.

Метод createLogger позволяет создать простой регистратор с уровнями предупреждений, отладки и ошибок. Для настройки этого регистратора вам необходимо передать объект конфигурации в метод createLogger.

Что касается «транспорта», разработчики могут написать свои собственные спецификации «транспорта» для отправки журналов в облачный сервис. Вы также можете выбрать один из нескольких вариантов «транспорта» по умолчанию, таких как hideDate, hideLevel, loggerName, dateFormat и т. д.; если задать параметр — transportOptions. Здесь вы также сможете добавить новые параметры, которые передаются транспорту и могут перезаписывать предварительно установленные параметры транспорта.

Можно установить уровень серьезности журналов; для этого нужно передать имя (строку) наименее важного уровня. Здесь вы можете перезаписать любую опцию config.severity, которая была установлена ​​при создании регистратора.

Как обрабатывать различные типы ошибок, отображаемые журналами

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

Ошибки консоли

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

Вы можете скрыть вышеупомянутые уведомления, используя команду: LogBox.ignoreAllLogs(). Этот подход удобен, когда вы даете демонстрации продукта. Вы также можете скрыть уведомления, используя подход «на каждый журнал». Здесь вам нужно ввести команду: LogBox.ignoreLogs(). Этот подход можно использовать для обработки зашумленных предупреждений, которые вы не можете исправить; например, те, которые находятся в сторонней зависимости.

Синтаксические ошибки

Всякий раз, когда возникает синтаксическая ошибка, появляется полноэкранная ошибка LogBox. LogBox показывает вам трассировку стека, а также местоположение синтаксической ошибки. Такую ошибку нельзя игнорировать, поскольку она указывает на недопустимое выполнение JS, которое обязательно должно быть устранено, прежде чем вы продолжите процесс разработки приложения. Вот как вам нужно действовать для отклонения синтаксических ошибок. Исправьте ошибку. Затем вы можете использовать любой из этих двух способов — включить быстрое обновление и сохранить его как «автоматически отклонять» или отключить быстрое обновление и перезагрузить с помощью команды cmd + r.

Необработанные ошибки JS

Ранее необработанные ошибки JavaScript автоматически отображают полноэкранный LogBox с указанием источника ошибки. Вы можете отклонить или свести к минимуму такие ошибки, чтобы просмотреть состояние приложения, когда эти ошибки возникают. Тем не менее, настоятельно рекомендуется исправить эти ошибки.

Нижняя линия

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