Accesso a React Native: tutto quello che devi sapere!

La registrazione è un aspetto cruciale nei progetti di sviluppo di app React Native in quanto è uno dei metodi più semplici e veloci per eseguire il debug dell'app nella fase di sviluppo stessa. La registrazione fornisce informazioni dettagliate e feedback sul problema mentre il codice è in esecuzione. Aiuta anche gli sviluppatori a comprendere il comportamento di un'app.

Tuttavia, la registrazione dovrebbe essere eseguita durante il processo di sviluppo dell'app; non è più vantaggioso, una volta che l'app viene distribuita. Questo perché questi registri vengono generati sul lato client. Pertanto, durante la fase post-distribuzione, gli errori rilevati tramite i log saranno accessibili solo agli utenti e andranno persi nei loro browser. Il team di sviluppo può identificare questi errori solo se un utente compila una segnalazione di bug, che è meno probabile che accada. Gli utenti per lo più abbandoneranno l'app invece di segnalare il problema.

Questo post fornisce approfondimenti completi sull'accesso ai progetti React Native e ai metodi per risolvere i limiti. Ma, prima di approfondire, diamo un'occhiata all'architettura di un'app nativa React.

Ambiente di esecuzione/architettura nativa React

L'ambiente di esecuzione React Native comprende tre thread principali: il thread "Native", il thread "JS" e un thread in background che gestisce il nodo shadow. Questi thread comunicano tra loro tramite una libreria denominata "Bridge".

Accesso a React Native: passaggi chiave da considerare

Ora, raccogliamo approfondimenti completi sull'accesso nell'ambiente React Native.

Come leggere i registri

I log JavaScript sono visibili all'interno della parte “console” della sezione “strumenti per sviluppatori”. Troverai "strumenti per sviluppatori" nel browser utilizzato per il debug remoto di JavaScript. Tuttavia, gli sviluppatori React Native possono visualizzare questi log quando il debugger è connesso e questo potrebbe rallentare in una certa misura il processo di esecuzione dell'app. Allora, qual è la soluzione? Devi utilizzare comandi come react-native log-ios (per le app iOS) e react-native log-android (per le app Android) per assicurarti che il tuo dispositivo non rallenti durante la registrazione. In questo modo, puoi anche saperne di più su cosa sta succedendo nell'intera app e non solo nel thread JavaScript.

Ne discutiamo in dettaglio per fornirti maggiore chiarezza sulla lettura dei log!

Registri della console

Per visualizzare i log della console, è necessario eseguire il comando npx expo start e connettere un dispositivo; i registri della console verranno visualizzati nel processo del terminale. Il runtime invia questi log all'interfaccia a riga di comando di Expo tramite socket Web. Qui ottieni log a bassa fedeltà poiché gli strumenti di sviluppo non sono direttamente collegati al motore. Per generare log più fedeli, puoi utilizzare funzioni di registrazione avanzate come console.table. Per questo, è necessario creare una build di sviluppo utilizzando Hermes e quindi collegare l'ispettore. Hermes è un motore JS ottimizzato per l'ambiente React Native. Hermes migliora il tempo di avvio di un'app mediante la compilazione anticipata di JS in bytecode.

Registri di sistema

Questi tipi di registri sono utili se desideri visualizzare i registri per tutto ciò che accade sul tuo dispositivo e anche i registri generati dal sistema operativo e da altre app. A tale scopo è necessario utilizzare i seguenti comandi nel terminale.

Per dispositivi Android: npx react-native log-android

Per dispositivi iOS: react-native log-npxios

Come scrivere registri

Ecco come scrivere i log! Il tuo output nel registro di React Native Console viene visualizzato nei registri dell'applicazione. È importante utilizzare il livello di log corretto durante la scrittura dei log. Oltre a console.log, esistono altri livelli di log come console.info, console.warn, console.debug, ecc. Ciascuno di questi log ha uno scopo specifico e fornisce un controllo più granulare sul livello di informazioni necessarie. Puoi usare console.info per capire se una serie di eventi si è verificata secondo lo schema previsto. console.warn viene utilizzato se si verificano alcune istanze impreviste; ad esempio, una risposta del server che non è del tutto errata ma sembra discutibile. consoe.debug viene utilizzato quando sono necessari log temporanei per la risoluzione dei problemi.

L'importanza delle librerie di registrazione

È consigliabile utilizzare una libreria di registrazione durante la scrittura dei registri in quanto salverà i registri in base a diversi livelli in base alle esigenze del cliente. I registri verranno salvati in un formato di file crittografato e i messaggi di registro verranno inviati o visualizzati per riferimento degli sviluppatori. Tali logger pronti all'uso fanno risparmiare tempo e fatica agli sviluppatori.

Se i file di registro corretti non sono presenti nell'ambiente di produzione, diventa difficile eseguire il debug dei problemi. Questo perché i file di registro sono l'unica fonte di informazioni che consente di eseguire il debug di problemi imprevisti o errori disconnessi. L'utilizzo delle librerie di registrazione risolve questa limitazione.

Librerie di registrazione native di React: esempi

React-native-file-logger

React-native-file-logger è un file-logger per l'ambiente react native e può aggiungere messaggi dalle chiamate della console nei file di registro utilizzando i file logger di Logback (per Android) e CocoaLumberjack (per iOS). Configuralo usando il comando: FileLogger.configure(). Una volta configurato, registrerà automaticamente tutte le chiamate console.log/debug/… esistenti in un file.

React-native-file-logger è scritto in TypeScript e offre una politica opzionale di file-rolling. I file vengono arrotolati in base alle dimensioni e al tempo necessario. La politica a rotazione è altamente personalizzabile. È possibile personalizzare il livello di registro per l'output del file e la directory del registro, un percorso in cui vengono archiviati i file di registro. Inoltre, se non desideri utilizzare le chiamate della console per la registrazione dei file, hai la possibilità di scrivere direttamente i messaggi nel file di registro utilizzando l'API del tuo logger.

Questo logger può anche inviare tramite e-mail i registri dei file agli sviluppatori senza dover dipendere da altre librerie. Il logger utilizza global._inspectorLog non documentato di React Native. Utilizzando React-native-file-logger, puoi intercettare le chiamate della console e recuperare il messaggio di registro formattato.

reagire-nativo-log

Questo logger React Native viene fornito con "livelli di registro" personalizzati e "trasporti" come scrittura di file, console colorata, ecc. Viene visualizzata la gravità di ciascun livello di registro; i livelli di registro sono organizzati in ordine crescente in base al loro grado di importanza. Successivamente, "trasporto" gestisce i registri. "Trasporto" è una funzionalità che salva, visualizza e invia messaggi di registro.

Per l'installazione, eseguire uno di questi due comandi:

npm install –save react-native-logs

o

il filato aggiunge i registri nativi di reazione

Ora fai rotolare la palla! Vai a react-native-logs e da lì,

importa {registratore}.

Quindi eseguire il comando var log = logger.createLogger

Il metodo "createLogger" consente di creare un semplice logger che offre livelli di avvertenza, debug ed errore. Per personalizzare questo logger, è necessario passare un oggetto di configurazione al metodo "createLogger".

Venendo al "trasporto", gli sviluppatori possono scrivere le proprie specifiche di "trasporto" per l'invio di registri a un servizio cloud. Puoi anche scegliere tra diverse opzioni di "trasporto" predefinite come hideDate, hideLevel, loggerName, dateFormat, ecc.; se imposti il ​​parametro – transportOptions. Qui puoi anche aggiungere nuove opzioni che vengono passate ai trasporti e puoi sovrascrivere le opzioni di trasporto preimpostate.

È possibile impostare il livello di gravità dei registri; per questo è necessario passare il nome (stringa) del livello meno importante. Qui è possibile sovrascrivere qualsiasi opzione config.severity impostata al momento della creazione del logger.

Come gestire diversi tipi di errori visualizzati dai registri

Tutti gli avvisi e gli errori nelle build di sviluppo vengono visualizzati all'interno di un LogBox presente nell'app. Questo LogBox viene disabilitato automaticamente durante il rilascio delle build di produzione. Ricorda che ignorare i log non è una buona pratica e dovrebbe essere l'ultima risorsa. E, se dovessi ignorare qualsiasi registro a causa di qualche motivo inevitabile, crea un'attività per correggere quei registri in seguito.

Errori della console

È possibile visualizzare gli errori e gli avvisi della console sotto forma di notifiche sullo schermo con un badge giallo o rosso. Viene inoltre visualizzato il numero di avvisi ed errori. Per leggere gli avvisi e gli errori della console, è necessario fare clic sulla notifica. Successivamente, appariranno le informazioni a schermo intero sul registro e sarai in grado di sfogliare ogni registro presente all'interno della console.

Puoi nascondere le suddette notifiche utilizzando il comando: LogBox.ignoreAllLogs(). Questo approccio è utile mentre fornisci demo di prodotti. Puoi anche nascondere le notifiche seguendo l'approccio "per log". Qui, devi digitare il comando: LogBox.ignoreLogs(). Questo approccio può essere utilizzato per gestire avvisi rumorosi che non è possibile correggere; ad esempio, quelli in una dipendenza di terze parti.

Errori di sintassi

Ogni volta che si verifica un errore di sintassi, viene visualizzato un errore LogBox a schermo intero. Il LogBox mostra la traccia dello stack e la posizione dell'errore di sintassi. Tale errore non può essere eliminato in quanto denota un'esecuzione JS non valida che deve essere necessariamente risolta prima di continuare con il processo di sviluppo dell'app. Ecco come devi agire per ignorare gli errori di sintassi. Correggi l'errore. Quindi, puoi utilizzare uno di questi due modi: abilita l'aggiornamento rapido e salvalo come "chiudi automaticamente" o disabilita l'aggiornamento rapido e ricarica utilizzando il comando cmd + r.

Errori JS non gestiti

Gli errori JavaScript non gestiti in precedenza visualizzano automaticamente un LogBox a schermo intero, che mostra l'origine dell'errore. È possibile ignorare o ridurre al minimo tali errori per visualizzare lo stato dell'applicazione quando questi errori si verificano. Tuttavia, si consiglia vivamente di affrontare questi errori.

Linea di fondo

Spero che tu abbia raccolto informazioni utili sui vari approcci per accedere a React Native. Per creare un'app React Native di alto livello, il team di sviluppo deve essere ben attrezzato per affrontare eventi ed errori imprevisti. Inoltre, la registrazione ti aiuta a scoprire la causa principale degli errori e rende facile per gli sviluppatori risolvere i problemi. Tuttavia, è necessario eseguire il processo di registrazione in modo appropriato per trarne i vantaggi senza influire sulla UX. Pertanto, è importante scegliere una società di sviluppo di app React Native esperta per eseguire il progetto di sviluppo software.