Fazendo login no React Native: tudo o que você precisa saber!

O registro é um aspecto crucial nos projetos de desenvolvimento de aplicativos React Native, pois é um dos métodos mais fáceis e rápidos para depurar o aplicativo na própria fase de desenvolvimento. O log fornece informações detalhadas e comentários sobre o problema enquanto o código está em execução. Também ajuda os desenvolvedores a entender o comportamento de um aplicativo.

Porém, o registro deve ser realizado durante o processo de desenvolvimento do aplicativo; não é mais benéfico, uma vez que o aplicativo é implantado. Isso ocorre porque esses logs são gerados no lado do cliente. Assim, durante a fase de pós-implantação, os erros detectados por meio de logs serão acessíveis apenas aos usuários e se perderão em seus navegadores. A equipe de desenvolvimento pode identificar esses erros apenas se um usuário preencher um relatório de bug, o que é menos provável de acontecer. Os usuários geralmente abandonam o aplicativo em vez de relatar o problema.

Esta postagem fornece informações abrangentes sobre como fazer login em projetos React Native e métodos para resolver limitações. Mas, antes de nos aprofundarmos, vamos dar uma espiada na arquitetura de um aplicativo React Native.

Ambiente de arquitetura/execução React Native

O ambiente de execução do React Native compreende três threads principais – o thread “Native”, o thread “JS” e um thread de segundo plano que lida com o nó de sombra. Esses threads se comunicam entre si por meio de uma biblioteca chamada “Bridge”.

Fazendo login no React Native: principais etapas a serem consideradas

Agora, vamos reunir informações abrangentes sobre como fazer login no ambiente React Native.

Como ler registros

Os logs do JavaScript são visíveis dentro da parte “console” da seção “ferramentas do desenvolvedor”. Você encontrará “ferramentas para desenvolvedores” no navegador usado para depuração remota de JavaScript. Porém, os desenvolvedores do React Native podem visualizar esses logs quando o depurador está conectado e isso pode retardar o processo de execução do aplicativo até certo ponto. Então, qual é a solução? Você precisa empregar comandos como react-native log-ios (para aplicativos iOS) e react-native log-android (para aplicativos Android) para garantir que seu dispositivo não fique lento durante o registro. Dessa forma, você também fica sabendo mais sobre o que está acontecendo em todo o aplicativo e não apenas no thread JavaScript.

Vamos discutir isso em detalhes para fornecer a você mais clareza na leitura de Logs!

Registros do console

Para visualizar os logs do console, você precisa executar o comando npx expo start e conectar um dispositivo; os logs do console aparecerão no processo do terminal. O tempo de execução envia esses logs para o Expo CLI por meio de soquetes da web. Aqui, você obtém logs de baixa fidelidade, pois as ferramentas de desenvolvimento não estão diretamente conectadas ao mecanismo. Para gerar logs de maior fidelidade, você pode empregar funções de log avançadas, como console.table. Para isso, você precisa criar uma compilação de desenvolvimento usando o Hermes e, em seguida, conectar o inspetor. Hermes é um mecanismo JS otimizado para o ambiente React Native. O Hermes melhora o tempo de inicialização de um aplicativo por compilação JS antecipada em bytecode.

Registros do sistema

Esses tipos de logs são úteis se você deseja visualizar os logs de tudo o que está acontecendo no seu dispositivo e também os logs gerados pelo sistema operacional e por outros aplicativos. Você precisa empregar os seguintes comandos no terminal para esta finalidade.

Para dispositivos Android: npx react-native log-android

Para dispositivos iOS: react-native log-npxios

Como escrever registros

Veja como escrever logs! Sua saída para o log do React Native Console aparece nos logs do aplicativo. É importante usar o nível de log adequado ao gravar logs. Além do console.log, existem outros níveis de log como console.info, console.warn, console.debug, etc. Cada um desses logs tem uma finalidade específica e fornece um controle mais granular sobre o nível de informações necessárias. Você pode usar console.info para descobrir se um conjunto de eventos ocorreu de acordo com o padrão esperado. console.warn é usado se ocorrerem algumas instâncias inesperadas; por exemplo, uma resposta do servidor que não está totalmente incorreta, mas parece questionável. consoe.debug é usado quando você requer logs temporários para resolver problemas.

A importância das bibliotecas de registro

É aconselhável usar uma biblioteca de log ao gravar logs, pois ela salvará logs com base em diferentes níveis de acordo com os requisitos do cliente. Os logs serão salvos em um formato de arquivo criptografado e mensagens de log serão enviadas ou exibidas para referência dos desenvolvedores. Esses registradores prontos para uso economizam tempo e esforço para os desenvolvedores.

Se os arquivos de log adequados não estiverem presentes no ambiente de produção, torna-se um desafio depurar os problemas. Isso ocorre porque os arquivos de log são a única fonte de informações que ajudam a depurar problemas inesperados ou erros desconectados. O uso de bibliotecas de criação de log aborda essa limitação.

Bibliotecas de registro nativas do React: exemplos

React-native-file-logger

React-native-file-logger é um registrador de arquivos para o ambiente nativo de reação e pode anexar mensagens de chamadas de console em arquivos de log empregando registradores de arquivo de Logback (para Android) e CocoaLumberjack (para iOS). Configure-o usando o comando: FileLogger.configure(). Uma vez configurado, ele registrará automaticamente todas as chamadas console.log/debug/… existentes em um arquivo.

React-native-file-logger é escrito em TypeScript e oferece uma política opcional de rolagem de arquivos. Os arquivos são rolados com base no tamanho e no tempo necessário. A política de rolagem é altamente personalizável. Você pode customizar o nível de log para saída de arquivo e o diretório de log, um caminho onde os arquivos de log são armazenados. Além disso, se você não deseja usar chamadas de console para registro de arquivo, tem a opção de gravar mensagens diretamente no arquivo de registro usando sua API do logger.

Este logger também pode enviar logs de arquivo por e-mail para desenvolvedores sem depender de nenhuma outra biblioteca. O logger emprega o global._inspectorLog não documentado do React Native. Usando React-native-file-logger, você pode interceptar chamadas de console e recuperar a mensagem de log formatada.

react-native-logs

Este logger React Native vem com “níveis de log” personalizados e “transportes” como gravação de arquivo, console colorido, etc. A gravidade de cada nível de log é exibida; os níveis de log são organizados em ordem crescente com base em seu grau de importância. A partir daí, “transporte” gerencia os logs. “Transporte” é uma funcionalidade que salva, exibe e envia mensagens de registro.

Para instalação, execute um destes dois comandos:

npm install –save react-native-logs

ou

yarn add react-native-logs

Agora coloque a bola para rolar! Vá para react-native-logs e, a partir daí,

importar { registrador }.

Em seguida, execute o comando var log = logger.createLogger

O método “createLogger” permite criar um logger simples que oferece níveis de aviso, depuração e erro. Para customizar este logger, você precisa passar um objeto de configuração para o método “createLogger”.

Chegando ao “transporte”, os desenvolvedores podem escrever suas próprias especificações de “transporte” para enviar logs para um serviço de nuvem. Você também pode escolher entre várias opções padrão de “transporte” como hideDate, hideLevel, loggerName, dateFormat, etc.; se você definir o parâmetro – transportOptions. Aqui, você também pode adicionar novas opções que são passadas para os transportes e sobrescrever as opções de transporte predefinidas.

O nível de gravidade dos logs pode ser definido; para isso, você precisa passar o nome (string) do nível que é de menor importância. Aqui, você pode sobrescrever qualquer opção config.severity que tenha sido definida quando o criador de logs foi criado.

Como lidar com diferentes tipos de erros exibidos pelos logs

Todos os avisos e erros nas compilações de desenvolvimento aparecem dentro de um LogBox presente no aplicativo. Este LogBox é desabilitado automaticamente durante a liberação dos builds de produção. Lembre-se de que ignorar logs não é uma boa prática e deve ser o último recurso. E, se você tiver que ignorar algum log devido a algum motivo inevitável, crie uma tarefa para corrigir esses logs posteriormente.

Erros do console

Você pode visualizar os erros e avisos do console na forma de notificações na tela com um emblema amarelo ou vermelho. O número de avisos e erros também é exibido. Para ler os avisos e erros do console, você precisa clicar na notificação. Depois disso, as informações em tela cheia sobre o log aparecerão e você poderá paginar cada log presente no console.

Você pode ocultar as notificações acima usando o comando: LogBox.ignoreAllLogs(). Essa abordagem é útil enquanto você faz demonstrações de produtos. Você também pode ocultar notificações seguindo a abordagem “por log”. Aqui, você precisa digitar o comando: LogBox.ignoreLogs(). Essa abordagem pode ser usada para lidar com avisos ruidosos que você não pode corrigir; por exemplo, aqueles em uma dependência de terceiros.

Erros de sintaxe

Sempre que há um erro de Sintaxe, aparece um erro de LogBox em tela cheia. O LogBox mostra o rastreamento de pilha, bem como a localização do erro de sintaxe. Tal erro não pode ser descartado, pois denota uma execução JS inválida que deve necessariamente ser resolvida antes de continuar com o processo de desenvolvimento do aplicativo. É assim que você precisa agir para descartar erros de sintaxe. Corrija o erro. Em seguida, você pode usar uma destas duas maneiras – Ativar atualização rápida e salvá-la como “descartar automaticamente” ou desativar Atualização rápida e recarregar usando o comando cmd+r.

Erros de JS não tratados

Os erros de JavaScript não tratados anteriormente exibem um LogBox em tela cheia automaticamente, mostrando a origem do erro. Você pode descartar ou minimizar esses erros para visualizar o estado do aplicativo quando esses erros surgirem. No entanto, corrigir esses erros é altamente recomendado.

Conclusão

Espero que você tenha reunido informações acionáveis ​​sobre as várias abordagens para fazer login no React Native. Para criar um aplicativo React Native de primeira classe, a equipe de desenvolvimento deve estar bem equipada para lidar com eventos e erros inesperados. Além disso, o registro ajuda você a descobrir a causa raiz dos erros e facilita a resolução de problemas pelos desenvolvedores. No entanto, você deve realizar o processo de log adequadamente para colher seus benefícios sem afetar o UX. Portanto, é importante escolher uma empresa de desenvolvimento de aplicativos React Native experiente para executar seu projeto de desenvolvimento de software.