Iniciar sesión React Native: ¡Todo lo que necesita saber!

El registro es un aspecto crucial en los proyectos de desarrollo de aplicaciones React Native, ya que es uno de los métodos más fáciles y rápidos para depurar la aplicación en la fase de desarrollo. El registro proporciona información detallada y comentarios sobre el problema mientras se ejecuta el código. También ayuda a los desarrolladores a comprender el comportamiento de una aplicación.

Sin embargo, el registro debe realizarse durante el proceso de desarrollo de la aplicación; ya no es beneficioso, una vez que se implementa la aplicación. Esto se debe a que estos registros se generan en el lado del cliente. Por lo tanto, durante la fase posterior a la implementación, los errores detectados a través de los registros serán accesibles solo para los usuarios y se perderán en sus navegadores. El equipo de desarrollo puede identificar estos errores solo si un usuario completa un informe de error, lo que es menos probable que suceda. La mayoría de los usuarios abandonarán la aplicación en lugar de informar el problema.

Esta publicación proporciona información detallada sobre el inicio de sesión en proyectos React Native y métodos para resolver limitaciones. Pero, antes de profundizar más, echemos un vistazo a la arquitectura de una aplicación React Native.

Entorno de ejecución/arquitectura nativa de React

El entorno de ejecución de React Native consta de tres subprocesos principales: el subproceso "Nativo", el subproceso "JS" y un subproceso de fondo que maneja el nodo de sombra. Estos subprocesos se comunican entre sí a través de una biblioteca llamada "Puente".

Inicio de sesión en React Native: pasos clave a considerar

Ahora, recopilemos información completa sobre el inicio de sesión en el entorno React Native.

Cómo leer registros

Los registros de JavaScript son visibles dentro de la parte de la "consola" de la sección de "herramientas para desarrolladores". Encontrará "herramientas para desarrolladores" en el navegador que se utiliza para la depuración remota de JavaScript. Pero, los desarrolladores de React Native pueden ver estos registros cuando el depurador está conectado y esto podría ralentizar el proceso de ejecución de la aplicación hasta cierto punto. Entonces, ¿cuál es la solución? Debe emplear comandos como react-native log-ios (para aplicaciones de iOS) y react-native log-android (para aplicaciones de Android) para asegurarse de que su dispositivo no se ralentice mientras se realiza el registro. De esta manera, también llega a saber más sobre lo que sucede en toda la aplicación y no solo en el hilo de JavaScript.

¡Discutamos esto en detalle para brindarle más claridad al leer los registros!

Registros de la consola

Para ver los registros de la consola, debe ejecutar el comando npx expo start y conectar un dispositivo; los registros de la consola aparecerán en el proceso de la terminal. El tiempo de ejecución envía estos registros a la CLI de Expo a través de sockets web. Aquí, obtiene registros de baja fidelidad ya que las herramientas de desarrollo no están directamente conectadas al motor. Para generar registros de mayor fidelidad, puede emplear funciones de registro avanzadas como console.table. Para esto, debe crear una compilación de desarrollo usando Hermes y luego conectar el inspector. Hermes es un motor JS optimizado para el entorno React Native. Hermes mejora el tiempo de inicio de una aplicación mediante la compilación JS anticipada en código de bytes.

Registros del sistema

Estos tipos de registros son útiles si desea ver los registros de todo lo que ocurre en su dispositivo y también los registros generados por el sistema operativo y por otras aplicaciones. Debe emplear los siguientes comandos en la terminal para este propósito.

Para dispositivos Android: npx react-native log-android

Para dispositivos iOS: react-native log-npxios

Cómo escribir registros

¡Aquí se explica cómo escribir registros! Su salida al registro de React Native Console aparece en los registros de la aplicación. Es importante utilizar el nivel de registro adecuado al escribir registros. Además de console.log, existen otros niveles de registro como console.info, console.warn, console.debug, etc. Cada uno de estos registros tiene un propósito específico y proporciona un control más granular sobre el nivel de información necesario. Puede usar console.info para determinar si un conjunto de eventos tuvo lugar según el patrón esperado. console.warn se usa si ocurren algunas instancias inesperadas; por ejemplo, una respuesta del servidor que no es del todo incorrecta pero parece cuestionable. consoe.debug se usa cuando necesita registros temporales para resolver problemas.

La importancia de las bibliotecas de registro

Es recomendable utilizar una biblioteca de registro al escribir registros, ya que guardará registros en diferentes niveles según los requisitos del cliente. Los registros se guardarán en un formato de archivo cifrado y los mensajes de registro se enviarán o mostrarán para referencia de los desarrolladores. Estos registradores listos para usar ahorran tiempo y esfuerzo a los desarrolladores.

Si los archivos de registro adecuados no están presentes en el entorno de producción, se vuelve un desafío depurar los problemas. Esto se debe a que los archivos de registro son la única fuente de información que lo ayuda a depurar problemas inesperados o errores desconectados. El uso de bibliotecas de registro soluciona esta limitación.

Bibliotecas de registro nativas de React: ejemplos

Registrador de archivos nativos de React

React-native-file-logger es un registrador de archivos para el entorno nativo de reacción y puede agregar mensajes de llamadas de consola en archivos de registro empleando registradores de archivos de Logback (para Android) y CocoaLumberjack (para iOS). Configúrelo usando el comando: FileLogger.configure(). Una vez configurado, registrará automáticamente todas las llamadas existentes a console.log/debug/… en un archivo.

React-native-file-logger está escrito en TypeScript y ofrece una política opcional de transferencia de archivos. Los archivos se enrollan según el tamaño y el tiempo necesario. La política continua es altamente personalizable. Puede personalizar el nivel de registro para la salida del archivo y el directorio de registro, una ruta donde se almacenan los archivos de registro. Además, si no desea utilizar llamadas de consola para el registro de archivos, tiene la opción de escribir mensajes directamente en el archivo de registro utilizando su API de registro.

Este registrador también puede enviar registros de archivos por correo electrónico a los desarrolladores sin tener que depender de ninguna otra biblioteca. El registrador emplea global._inspectorLog no documentado de React Native. Usando React-native-file-logger, puede interceptar llamadas de consola y recuperar el mensaje de registro formateado.

Reaccionar-nativos-registros

Este registrador React Native viene con "niveles de registro" personalizados y "transportes" como escritura de archivos, consola coloreada, etc. Se muestra la gravedad de cada nivel de registro; los niveles de registro se organizan en orden ascendente en función de su grado de importancia. A partir de entonces, "transporte" gestiona los registros. “Transporte” es una funcionalidad que guarda, muestra y envía mensajes de registro.

Para la instalación, ejecute cualquiera de estos dos comandos:

npm install –save react-native-logs

o

hilo añadir reaccionar-nativos-registros

¡Ahora pon la pelota a rodar! Vaya a react-native-logs y desde allí,

importar { registrador }.

Luego ejecute el comando var log = logger.createLogger

El método "createLogger" le permite crear un registrador simple que ofrece niveles de advertencia, depuración y error. Para personalizar este registrador, debe pasar un objeto de configuración al método "createLogger".

En cuanto al "transporte", los desarrolladores pueden escribir sus propias especificaciones de "transporte" para enviar registros a un servicio en la nube. También puede elegir entre varias opciones predeterminadas de "transporte" como hideDate, hideLevel, loggerName, dateFormat, etc.; si establece el parámetro – transportOptions. Aquí, también podría agregar nuevas opciones que pasan a los transportes y puede sobrescribir las opciones de transporte preestablecidas.

El nivel de gravedad de los registros se puede establecer; para esto, necesita pasar el nombre (cadena) del nivel que es de menor importancia. Aquí, puede sobrescribir cualquier opción de config.severity que se haya establecido cuando se creó el registrador.

Cómo manejar diferentes tipos de errores que muestran los registros

Todas las advertencias y errores en las compilaciones de desarrollo aparecen dentro de un LogBox presente en la aplicación. Este LogBox se deshabilita automáticamente durante el lanzamiento de las compilaciones de producción. Recuerde que ignorar los registros no es una buena práctica y debe ser el último recurso. Y, si tuvo que ignorar algún registro debido a alguna razón inevitable, cree una tarea para corregir esos registros más adelante.

Errores de la consola

Puede ver los errores y advertencias de la consola en forma de notificaciones en pantalla con una insignia amarilla o roja. También se muestra el número de advertencias y errores. Para leer las advertencias y errores de la consola, debe hacer clic en la notificación. A partir de entonces, aparecerá información a pantalla completa sobre el registro y podrá paginar cada registro presente dentro de la consola.

Puede ocultar las notificaciones antes mencionadas empleando el comando: LogBox.ignoreAllLogs(). Este enfoque es útil cuando se realizan demostraciones de productos. También puede ocultar notificaciones siguiendo el enfoque "por registro". Aquí, debe escribir el comando: LogBox.ignoreLogs(). Este enfoque se puede usar para manejar advertencias ruidosas que no puede corregir; por ejemplo, los que están en una dependencia de terceros.

errores de sintaxis

Cada vez que hay un error de sintaxis, aparece un error de LogBox de pantalla completa. LogBox le muestra el seguimiento de la pila, así como la ubicación del error de sintaxis. Dicho error no se puede descartar, ya que denota una ejecución de JS no válida que necesariamente debe resolverse antes de continuar con el proceso de desarrollo de la aplicación. Así es como debe actuar para descartar los errores de sintaxis. Solucione el error. Luego, puede usar cualquiera de estas dos formas: habilite Fast Refresh y guárdelo como "descartar automáticamente" o deshabilite Fast Refresh y vuelva a cargar usando el comando cmd + r.

Errores JS no controlados

Los errores de JavaScript no manejados anteriormente muestran un LogBox de pantalla completa automáticamente, que muestra la fuente del error. Puede descartar o minimizar dichos errores para ver el estado de la aplicación cuando surjan estos errores. Sin embargo, se recomienda encarecidamente abordar estos errores.

Línea de fondo

Espero que haya recopilado información útil sobre los diversos enfoques para iniciar sesión en React Native. Para crear una aplicación React Native de primera clase, el equipo de desarrollo debe estar bien equipado para abordar eventos y errores inesperados. Y el registro lo ayuda a descubrir la causa raíz de los errores y facilita a los desarrolladores la resolución de problemas. Sin embargo, debe llevar a cabo el proceso de registro de forma adecuada para obtener sus beneficios sin afectar la UX. Por lo tanto, es importante elegir una empresa de desarrollo de aplicaciones React Native con experiencia para ejecutar su proyecto de desarrollo de software.