Conectarea React Native: tot ce trebuie să știți!

Înregistrarea este un aspect crucial în proiectele de dezvoltare a aplicațiilor React Native, deoarece este una dintre cele mai ușoare și rapide metode de depanare a aplicației chiar în faza de dezvoltare. Înregistrarea oferă informații detaliate și feedback despre problemă în timp ce codul rulează. De asemenea, ajută dezvoltatorii să înțeleagă comportamentul unei aplicații.

Dar, înregistrarea în jurnal ar trebui să fie efectuată în timpul procesului de dezvoltare a aplicației; nu mai este benefică, odată ce aplicația este implementată. Acest lucru se datorează faptului că aceste jurnale sunt generate pe partea clientului. Prin urmare, în timpul fazei de post-implementare, erorile detectate prin intermediul jurnalelor vor fi accesibile numai utilizatorilor și se vor pierde în browserele lor. Echipa de dezvoltare poate identifica aceste erori numai dacă un utilizator completează un raport de eroare, ceea ce este cel mai puțin probabil să se întâmple. În mare parte, utilizatorii vor abandona aplicația în loc să raporteze problema.

Această postare oferă informații cuprinzătoare cu privire la conectarea la proiectele React Native și metodele de rezolvare a limitărilor. Dar, înainte de a ne aprofunda, haideți să aruncăm o privire în arhitectura unei aplicații React Native.

React Native Architecture/Execution Environment

Mediul de execuție React Native cuprinde trei fire principale – firul de execuție „Native”, firul de execuție „JS” și un fir de execuție de fundal care gestionează nodul umbră. Aceste fire comunică între ele printr-o bibliotecă numită „Bridge”.

Conectarea React Native: pași cheie de luat în considerare

Acum, să adunăm informații cuprinzătoare despre conectarea în mediul React Native.

Cum se citesc jurnalele

Jurnalele JavaScript sunt vizibile în partea „consolă” a secțiunii „instrumente pentru dezvoltatori”. Veți găsi „instrumente pentru dezvoltatori” în browser care este utilizat pentru depanarea JavaScript la distanță. Dar, dezvoltatorii React Native pot vizualiza aceste jurnale atunci când depanatorul este conectat și acest lucru ar putea încetini într-o anumită măsură procesul de execuție a aplicației. Deci, care este soluția? Trebuie să utilizați comenzi precum react-native log-ios (pentru aplicațiile iOS) și react-native log-android (pentru aplicațiile Android) pentru a vă asigura că dispozitivul dvs. nu încetinește în timpul conectării. În acest fel, veți afla și mai multe despre ceea ce se întâmplă în întreaga aplicație și nu doar firul JavaScript.

Să discutăm acest lucru în detaliu pentru a vă oferi mai multă claritate în citirea jurnalelor!

Jurnalele consolei

Pentru a vizualiza jurnalele consolei, trebuie să rulați comanda npx expo start și să conectați un dispozitiv; jurnalele consolei vor apărea în procesul terminalului. Runtime trimite aceste jurnale către Expo CLI prin intermediul socket-urilor web. Aici, obțineți jurnale de fidelitate scăzută, deoarece instrumentele de dezvoltare nu sunt conectate direct la motor. Pentru a genera jurnale de fidelitate mai mare, puteți folosi funcții avansate de înregistrare, cum ar fi console.table. Pentru aceasta, trebuie să creați o versiune de dezvoltare folosind Hermes și apoi să conectați inspectorul. Hermes este un motor JS optimizat pentru mediul React Native. Hermes îmbunătățește timpul de pornire al unei aplicații prin compilarea JS în avans în bytecode.

Jurnalele de sistem

Aceste tipuri de jurnale sunt benefice dacă doriți să vizualizați jurnalele pentru tot ceea ce are loc pe dispozitivul dvs. și, de asemenea, jurnalele generate de sistemul de operare, precum și de alte aplicații. În acest scop, trebuie să utilizați următoarele comenzi în terminal.

Pentru dispozitivele Android: npx react-native log-android

Pentru dispozitivele iOS: react-native log-npxios

Cum se scriu jurnalele

Iată cum să scrieți jurnalele! Ieșirea dvs. în jurnalul React Native Console apare în jurnalele aplicației. Este important să folosiți nivelul corespunzător de jurnal în timp ce scrieți jurnalele. Pe lângă console.log, există și alte niveluri de jurnal precum console.info, console.warn, console.debug etc. Fiecare dintre aceste jurnale are un scop specific și oferă un control mai granular asupra nivelului de informații necesare. Puteți utiliza console.info pentru a afla dacă un set de evenimente a avut loc conform modelului așteptat. console.warn este folosit dacă apar niște instanțe neașteptate; de exemplu, un răspuns de server care nu este în întregime incorect, dar pare discutabil. consoe.debug este utilizat atunci când aveți nevoie de jurnalele temporare pentru rezolvarea problemelor.

Importanța logării bibliotecilor

Este recomandabil să utilizați o bibliotecă de înregistrare în timp ce scrieți jurnalele, deoarece va salva jurnale pe diferite niveluri, conform cerințelor clientului. Jurnalele vor fi salvate într-un format de fișier criptat și mesajele de jurnal vor fi trimise sau afișate pentru referința dezvoltatorilor. Astfel de loggere gata de utilizare economisesc timp și efort pentru dezvoltatori.

Dacă fișierele jurnal adecvate nu sunt prezente în mediul de producție, depanarea problemelor devine dificilă. Acest lucru se datorează faptului că fișierele jurnal sunt singura sursă de informații care vă ajută să depanați problemele neașteptate sau erorile deconectate. Utilizarea bibliotecilor de jurnal abordează această limitare.

Biblioteci React Native Logging: Exemple

React-native-file-logger

React-native-file-logger este un fișier de înregistrare pentru mediul nativ react și poate atașa mesaje din apelurile de consolă în fișiere jurnal utilizând înregistratoare de fișiere de la Logback (pentru Android) și CocoaLumberjack (pentru iOS). Configurați-l folosind comanda: FileLogger.configure(). Odată configurat, va înregistra automat toate apelurile existente console.log/debug/… într-un fișier.

React-native-file-logger este scris în TypeScript și oferă o politică opțională de rulare a fișierelor. Fișierele sunt rulate în funcție de dimensiunea și timpul necesar. Politica de rulare este foarte personalizabilă. Puteți personaliza nivelul de jurnal pentru ieșirea fișierelor și directorul de jurnal, o cale în care sunt stocate fișierele de jurnal. Mai mult, dacă nu doriți să utilizați apeluri de consolă pentru înregistrarea fișierelor, aveți opțiunea de a scrie direct mesaje în fișierul de jurnal folosind API-ul dvs. de înregistrare.

Acest logger poate, de asemenea, să trimită prin e-mail jurnalele de fișiere către dezvoltatori fără a fi nevoit să depindă de nicio altă bibliotecă. Loggerul folosește global nedocumentat al React Native._inspectorLog. Folosind React-native-file-logger, puteți intercepta apelurile la consolă și puteți prelua mesajul de jurnal formatat.

jurnalele-native-reacție

Acest logger React Native vine cu „niveluri de jurnal” și „transporturi” personalizate, cum ar fi scrierea fișierelor, consolă colorată, etc. Severitatea fiecărui nivel de jurnal este afișată; nivelurile de jurnal sunt aranjate în ordine crescătoare în funcție de gradul lor de importanță. Ulterior, „transport” gestionează jurnalele. „Transport” este o funcționalitate care salvează, afișează și trimite mesaje de jurnal.

Pentru instalare, rulați oricare dintre aceste două comenzi:

npm install –save react-native-logs

sau

yarn add react-native-busteni

Acum pune mingea să ruleze! Accesați react-native-logs și de acolo,

import { logger }.

Apoi rulați comanda var log = logger.createLogger

Metoda „createLogger” vă permite să creați un logger simplu care oferă niveluri de avertizare, depanare și eroare. Pentru a personaliza acest logger, trebuie să treceți un obiect de configurare la metoda „createLogger”.

Venind la „transport”, dezvoltatorii își pot scrie propriile specificații de „transport” pentru a trimite jurnalele către un serviciu Cloud. De asemenea, puteți alege dintre mai multe opțiuni implicite de „transport”, cum ar fi hideDate, hideLevel, loggerName, dateFormat etc.; dacă setați parametrul – transportOptions. Aici, veți putea, de asemenea, să adăugați noi opțiuni care sunt transmise la transporturi și puteți suprascrie opțiunile de transport prestabilite.

Nivelul de severitate al jurnalelor poate fi setat; pentru aceasta, trebuie să treceți numele (șirul) nivelului care are cea mai mică importanță. Aici, puteți suprascrie orice opțiune de config.severity care a fost setată când a fost creat loggerul.

Cum să gestionați diferitele tipuri de erori afișate de jurnalele

Toate avertismentele și erorile din versiunile de dezvoltare apar într-un LogBox prezent în aplicație. Acest LogBox este dezactivat automat în timpul lansării versiunilor de producție. Amintiți-vă că ignorarea jurnalelor nu este o practică bună și ar trebui să fie ultima soluție. Și, dacă a trebuit să ignorați orice jurnal din cauza unui motiv inevitabil, creați o sarcină pentru a remedia acele jurnale mai târziu.

Erori de consolă

Puteți vizualiza erorile și avertismentele consolei sub formă de notificări pe ecran cu o insignă galbenă sau roșie. Este afișat și numărul de avertismente și erori. Pentru a citi avertismentele și erorile consolei, trebuie să faceți clic pe notificare. După aceea, vor apărea informații pe ecran complet despre jurnal și veți putea să paginați fiecare jurnal prezent în interiorul consolei.

Puteți ascunde notificările menționate mai sus utilizând comanda: LogBox.ignoreAllLogs(). Această abordare este utilă în timp ce oferiți demonstrații de produse. De asemenea, puteți ascunde notificările urmând abordarea „per-log”. Aici, trebuie să tastați comanda: LogBox.ignoreLogs(). Această abordare poate fi folosită pentru a gestiona avertismente zgomotoase pe care nu le puteți remedia; de exemplu, cei aflați într-o dependență de terți.

Erori de sintaxă

Ori de câte ori apare o eroare de sintaxă, apare o eroare LogBox pe ecran complet. LogBox-ul vă arată urmărirea stivei, precum și locația erorii de sintaxă. O astfel de eroare nu poate fi respinsă, deoarece denotă o execuție JS nevalidă care trebuie neapărat rezolvată înainte de a continua procesul de dezvoltare a aplicației. Acesta este modul în care trebuie să acționați pentru a respinge erorile de sintaxă. Remediați eroarea. Apoi, puteți utiliza oricare dintre aceste două moduri - Activați reîmprospătarea rapidă și salvați-o ca „închide automat” sau dezactivați reîmprospătarea rapidă și reîncărcați folosind comanda cmd+r.

Erori JS netratate

Erorile JavaScript netratate anterior afișează automat un LogBox pe ecran complet, arătând sursa erorii. Puteți închide sau minimiza astfel de erori pentru a vedea starea aplicației atunci când apar aceste erori. Cu toate acestea, abordarea acestor erori este foarte recomandată.

Concluzie

Sper că ați adunat informații utile despre diferitele abordări ale conectării în React Native. Pentru a crea o aplicație React Native de top, echipa de dezvoltare trebuie să fie bine echipată pentru a aborda evenimentele și erorile neașteptate. În plus, înregistrarea în jurnal vă ajută să aflați cauza principală a erorilor și facilitează rezolvarea problemelor de către dezvoltatori. Cu toate acestea, trebuie să efectuați procesul de înregistrare în mod corespunzător pentru a beneficia de beneficiile acestuia fără a afecta UX. Prin urmare, este important să alegeți o companie de dezvoltare de aplicații React Native cu experiență pentru a vă executa proiectul de dezvoltare software.